/* Talltale Bench v3 화면 규칙. 색·크기는 tokens.css의 변수만 쓴다. */
*{box-sizing:border-box}
html{font-size:16px;scrollbar-color:var(--border-strong) var(--background)}
body{margin:0;background:var(--background);color:var(--text);font:400 var(--text-base)/1.6 var(--font-body);height:100vh;display:flex;flex-direction:column;overflow:hidden;caret-color:var(--accent-text);word-break:keep-all}
::selection{background:var(--accent-bg-subtle)}
button,input,select{font:inherit;color:inherit}
input,select{font-size:var(--text-base)} /* DESIGN: 입력은 15px 이상 */
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
svg.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 셸 */
.shell{background:var(--shell-bg);color:var(--shell-text);display:flex;align-items:center;gap:var(--space-5);padding:0 var(--space-5);height:52px}
.brand{background:none;border:0;color:inherit;font:500 var(--text-md)/1 var(--font-display);padding:var(--space-2) 0;letter-spacing:-.01em;white-space:nowrap}
.searchwrap{flex:1;max-width:440px;min-width:0;position:relative}
.search{width:100%;display:flex;align-items:center;gap:var(--space-2);background:var(--background);color:var(--text);height:32px;padding:0 var(--space-3);border-radius:var(--radius-1)}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;height:100%}
.search input::placeholder{color:var(--text-muted)}
.search:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.search kbd{font:400 var(--text-xs)/1 var(--font-num);color:var(--text-muted);border:1px solid var(--border);padding:3px 5px;border-radius:var(--radius-1)}
.shell nav{margin-left:auto;display:flex;gap:var(--space-1)}
.shell nav button{background:none;border:0;color:var(--shell-text-muted);height:32px;padding:0 var(--space-3);border-radius:var(--radius-1);display:flex;align-items:center;gap:6px;white-space:nowrap}
.shell nav button:hover{color:var(--shell-text)}
.shell :focus-visible{outline-color:var(--shell-text)}

/* 유니버스 바: 모든 폭·상태에서 한 줄 56px. 넘치는 조건 칩은 「+N」으로 접고, 판은 바 아래에 겹쳐 뜬다(아래를 밀지 않는다). */
.ubar{background:var(--surface);border-bottom:1px solid var(--rule);padding:0 var(--space-5);height:56px;flex:none;display:flex;align-items:center;gap:var(--space-4);position:relative}
.uid{flex:0 1 auto;min-width:0;max-width:34%;display:grid;grid-template-columns:minmax(0,auto) max-content;column-gap:var(--space-3);align-items:baseline}
.ubar .umenu{display:none}
.urest{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-4)}
.uname{font:500 var(--text-xl)/1.2 var(--font-display);letter-spacing:-.01em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucount{display:contents}
.ucount b{font:500 var(--text-xl)/1.2 var(--font-num);white-space:nowrap}
.ucount span{grid-column:1/-1;width:0;min-width:100%;color:var(--text-muted);font-size:var(--text-xs);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{flex:1 1 0;min-width:0;display:flex;flex-wrap:nowrap;gap:var(--space-2);align-items:center;overflow:hidden}
#chips{max-width:max-content} /* 칩 줄은 「+ 조건」 바로 뒤에 내용 폭만큼만 선다 — 남는 폭은 도구 줄(.utools) 앞으로 간다. 넘치면 줄어들어 「+N」으로 접힌다. */
.chip{flex:none;display:inline-flex;align-items:center;height:32px;border:1px solid var(--control-border);border-radius:var(--radius-1);background:var(--background);font-size:var(--text-sm);white-space:nowrap}
.chip .lab{padding:0 var(--space-2) 0 var(--space-3);color:var(--text-muted)}
.chip .src{margin-left:var(--space-2);color:var(--text-muted)}
.chip .src+.lab{padding-left:var(--space-1)}
.chip .val{font-weight:500;padding-right:var(--space-2)}
.chip button{border:0;border-left:1px solid var(--border-subtle);background:none;width:30px;height:100%;display:grid;place-items:center;color:var(--text-muted)}
.chip button:hover{background:var(--surface-hover);color:var(--text)}
.btn{height:32px;padding:0 var(--space-3);border-radius:var(--radius-1);border:1px solid var(--control-border);background:var(--background);display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:500;white-space:nowrap;transition:background var(--dur-1) var(--ease)}
.btn:hover{background:var(--surface-hover)}
.btn.primary{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--accent-on-solid)}
.btn.primary:hover{background:var(--accent-solid-hover)}
.btn.text{border-color:transparent;background:none;color:var(--text);padding:0 var(--space-2)}
.btn.text:hover{background:var(--surface-hover)}
.btn[disabled],.btn.primary[aria-disabled="true"],.btn.primary[aria-disabled="true"]:hover{color:var(--text-muted);background:var(--surface);cursor:not-allowed}
.btn.primary[aria-disabled="true"]{border-color:var(--control-border)}
#chipmore,#basisb{flex:none}
#chipmore[hidden]{display:none} /* .btn의 display가 hidden을 이기지 않게 — 숨긴 「+N」이 옛 글자로 남지 않는다 */
/* 강조: 칩 줄 끝에 괘선으로 가른 테두리 없는 글자 */
#hlbar{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:var(--space-3);height:32px;padding:0 var(--space-4);border-left:1px solid var(--rule);font-size:var(--text-sm);color:var(--text-muted)}
#hlbar label{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}
#hlbar select{flex:0 1 9em;min-width:3em;max-width:9em;border:0;background:none;height:32px;color:var(--text);font-weight:500;padding:0 2px}
#hlbar input{width:3.6em;height:32px;border:0;border-bottom:1px solid var(--control-border);background:none;text-align:right;padding:0 2px}
#hlbar .hlmsg{position:absolute;top:100%;right:var(--space-5);z-index:20;background:var(--background);border:1px solid var(--rule);padding:var(--space-1) var(--space-2);color:var(--text-negative)}
#hlbar .hlmsg:empty{display:none}
/* 겹쳐 뜨는 판: 그림·표를 밀지 않는다 */
.pop{position:absolute;z-index:40;background:var(--background);color:var(--text);border:1px solid var(--rule);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);max-width:min(420px,calc(100vw - 16px));max-height:70vh;overflow:auto}
.pop[hidden]{display:none!important}
.pop p{margin:0 0 var(--space-2)}
.pop p:last-child{margin:0}
.pop.chips{flex:none;flex-wrap:wrap}
.basis{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);color:var(--text-muted)}
.basis label{display:flex;align-items:center;gap:var(--space-2)}
.basis select{border:0;border-bottom:1px solid var(--control-border);background:none;height:32px;color:var(--text);padding:0 2px}
.seg{display:inline-flex;gap:var(--space-3)}
.seg button{background:none;border:0;border-bottom:2px solid transparent;height:32px;padding:0 1px;color:var(--text-muted)}
.seg button:hover{border-bottom-color:var(--border-strong)}
.seg button[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--text);font-weight:500}
.utools{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}
.utools .urule{margin:0 var(--space-2)} /* 「처음으로」(초기화)는 괘선으로 떼어 둔다 */

/* 편집기 */
.editor{border-bottom:1px solid var(--rule);padding:var(--space-5);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5) var(--space-6)}
.editor[hidden]{display:none}
.editor h2{font-size:var(--text-sm);font-weight:500;margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--rule)}
.editor ul{list-style:none;margin:0;padding:0}
.editor li{display:flex;justify-content:space-between;gap:var(--space-3);padding:6px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--text-sm)}
.editor li span:last-child{color:var(--text-muted)}
.editor .foot{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:var(--space-3);font-size:var(--text-sm)}

/* 지면 */
.page{flex:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,36vw,520px);position:relative;min-height:0}
.canvas{padding:var(--space-4) var(--space-5) var(--space-4);min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto}
.canvas>.views,.canvas>.vrow,.canvas>.exc,.canvas>.read,.canvas>.pinbar{flex:none} /* 좁은 화면에서 줄어들어 겹치지 않게: 늘고 줄어드는 것은 그림 자리(stage)뿐 */
.views{display:flex;gap:var(--space-5);border-bottom:1px solid var(--rule-soft);overflow-x:auto;scrollbar-width:none}
.views button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;height:40px;color:var(--text-muted);white-space:nowrap}
.views button:hover{color:var(--text)}
.views button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--text);font-weight:500}
.vrow{display:flex;align-items:baseline;gap:var(--space-3);margin:var(--space-5) 0 var(--space-2)}
.vhead{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4)}
/* 예외 수(값 없음·범위 밖·로그 제외)는 그림 아래 주석 한 줄 — 머리 줄에는 제목·보기 전환·조작부만 둔다 */
.exc{font-size:var(--text-xs);color:var(--text-muted);margin:var(--space-1) 0 0;text-align:right}
.exc:empty{display:none}
.vhead .axis input{height:32px;width:11em;border:0;border-bottom:1px solid var(--control-border);background:none;padding:0 2px}
.vhead h2{font-size:var(--text-md);font-weight:500;margin:0}
.vhead .axis{font-size:var(--text-sm);color:var(--text-muted)}
.vhead .axis select{border:0;border-bottom:1px solid var(--control-border);background:none;height:28px;color:var(--text);font-weight:500;padding:0 2px;max-width:11em}
.mine{font-size:var(--text-xs);color:var(--text-muted);border:1px solid var(--border-strong);padding:0 4px;border-radius:var(--radius-1);margin-left:5px;font-weight:400}
th .rm{color:var(--text-muted);margin-left:4px;padding:2px;vertical-align:-2px}
th .rm:hover{color:var(--text)}
th .rm svg{width:12px;height:12px}
.vhead .axis button{background:none;border:0;border-bottom:1px solid var(--control-border);padding:0 1px;color:var(--text);font-weight:500}
.vhead .axis .ctl{display:inline-block;white-space:nowrap} /* 모든 폭: 덩어리가 줄 끝에서 갈리지 않아 lineDots가 줄별 첫 가운뎃점을 잴 수 있다(§45-5) */
.plot{position:relative;flex:1;min-height:300px}
.plot svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.plot text{font:400 12px var(--font-num);fill:var(--text-muted)}
.plot .lbl{font-family:var(--font-body)}
.plot .grid{stroke:var(--rule-soft)}
.plot .ax,.plot .axb{stroke:var(--mark-market-line)}
.plot .med{stroke:var(--mark-market-line);stroke-dasharray:2 4}
/* 밀집을 농도로 보이되 점 하나도 바탕 대비 3:1을 넘게 한다(.55는 2.33:1이었다). */
.pt{fill:var(--mark-market);fill-opacity:.72;cursor:pointer}
.pt:hover{fill-opacity:1}
.pt.sel{fill:var(--mark-company);fill-opacity:1;stroke:var(--background);stroke-width:2}
.pin{fill:var(--mark-pinned);stroke:var(--background);stroke-width:1.5}
.bar{fill:var(--mark-market);cursor:pointer}
.bar:hover{fill:var(--mark-pinned)}
.iqr{stroke:var(--mark-market);stroke-width:5}
.cm{stroke:var(--mark-company);stroke-width:2}
.read{min-height:32px;border-top:1px solid var(--rule-soft);padding-top:6px;font-size:var(--text-sm);color:var(--text-muted);display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-4)}
.read .vmain{display:inline-flex;flex-wrap:wrap;gap:0 var(--space-4)}
.read b{color:var(--text);font-weight:500}
.read>*{min-width:0;max-width:100%;overflow-wrap:anywhere} /* 긴 회사 이름이 좁은 화면 밖으로 잘려 나가지 않게 */
.sample button{background:none;border:0;padding:0;min-height:32px;color:var(--text);text-decoration:underline;text-underline-offset:3px}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
th{background:var(--surface);border-bottom:1px solid var(--rule);font-weight:500;text-align:right;padding:8px var(--space-3);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th button{background:none;border:0;font-weight:500;display:inline-flex;align-items:center;gap:4px;padding:0}
.vhead .axis #addcol{font-weight:400;color:var(--text);max-width:none}
td{border-bottom:1px solid var(--rule-soft);padding:7px var(--space-3);text-align:right;white-space:nowrap}
td:first-child{white-space:normal;overflow-wrap:anywhere}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-hover)}
tbody tr.sel{background:var(--accent-bg-subtle);box-shadow:inset 3px 0 0 var(--mark-company)}
td small{color:var(--text-muted);font-size:var(--text-xs);margin-left:6px}
.neg{color:var(--text-negative)}
.tablewrap{flex:1;overflow:auto;min-height:0}
.pinbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);border-top:1px solid var(--rule);margin-top:var(--space-4);padding-top:var(--space-3);font-size:var(--text-sm)}
.pinbar[hidden]{display:none}
.pinbar .who,.read .who{display:inline-flex;align-items:center;gap:6px}
.pinbar .who button{background:none;border:0;color:var(--text-muted);padding:2px;display:grid}
.read .who button{background:none;border:0;min-height:32px;min-width:24px;place-items:center;color:var(--text-muted);padding:0 2px;display:grid}
.read .who .nm{color:var(--text);font:inherit}
.read .who .nm:hover{text-decoration:underline;text-underline-offset:3px}
.pinbar svg.shape,.read svg.shape{width:12px;height:12px;fill:var(--mark-pinned)}

/* 여백 = 회사 주석 */
/* 머리(자리 줄)와 바닥은 고정이고 그 사이 지표 표만 스크롤한다 */
.margin{background:var(--margin-bg);border-left:1px solid var(--rule-soft);min-width:0;display:flex;flex-direction:column;overflow:hidden}
.cotop{flex:none;padding:var(--space-5) var(--space-5) var(--space-2)}
.plrow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-1)}
.mtab{flex:1;min-height:0;overflow:auto;padding:0 var(--space-4);border-top:1px solid var(--rule)}
.mtab>.cometa{margin:var(--space-4) var(--space-2)}
.cofoot{flex:none;border-top:1px solid var(--rule);padding:var(--space-3) var(--space-5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.mt{font-size:var(--text-xs)}
.mt th,.mt td{height:32px;padding:2px 6px;background:none;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
.mt thead th{position:sticky;top:0;z-index:1;background:var(--margin-bg);border-bottom:1px solid var(--rule);color:var(--text-muted);font-weight:400}
.mt th[scope="row"]{white-space:normal;font-weight:400;border-left:2px solid transparent}
.mt tr[aria-current="true"] th[scope="row"]{border-left-color:var(--text);font-weight:500}
.mt .vrows th,.mt .vrows td.num{font-weight:500}
.mt .vrows small{color:var(--text-muted);font-size:inherit;font-weight:400}
.mt .grp th{text-align:left;font-weight:500;padding-top:var(--space-3);border-bottom:1px solid var(--rule)}
.mt tbody tr{cursor:default}
.mt tbody tr:hover{background:none}
.mt tr[data-metric-row="list"]:not([aria-disabled]):not([data-pick="off"]){cursor:pointer}
.mt tr[data-metric-row="list"]:not([aria-disabled]):not([data-pick="off"]):hover{background:var(--surface-hover)}
.mt tr[draggable="true"]{cursor:grab}
.ctl[data-drop="on"]{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.mrow{background:none;border:0;padding:0;min-height:28px;font:inherit;color:var(--text);text-align:left;cursor:inherit}
.mrow[aria-disabled="true"]{color:var(--text-muted)}
.hn{background:none;border:0;height:28px;padding:0 var(--space-2);font:400 var(--text-xs) var(--font-body);color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}
.mt .bd{text-align:right;color:var(--text-muted)}
.bd svg{display:block;margin-left:auto}
.band .bax{stroke:var(--mark-market-line);stroke-width:1}
.band .biqr{fill:var(--mark-market)}
.band .bmed{stroke:var(--mark-pinned);stroke-width:1.5}
.band .bdot{fill:var(--mark-company-on-margin);stroke:var(--margin-bg);stroke-width:1}
.band .bdot.out{fill:var(--margin-bg);stroke:var(--mark-company-on-margin);stroke-width:1.2;stroke-dasharray:2 1.6}
.band .btri{fill:var(--mark-company-on-margin)}
.bandph{display:block;margin-left:auto;width:72px;height:14px;background:var(--surface-hover)}
/* 칸 안 추세(D-261112 · 1번 재무 전체): 자리 띠와 같은 크기·색 — 선·막대는 시장 색, 가장 최근 칸의 점·막대만 회사 색. 칸이 좁으면 비율을 지킨 채 줄어든다. */
.sk{text-align:right}
.spark{display:block;margin-left:auto;max-width:100%;height:auto}
.spark .sl{fill:none;stroke:var(--mark-market);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
.spark .sp{fill:var(--mark-market)}
.spark .sb{fill:var(--mark-market)}
.spark .sz{stroke:var(--mark-market-line);stroke-width:1}
.spark .son{fill:var(--mark-company-on-margin)}
.stt th.skh{text-align:right}

.margin .empty{margin:var(--space-5) var(--space-5) 0;overflow:auto}
.margin .empty p:first-child{font:400 var(--text-sm)/1.5 var(--font-body);margin:0 0 var(--space-5);text-wrap:balance}
/* 회사를 고르기 전: 안내는 작게, 자리는 지금 유니버스 요약이 채운다 */
.usum h2{font:500 var(--text-md)/1.3 var(--font-body);margin:0 0 var(--space-2)}
.usum h2 b{font-weight:500}
.usum .mt{width:100%}
.usum .mt td{text-align:right}
.margin .empty p{color:var(--text-muted);margin:0}
.cohead{display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start}
.cohead h2{font:500 var(--text-2xl)/1.2 var(--font-display);letter-spacing:-.01em;margin:0}
.cometa{color:var(--text-muted);font-size:var(--text-sm);margin:4px 0 0}
.coact{display:flex;gap:var(--space-1);flex:none}
.cohead>div:first-child{min-width:0;flex:1 1 auto}
.cohead h2{overflow-wrap:anywhere;word-break:keep-all}
.coact #fullb{flex:none} /* F1·F2: 「재무 전체 펼치기」는 머리의 고정·닫기 앞(펼친 머리의 「← 보기」와 같은 패널 위 줄) */
/* F4: 같은 업종·테마로 바꾼 뒤 안내 한 줄(머리 아래) — 문장 · 「되돌리기」 */
.jnote{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--text)}
.jnote .btn{text-decoration:underline;text-underline-offset:3px}
.iconbtn{width:32px;height:32px;display:grid;place-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-1);color:var(--text-muted)}
.iconbtn:hover{background:var(--surface-hover);color:var(--text)}
.iconbtn[aria-pressed="true"]{color:var(--text);border-color:var(--control-border)}
.place{font:500 var(--text-md)/1.4 var(--font-body);margin:0}
.jump{display:flex;flex-direction:column;align-items:flex-start}
.jump button{background:none;border:0;min-height:32px;padding:0;display:flex;align-items:center;gap:6px;color:var(--text);font-size:var(--text-sm);text-align:left}
.jump button:hover{text-decoration:underline;text-underline-offset:3px}
/* §51-22: 테마는 본체 한 줄(이름 · 단계 단추 · 근거 한 줄) · 많으면 판 안에서 스크롤 */
.pop.jump{max-height:min(60vh,420px);align-items:stretch}
.jump .jt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 var(--space-3);border-top:1px solid var(--rule-soft);padding-top:var(--space-1)}
.jump .jst{display:flex;gap:var(--space-3)}
.jump .jb{grid-column:1/-1;margin:0;color:var(--text-muted);font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jump .jhint{margin:0 0 var(--space-2);color:var(--text-muted);font-size:var(--text-xs)} /* F4: 판 맨 위 한 줄(무엇이 바뀌는지) */
/* F5: 자리 「기준」 판 — 띠 예시 한 줄(아래에 작은 값 · 큰 값)과 부분별 풀이(그림 조각 + 한 문장) */
#placepop .pex{display:inline-flex;flex-direction:column;gap:2px;margin:0 0 var(--space-2)}
#placepop .pexl{display:flex;justify-content:space-between;padding:0 4px;color:var(--text-muted);font-size:var(--text-xs)}
#placepop .pkey{list-style:none;margin:0 0 var(--space-3);padding:0;display:grid;gap:var(--space-1)}
#placepop .pkey li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--space-2);align-items:start}
#placepop .pkey svg{margin-top:3px}
#placepop .nb{white-space:nowrap}
.badge{font-size:var(--text-xs);border:1px solid var(--border-strong);padding:1px 6px;border-radius:var(--radius-1);margin-left:6px;vertical-align:2px;color:var(--text-muted);font-family:var(--font-body);font-weight:400;letter-spacing:0;white-space:nowrap}
.home h3{margin-top:var(--space-6)}
.home ul{list-style:none;padding:0;margin:0}
.home li button{width:100%;display:flex;justify-content:space-between;gap:var(--space-3);background:none;border:0;border-bottom:1px solid var(--rule-soft);padding:9px 0;text-align:left}
.home li button:hover{background:var(--surface-hover)}
.home li span:last-child{color:var(--text-muted);font:400 var(--text-sm) var(--font-num);white-space:nowrap}

/* 지시선 */
.leader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.leader path{fill:none;stroke:var(--leader-line);stroke-width:1.5}
.leader path.draw{stroke-dasharray:var(--len);animation:draw var(--dur-2) var(--ease) backwards}
.leader circle{fill:var(--margin-bg);stroke:var(--leader-line);stroke-width:1.5}
@keyframes draw{from{stroke-dashoffset:var(--len)}}
.sub{display:inline-flex;gap:var(--space-3)} /* 보기 전환은 그림 제목 바로 뒤 */
.sub button{background:none;border:0;border-bottom:2px solid transparent;height:32px;padding:0 1px;color:var(--text-muted);font-size:var(--text-sm)}
.sub button:hover{border-bottom-color:var(--border-strong)}
.sub button[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--text);font-weight:500}
.box{fill:none;stroke:var(--mark-market);stroke-width:1.5}
.whisk{stroke:var(--mark-market);stroke-width:1}
.medl{stroke:var(--mark-pinned);stroke-width:2}
.hit{fill:transparent;cursor:default}
.hit:hover,.hit:focus{fill:var(--surface-hover);outline:0}
.flow{fill:none;stroke:var(--mark-market-line);stroke-width:1.5}
.flow.mine{stroke:var(--mark-company);stroke-width:2}
.full{position:absolute;inset:0;background:var(--background);z-index:5;overflow:auto;padding:var(--space-5)}
.full[hidden]{display:none}
.fullhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-3) var(--space-5);margin-bottom:var(--space-4)}
.fullhead h2{font:500 var(--text-2xl)/1.2 var(--font-display);letter-spacing:-.01em;margin:0}
.fulltools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);font-size:var(--text-sm);color:var(--text-muted)}
.fin{min-width:0;overflow-x:auto}
.fin th:first-child,.fin td:first-child{position:sticky;left:0;background:var(--background);min-width:150px;white-space:nowrap}
.fin thead th:first-child{background:var(--surface)}
.fin tr.grp td{font-weight:500;background:var(--background);border-bottom:1px solid var(--rule);padding-top:var(--space-4);cursor:default}
.fin tbody tr{cursor:default}
.fin td button{background:none;border:0;padding:0;font:inherit;color:inherit;border-bottom:1px solid transparent}
.fin td button:hover{border-bottom-color:var(--control-border)}
.fin td.na{color:var(--text-muted)}
.fin td.ind{padding-left:var(--space-5)}
.fin svg.shape{width:12px;height:12px;fill:var(--mark-pinned);margin-right:6px;vertical-align:-1px}
dialog{border:1px solid var(--rule);border-radius:var(--radius-0);background:var(--background);color:var(--text);padding:var(--space-5);max-width:min(480px,92vw)}
dialog::backdrop{background:var(--background);opacity:.6}
dialog h2{font-size:var(--text-md);font-weight:500;margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--rule)}
dialog dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-4);margin:0 0 var(--space-4);font-size:var(--text-sm)}
dialog dt{color:var(--text-muted)}dialog dd{margin:0}
dialog .acts{display:flex;justify-content:flex-end;gap:var(--space-2)}
.scrim{display:none}

/* 유니버스 편집(E 묶음): 칩 = 고치기 단추 + ✕ · 바의 괘선 · 칩 팝업 · 「+ 조건」 전폭 판 · 숫자 줄 · 지표 목록 · 테마 트리 · 프리셋 · 스위치 */
.chip .cm{width:auto;border:0;display:inline-flex;align-items:center;height:100%;padding:0;background:none;color:inherit}
.chip .cm:hover,.chip .cm[aria-expanded="true"]{background:var(--surface-hover)}
.chip .cm .lab{padding:0 var(--space-2) 0 var(--space-3)}
#addcond,.utools #undo,.utools #reset{flex:none}
.urule{flex:none;width:1px;height:32px;background:var(--rule)}
.utools [aria-disabled="true"]{color:var(--text-muted);cursor:default}
.utools [aria-disabled="true"]:hover{background:none}
.ubar.editing #chips,.ubar.editing #hlbar,.ubar.editing #chipmore{color:var(--text-muted)}
.ucount .zbtn{height:20px;padding:0 var(--space-1);font-size:var(--text-xs);vertical-align:baseline}
.ucount #usub.zero{display:flex;align-items:center;gap:var(--space-1)}
.ucount #usub.zero [data-zero-hint]{display:contents}
.ucount #usub.zero .zt,.ucount #usub.zero .zr{width:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucount #usub.zero .zt{flex:0 1 auto}
.ucount #usub.zero .zr{flex:1 1 0}
.ucount #usub.zero .zbtn{flex:none}
.ucount #usub.zero .zn{flex:none;white-space:nowrap} /* 주소에서 버린 조건의 알림 — 말줄임 앞에 늘 보인다(대조 #3 · #17) */
.cpop,.cpanel{position:absolute;z-index:35;background:var(--background);color:var(--text);border:1px solid var(--rule);font-size:var(--text-sm)}
.cpop[hidden],.cpanel[hidden]{display:none}
.cpop{width:min(440px,calc(100vw - 16px));max-height:min(70vh,520px);overflow:auto;padding:var(--space-2) var(--space-4) var(--space-3)}
.cpop>p{margin:var(--space-2) 0}
.cpanel{top:100%;left:0;right:0;border-left:0;border-right:0;max-height:min(72vh,640px);display:flex;flex-direction:column}
.ptabs{flex:none;display:flex;gap:var(--space-5);padding:0 var(--space-5);border-bottom:1px solid var(--rule-soft)}
.ptabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;height:40px;color:var(--text-muted)}
.ptabs button:hover{color:var(--text)}
.ptabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--text);font-weight:500}
.pbody{flex:1;min-height:0;overflow:auto;padding:var(--space-3) var(--space-5);position:relative}
.pfoot{flex:none;display:flex;align-items:center;gap:var(--space-5);min-height:56px;padding:var(--space-2) var(--space-5);border-top:1px solid var(--rule);background:var(--surface)}
.pfoot .dcount{margin-left:auto;font-size:var(--text-base)}
.pfoot .dcount b{font:500 var(--text-md)/1.2 var(--font-num)}
.pfoot .dcount span{color:var(--text-muted);font-size:var(--text-sm)}
.pacts{display:flex;gap:var(--space-3)}
/* 「적용」은 바뀐 초안이 없을 때도 주 단추 모양(옅게)으로 남아 판의 주된 동작임을 보인다 */
.pfoot .btn.primary[aria-disabled="true"],.pfoot .btn.primary[aria-disabled="true"]:hover{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--accent-on-solid);opacity:.45}
/* 「+ 조건」 판이 열린 동안 아래 지면을 옅게 어둡게 해 판을 앞으로 띄운다 — 눌림은 그대로 지면으로 간다(바깥 누름 동작 불변) */
@media (width >= 760px){
  .ubar.editing~.page::after{content:"";position:absolute;inset:0;z-index:30;background:var(--shell-bg);opacity:.28;pointer-events:none}
}
.prow{display:flex;align-items:center;gap:var(--space-4);min-height:40px;border-bottom:1px solid var(--rule-soft)}
.prow.tall{align-items:flex-start;padding-top:var(--space-2);border-bottom:0}
.prow .pl{flex:none;width:3em;color:var(--text-muted)}
.prow .tbox{flex:1;min-width:0}
.fld{background:transparent;border:0;border-bottom:1px solid var(--control-border);border-radius:var(--radius-0);height:32px;padding:0 2px;color:var(--text);min-width:0;max-width:100%}
.fld:hover{border-bottom-color:var(--text)}
.fld.num{width:6em;text-align:right}
.fld.wide{width:22em}
.fld[aria-invalid="true"]{border-bottom-color:var(--text-negative)}
select.fld option{background:var(--background);color:var(--text)}
.nrow{padding:var(--space-2) 0;border-bottom:1px solid var(--rule-soft)}
.cpop .nrow{border-bottom:0}
.nr1,.nr2{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;min-height:36px}
.nr2 .u{color:var(--text-muted);white-space:nowrap}
.nr3{font-size:var(--text-xs);color:var(--text-muted);min-height:4px}
.nr3:empty{display:none}
.mbtn{background:none;border:0;border-bottom:1px solid var(--control-border);height:32px;padding:0 2px;display:inline-flex;align-items:center;gap:6px;min-width:9em;justify-content:space-between;font-weight:500}
.mbtn.ph{color:var(--text-muted);font-weight:400}
.mbtn svg.ic{width:12px;height:12px;color:var(--text-muted)}
.xk{margin-left:auto;background:none;border:0;width:28px;height:32px;display:inline-grid;place-items:center;color:var(--text-muted)}
.xk:hover{color:var(--text)}
.mlist{position:absolute;z-index:45;width:min(340px,calc(100vw - 32px));max-height:300px;overflow:auto;background:var(--background);border:1px solid var(--rule)}
.mlist .gh{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--rule-soft);padding:2px var(--space-3);font-size:var(--text-xs);color:var(--text-muted);font-weight:500}
.mlist .mr{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:32px;background:none;border:0;border-left:2px solid transparent;text-align:left;padding:0 var(--space-3) 0 10px}
.mlist .mr:hover{background:var(--surface-hover)}
.mlist .mr[aria-selected="true"]{border-left-color:var(--text);font-weight:500}
.mlist .mn{flex:1;min-width:0}
.mlist .mc{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap;font-weight:400}
.mlist .mc.few{color:var(--text)}
#themeq{width:100%;margin-bottom:var(--space-1)}
.ttree{max-height:320px;overflow-y:auto;border-top:1px solid var(--rule-soft)}
.cpop .ttree{max-height:300px}
.ri{display:flex;align-items:flex-start;min-height:32px}
.ri:hover{background:var(--surface-hover)}
.ri .nmx{flex:1;min-width:0;background:none;border:0;text-align:left;min-height:32px;padding:5px 6px;line-height:1.35;overflow-wrap:anywhere}
.ri.big .nmx{font-weight:500}
.ri.big .nmx::before{content:"+";display:inline-block;width:12px;color:var(--text-muted);font-family:var(--font-num)}
.ri.big.open .nmx::before{content:"−"}
.ri.th .nmx{padding-left:calc(var(--space-4) + 6px)}
.ri.th{border-left:2px solid transparent}
.ri.th.sel{border-left-color:var(--text)}
.ri.th.sel .nmx{font-weight:500}
.ri .cn{flex:none;font-size:var(--text-xs);color:var(--text-muted);padding:8px 6px 0 0}
.ri .all{flex:none;background:none;border:0;border-bottom:2px solid transparent;height:32px;padding:0 6px;font-size:var(--text-xs);color:var(--text-muted)}
.ri .all:hover{color:var(--text);border-bottom-color:var(--border-strong)}
.ri .all[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--text);font-weight:500}
/* 테마 3단(§32-8): 중분류 줄은 대분류처럼 펼침 표식을 달고 한 칸 들인다. 그 아래 테마는 두 칸. 고른 본체의 단계 세 칸과 고지. */
.ri.mid .nmx{padding-left:calc(var(--space-4) + 6px)}
.ri.mid .nmx::before{content:"+";display:inline-block;width:12px;color:var(--text-muted);font-family:var(--font-num)}
.ri.mid.open .nmx::before{content:"−"}
.ri.th.l3 .nmx{padding-left:calc(var(--space-4) * 2 + 6px)}
.ri .stg{flex:none;gap:var(--space-2);padding-right:6px;font-size:var(--text-xs)}
.ri .stg button[disabled]{opacity:.4;cursor:default}
.ttree .snote{margin:0;padding:0 6px var(--space-2) calc(var(--space-4) * 2 + 6px);font-size:var(--text-xs);color:var(--text-muted)}
.ttree .mt{font-weight:700}
.ttree .emp{margin:0;padding:var(--space-3);color:var(--text-muted)}
.plist .pre{display:flex;align-items:baseline;gap:var(--space-3);width:100%;background:none;border:0;border-bottom:1px solid var(--rule-soft);text-align:left;padding:6px 0;min-height:36px}
.plist .pre:hover{background:var(--surface-hover)}
.plist .pre .pn{flex:1;min-width:0}
.plist .pre[aria-disabled="true"]{color:var(--text-muted);cursor:default}
.plist .pre[aria-disabled="true"]:hover{background:none}
.plist .pre .why{font-size:var(--text-xs);white-space:nowrap}
.sw{display:inline-flex;align-items:center;gap:var(--space-2);background:none;border:0;height:32px;padding:0;color:var(--text)}
.sw .knob{position:relative;width:28px;height:16px;border:1px solid var(--control-border);background:var(--background)}
.sw .knob::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--text-muted);transition:left var(--dur-1) var(--ease)}
.sw[aria-checked="true"] .knob{border-color:var(--text)}
.sw[aria-checked="true"] .knob::after{left:14px;background:var(--text)}
.vhead .axis .mid{font-style:normal}
/* 다년 추세(E 둘째): 적용 안 된 칩은 점선 · 0인 해 칸은 흐리게 · 줄 오류(§29-6)는 --error-9 밑줄 */
.chip[data-cond-off="season"],.chip[data-cond-off="range"]{border-style:dashed}
.nr2 .tg{display:inline-flex;align-items:center;gap:var(--space-2)}
.nr2 .tg.dim{opacity:.45}
.fld.num.sm{width:3.2em}
.nrow[data-invalid] .fld,.nrow[data-invalid] .mbtn{border-bottom-color:var(--error-9)}
.nr3 [data-trend-note]{color:var(--text)}

@media (max-width:1099px){
  .page{grid-template-columns:minmax(0,1fr);overflow:clip}
  .margin{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);border-left:1px solid var(--rule);z-index:4;transform:translateX(100%);transition:transform var(--dur-3) var(--ease)}
  .page.open .margin{transform:none}
  .utools .lab{display:none}
  /* 좁은 두 칸(760~1099px): 바 한 줄에 다 들어가도록 여백과 이름 칸을 줄인다 */
  .ubar{padding:0 var(--space-4);gap:var(--space-2)}
  .urest{gap:var(--space-2)}
  .uid{max-width:20%}
  #hlbar{padding:0 var(--space-2);gap:var(--space-2)}
  #hlbar input{width:3em}
  .leader{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}}

/* 검색 결과 */
.qres{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;list-style:none;margin:0;padding:0;background:var(--background);color:var(--text);border:1px solid var(--rule)}
.qres[hidden]{display:none}
.qres li{display:flex;justify-content:space-between;gap:var(--space-3);padding:8px var(--space-3);border-bottom:1px solid var(--rule-soft);cursor:pointer;font-size:var(--text-sm)}
.qres li:last-child{border-bottom:0}
.qres li[aria-selected="true"]{background:var(--surface-hover)}
.qres li.none{color:var(--text-muted);cursor:default}
.qres small{color:var(--text-muted)}
/* §51-21: 묶음 머리(회사 · 업종 · 테마 — 누를 수 없음) · 회사 8 + 업종 5 + 테마 줄까지 길어지므로 목록 안에서 스크롤 */
.qres{max-height:min(70vh,560px);overflow-y:auto}
.qres li.qh{cursor:default;color:var(--text-muted);font-size:var(--text-xs);padding-top:var(--space-2);padding-bottom:var(--space-1)}

/* 보기 머리 줄: 지표 선택·로그 */
.soon{color:var(--text-muted);margin:var(--space-5) 0;max-width:52ch}
.vhead .axis .tog{font-weight:400;color:var(--text-muted);border-bottom-color:transparent}
.vhead .axis .tog[aria-pressed="true"]{color:var(--text);font-weight:500;border-bottom:2px solid var(--text)}

/* 그림 표식: 강조(먹색)·가장자리 반쪽·크기 없음·키보드 위치 */
.pt.hl:not(.sel){fill:var(--mark-pinned);fill-opacity:.9} /* 열린 회사는 강조여도 회사색 표식 그대로(§1 · Codex 재검증3 2 · bd768b5부터 있던 우선순위 문제) */
.pt.nosz{fill:none;fill-opacity:1;stroke:var(--mark-market);stroke-width:1.2}
.pt.hl.nosz:not(.sel){stroke:var(--mark-pinned)}
.pt.sel.nosz{fill:var(--mark-company);stroke:var(--background);stroke-width:2}
.cur{fill:none;stroke:var(--focus-ring);stroke-width:2;pointer-events:none}
.hlbar{fill:var(--mark-pinned);pointer-events:none}
.medp{fill:var(--mark-pinned);stroke:var(--background);stroke-width:2}
.plot .mineind{fill:var(--text);font-weight:600}
.plot .pin{cursor:pointer}
.ic.up{transform:scaleY(-1)}

/* 목록·고정 */
.tablewrap th{position:sticky;top:0;z-index:1}
.tablewrap td:first-child,.tablewrap th:first-child{min-width:9em} /* 긴 이름이 한 글자 폭으로 눌리지 않게: 좁으면 표 안에서 가로로 민다 */
tbody tr.hl:not(.sel){box-shadow:inset 3px 0 0 var(--mark-pinned)}
td svg.shape{width:12px;height:12px;fill:var(--mark-pinned);margin-right:6px;vertical-align:-1px}
td.ind,th.ind{text-align:left;color:var(--text-muted);white-space:normal;max-width:14em}
/* 목록은 한 행 한 줄(2026-11-12 · 대시보드 밀도): 이름·업종은 말줄임하고 전체 글자는 title(업종 머리 9em 말줄임과 같은 규칙) */
.lst td:first-child,.lst td.ind{white-space:nowrap}
.lst .rowopen,.lst td.ind span{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.lst .rowopen{max-width:12em}
.lst .rowopen,.lst td:first-child small{vertical-align:middle} /* 모바일 누름 높이 44px에서도 코드가 이름 옆 가운데에 선다 */
.lst td.ind span{max-width:9em}
/* 재무 전체를 펼쳐 목록 칸이 좁아지면 이름·업종을 더 줄여 첫 값 열(정렬 열)이 보이게 한다 */
.tablewrap:has(>table.lst){container-type:inline-size}
@container (max-width:520px){.lst .rowopen{max-width:8em}.lst td.ind span{max-width:5em}}
.more{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;font-size:var(--text-xs);color:var(--text-muted)}
.pinbar .nm{background:none;border:0;padding:0;color:var(--text);font:inherit}
.pinbar .nm:hover{text-decoration:underline;text-underline-offset:3px}

/* 게이트 계약으로 더한 부분: 점 이름·값 없는 회사 목록·행 열기 버튼·강조 오류·상자 끝 눈금·기간 점 */
.plot .ptlbl{fill:var(--text);font-family:var(--font-body)}
.misslist{list-style:none;margin:var(--space-1) 0 0;padding:0;font-size:var(--text-xs)}
.misslist[hidden]{display:none}
.rowopen{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.rowopen:hover{text-decoration:underline;text-underline-offset:3px}
.iqrcap{stroke:var(--mark-market);stroke-width:1.5}

/* 유니버스 밖 회사(게이트 확정 13): 점선 테두리 + 실선 십자는 강조색, 고정한 회사는 모양 유지·점선 테두리·바탕색 채움, 지시선은 점선, 목록은 표 아래 별도 줄 */
.outmark{cursor:pointer}
.outmark:focus-visible{outline-offset:2px;outline:2px solid var(--focus-ring)}
.outmark .ring{fill:var(--background);fill-opacity:.8;stroke:var(--mark-company);stroke-width:1.5;stroke-dasharray:3.2 2.45}
.outmark .crs{fill:none;stroke:var(--mark-company);stroke-width:2}
.plot .outlbl{fill:var(--text);font-family:var(--font-body)}
.pin.out{fill:var(--background);stroke:var(--mark-pinned);stroke-width:1.5;stroke-dasharray:2.5 2}
.cm.out{stroke-dasharray:3 3}
.leader path[data-outside]{stroke-dasharray:5 4}
.outrows .outhead th{position:static;text-align:left;font-weight:500;background:var(--surface);border-top:1px solid var(--rule)}
.outrows .outhead th span{font-weight:400;color:var(--text-muted);margin-left:var(--space-2)}

/* C 묶음 뒤 반: 범위 밖 삼각 · 고정 ∩ 강조 고리 · 고정 회사 이름 라벨과 연결선 · 농도 5단 · 끌기 */
.plot svg{user-select:none;-webkit-user-select:none}
.rtri{fill:var(--mark-market);stroke:none}
.pt.hl:not(.sel) .rtri,.pt.pinned .rtri,.rtri.pinned{fill:var(--mark-pinned)}
.pt.sel .rtri,.outmark .rtri,.rtri.open{fill:var(--mark-company);fill-opacity:1}
use.pt.sel{cursor:pointer}
.hlring{fill:none;stroke:var(--mark-pinned);stroke-width:1.5;pointer-events:none}
/* 산점도 강조(F10): 강조 점의 채움은 다른 점과 같고(농도가 켜지면 그 단 — 인라인 fill-opacity) 고리(.hlring)가 강조를 맡는다. 머리 줄 범례 「○ 강조: 조건 · n곳」. */
.pt.hl.hlr:not(.sel){fill:var(--mark-market);fill-opacity:.72}
.pt.hl.hlr.nosz:not(.sel){fill:none;stroke:var(--mark-market)}
.pt.hl.hlr:not(.sel) .rtri{fill:var(--mark-market)}
.hleg{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--text);white-space:nowrap;vertical-align:middle;margin-left:var(--space-2)}
.hleg .hdot circle{fill:none;stroke:var(--mark-pinned);stroke-width:1.5}
/* 크기 범례(F8): 작은 원·큰 원은 그림의 점과 같은 반지름 · 값 · 척도 이름 */
.sleg{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;white-space:nowrap;margin-left:var(--space-1)}
.sleg .sdot circle{fill:var(--mark-market);fill-opacity:.72}
.sleg .num{font-size:var(--text-xs);color:var(--text);margin-right:var(--space-1)}
.sleg .sk{font-size:var(--text-xs);color:var(--text-muted)}
/* 축 「눈금」 선택기(F11) */
.vhead .axis .scl{color:var(--text-muted);margin-left:var(--space-1)}
/* 지시선이 없을 때 열린 회사의 이름 라벨(F3) */
.oplbl .plbg{fill:var(--background)}
.plot .oplbl text{fill:var(--text);font-family:var(--font-body);font-weight:600}
/* 연결선은 1px 괘선색 직선이고 모든 라벨 상자보다 아래 층이다. 라벨 배경은 불투명 바탕색이라 밑을 지나는 선을 가린다. 지시선(강조색 1.5px·끝 원)과 섞이지 않는다. */
.lconn{stroke:var(--rule);stroke-width:1;pointer-events:none}
.pinlbl{cursor:pointer}
.pinlbl .plbg,.plot .outbg{fill:var(--background)}
.pinlbl .pls{fill:var(--mark-pinned)}
.plot .pinlbl text{fill:var(--text);font-family:var(--font-body)}
/* 농도: 켰을 때만 모든 일반 점에 0.75px 본문색 테두리(옅은 점의 바탕 대비를 테두리가 맡는다). 값 없음은 채움 없이 테두리만. */
.pt.dn,.pt.dn .rtri{stroke:var(--text);stroke-width:.75}
.pt.dn.dmiss:not(.sel),.pt.dn.dmiss:not(.sel) .rtri{fill:none} /* 강조 채움 규칙(.pt.hl.hlr:not(.sel))보다 뒤·같은 무게로 — 농도 값 없음은 강조여도 속 빔 */
.dleg{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;white-space:nowrap;position:relative}
.dleg .dtip{display:none;position:absolute;top:100%;left:0;z-index:20;background:var(--background);color:var(--text);border:1px solid var(--rule);padding:var(--space-1) var(--space-2);font-size:var(--text-xs);white-space:normal;width:max-content;max-width:min(360px,calc(100vw - 32px))}
.dleg:focus .dtip,.dleg:hover .dtip{display:grid;grid-template-columns:auto auto auto;column-gap:var(--space-3);row-gap:2px;align-items:center}
.dleg .dtip>span{white-space:nowrap;font-variant-numeric:tabular-nums}
.dleg .dtip .dth{color:var(--text-muted)}
.dleg .dtip .dcnt{text-align:right}
.dleg .dtip .dall{grid-column:1/-1;color:var(--text-muted);margin-top:var(--space-1)}
.dleg .dsw{display:inline-block;width:14px;height:10px;border:.75px solid var(--text);margin-right:var(--space-1);vertical-align:middle;position:relative}
.dleg .dsw::before{content:"";position:absolute;inset:0;background:var(--mark-market);opacity:var(--o)}
.dleg[data-tip-off] .dtip{display:none}
.axis.pop .dleg{flex-wrap:wrap;white-space:normal}
.axis.pop .dleg .dtip{position:static;flex-basis:100%;width:auto;max-width:none;margin-top:var(--space-1)}
.dleg .dend{font-size:var(--text-xs);color:var(--text-muted);margin:0 var(--space-1)}
.dleg i{display:inline-block;width:14px;height:10px;border:.75px solid var(--text)}
.dleg i::before{content:"";display:block;width:100%;height:100%;background:var(--mark-market);opacity:var(--o)}
.dleg i.none::before{display:none}
.brush{fill:var(--mark-market);fill-opacity:.12;stroke:var(--text);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.brushmenu{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:stretch;background:var(--background);border:1px solid var(--rule);padding:var(--space-1);font-size:var(--text-sm)}
.brushmenu button{background:none;border:0;min-height:32px;padding:0 var(--space-3);text-align:left;white-space:nowrap}
.brushmenu button:hover{background:var(--surface-hover)}
.brushmenu button[aria-disabled="true"]{color:var(--text-muted);cursor:not-allowed}
.brushmenu button[aria-disabled="true"]:hover{background:none}
/* 목록: 유니버스 밖 회사의 별도 줄은 표 아래 끝에 붙어 늘 보인다(스크롤 밖으로 나가 지시선이 사라지지 않게). */
.outrows{position:sticky;bottom:0;z-index:1}
.outrows tr{background:var(--background)}
.outrows tr:hover{background:var(--surface-hover)}
.outrows tr.sel{background:var(--accent-bg-subtle)}

/* D 묶음 앞 반 — 분포 › 기간별 추이(명세 §24). 보기 루트는 캔버스([data-view="trend"])이고 그림 아래 값 줄·표까지 캔버스 하나가 스크롤한다. */
.canvas[data-view="trend"]>#stage{flex:none!important;height:clamp(320px,46vh,440px)}
/* 새로 받는 동안: 앞 그림·값 줄·표는 앞 기준의 것이다 — 흐리게 두고 누를 수 없다. */
.canvas[data-view="trend"][aria-busy="true"] .plot,.canvas[data-view="trend"][aria-busy="true"]>.read,.canvas[data-view="trend"][aria-busy="true"]>.trendtbl{opacity:.4;pointer-events:none}
.vhead .axis .pm .tog{margin-left:var(--space-2)}
.pcol{fill:transparent}
[data-period-col][data-cur] .pcol{fill:var(--surface-hover)}
/* 상자는 회사 선보다 뒤로 물러난다: 채움은 옅게, 윤곽·수염은 1px. 중앙값만 굵다. */
.tbox{fill:var(--surface);stroke:var(--mark-market-line);stroke-width:1}
.tw{stroke:var(--mark-market-line);stroke-width:1}
.tmed{stroke:var(--mark-market-line);stroke-width:2}
.tdot{fill:var(--mark-market);fill-opacity:.72;cursor:pointer}
.tline{fill:none;stroke-linejoin:round;stroke-linecap:round;cursor:pointer}
.tline.open{stroke:var(--mark-company);stroke-width:2}
.tline.pinl{stroke:var(--mark-pinned);stroke-width:1.5}
.tline.out{stroke-dasharray:4 3}
.tlone.open,.tedge.open{fill:var(--mark-company)}
.tlone.pinl,.tedge.pinl{fill:var(--mark-pinned)}
.pt.sel.out{fill:var(--background);stroke:var(--mark-company);stroke-width:1.5;stroke-dasharray:2.5 2}
.endlbl{cursor:pointer}
.endlbl .plbg{fill:var(--background)}
.endlbl .pls{fill:var(--mark-pinned)}
.endlbl .els{fill:var(--mark-company)}
.plot .endlbl text{fill:var(--text);font-family:var(--font-body)}
.rsum{position:absolute;top:0;margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0 var(--space-3);font-size:var(--text-xs);color:var(--text-muted)}
.rsum span{display:inline-flex;align-items:center;gap:4px;color:var(--text)}
.rsum span:first-child{color:var(--text-muted)}
.plot .rsum svg.shape{position:static;width:10px;height:10px;fill:var(--mark-pinned)} /* .plot svg(그림 판)의 전면 배치를 받지 않는다 */
.rsum .odot{width:8px;height:8px;border-radius:50%;background:var(--mark-company)}
/* 추이·흐름의 커서 옆 값 상자(F6): 그림 안에서 기간 열 오른쪽(넘치면 왼쪽)에 뜬다. 누르지 않는다(그림의 마우스 이동을 가리지 않게). */
.hbox{position:absolute;z-index:5;pointer-events:none;background:var(--background);color:var(--text);border:1px solid var(--rule);padding:6px 8px;font-size:var(--text-sm);line-height:1.4;max-width:min(340px,calc(100% - 4px))}
.hbox[hidden]{display:none}
.hbox{overflow:hidden;box-sizing:border-box}
.hbox[data-clipped]{-webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}
.hbox .hbp{display:block;font-weight:600;margin-bottom:2px}
.hbox .hbg{display:grid;grid-template-columns:auto auto;column-gap:var(--space-3);row-gap:1px;align-items:center}
.hbox .hbg.h3{grid-template-columns:auto auto auto}
.hbox .hbn{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14em}
.hbox .hbn .hbt{min-width:0;overflow:hidden;text-overflow:ellipsis} /* 긴 업종 이름은 줄임표로 끝내고 값 칸에 닿지 않는다(전체 이름은 아래 값 줄·표에 있다) */
.hbox .hbn.own,.hbox .hbn.hbm,.hbox .hbn.co{font-weight:600}
.hbox .hbv,.hbox .hbc{text-align:right;white-space:nowrap}
.hbox .hbc{color:var(--text-muted)}
.plot .hbox svg.shape{position:static;width:10px;height:10px;flex:none;fill:var(--mark-pinned)} /* .plot svg(그림 판)의 전면 배치를 받지 않는다 */
.hbox .odot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--mark-company)}
.read .per{background:none;border:0;padding:0;min-height:32px;color:var(--text);font-weight:500}
.read .per:hover{text-decoration:underline;text-underline-offset:3px}
.read .totable{margin-left:auto}
/* 표는 자기 칸 안에서만 민다(§24-13 1): 캔버스·화면에 가로 스크롤을 만들지 않고, 머리 행은 위에 · 첫 열(기간)은 왼쪽에 붙는다. 칸은 그림·값 줄 아래 남은 높이를 채운다. */
.trendtbl{flex:1 1 auto;min-height:160px;min-width:0;max-width:100%;overflow:auto;margin-top:var(--space-2)}
.trendtbl thead th{position:sticky;top:0;z-index:1}
.trendtbl thead th:first-child{left:0;z-index:2}
.trendtbl tbody tr{cursor:default}
.trendtbl tbody th{position:sticky;left:0;z-index:1;background:var(--background);font-weight:400;border-bottom:1px solid var(--rule-soft)}
.trendtbl th svg.shape{width:12px;height:12px;fill:var(--mark-pinned);margin-right:6px;vertical-align:-1px}
.trendtbl td[data-outside]{color:var(--text-muted)}
/* D 묶음 뒤 반 — 업종 › 업종의 흐름(§24-8): 선은 모두 시장색, 열린 회사의 업종은 굵기로만(옛 .flow.mine 강조색은 쓰지 않는다). 소표본 구간은 점선. */
.canvas[data-view="flow"]>#stage{flex:none!important;height:clamp(320px,46vh,440px)}
.canvas[data-view="flow"][aria-busy="true"] .plot,.canvas[data-view="flow"][aria-busy="true"]>.read,.canvas[data-view="flow"][aria-busy="true"]>.trendtbl{opacity:.4;pointer-events:none}
.tflow{fill:none;stroke:var(--mark-market-line);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.tflow.own{stroke-width:2.5}
.tflow.few{stroke-dasharray:4 3}
.flone,.fend{fill:var(--mark-market-line)}
.read b.own,.trendtbl th.own{font-weight:600}
.trendtbl th[data-sector]:not([data-stat]),.trendtbl thead th[data-code]{max-width:9em;overflow:hidden;text-overflow:ellipsis} /* 긴 업종·회사 이름은 머리에서 9em으로 줄이고 전체 이름은 title로 */

/* ── F 묶음: 내 수식 · 저장한 유니버스(명세 §36) ── */
.fed{position:fixed;z-index:60;background:var(--background);color:var(--text);border:1px solid var(--rule);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);max-height:calc(100vh - 16px);overflow:auto;display:flex;flex-direction:column;gap:var(--space-2)}
.fed[hidden]{display:none!important}
.fed .fh{margin:0;font-size:var(--text-md);font-weight:600}
.fed .frow{display:flex;align-items:center;gap:var(--space-2);color:var(--text-muted)}
.fed .frow .fld{color:var(--text)}
.fx{position:relative}
.fx .fexpr,.fx .fmirror{font:inherit;font-family:var(--font-num);font-size:var(--text-sm);line-height:1.5;padding:6px 8px;border:1px solid var(--control-border);border-radius:var(--radius-0);width:100%;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:break-word;margin:0}
.fx .fexpr{position:relative;z-index:1;background:transparent;color:var(--text);resize:vertical;min-height:4.5em;display:block}
.fx .fmirror{position:absolute;inset:0;color:transparent;border-color:transparent;overflow:hidden;pointer-events:none}
.fx .werr{text-decoration:underline wavy var(--error-9);text-decoration-skip-ink:none;text-underline-offset:3px}
.fac{position:absolute;z-index:2;left:0;top:100%;margin:2px 0 0;padding:0;list-style:none;min-width:14em;max-width:100%;background:var(--background);border:1px solid var(--rule)}
.fac[hidden]{display:none}
.fac li{padding:4px var(--space-3);cursor:pointer}
.fac li:hover,.fac li[aria-selected="true"]{background:var(--surface-hover)}
.ferr{margin:0;color:var(--error-11);min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fins{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}
.fins .fops{display:inline-flex;flex-wrap:wrap}
.fins .fops .btn{min-width:32px;justify-content:center;font-family:var(--font-num)}
.fprev{border-top:1px solid var(--rule-soft);padding-top:var(--space-2)}
.fprev p{margin:0 0 var(--space-2)}
.fprev .fex{display:inline-block;vertical-align:top;margin:0 var(--space-4) var(--space-2) 0}
.fprev .fexh{display:block;font-size:var(--text-xs);color:var(--text-muted)}
.fprev ol{margin:0;padding:0;list-style:none}
.fprev li{display:flex;gap:var(--space-2);justify-content:space-between}
.ffoot{display:flex;align-items:center;gap:var(--space-2)}
.ffoot .fmsg{flex:1;color:var(--error-11)}
.addq{position:relative;display:inline-block}
.addq input{width:13em}
.addq .mlist{top:calc(100% + 2px);left:0}
.addq .mlist .mr{cursor:pointer}
.addq .mlist .mr[aria-disabled="true"]{cursor:default;color:var(--text-muted)}
.addq .mlist .mnone{margin:0;padding:6px var(--space-3);color:var(--text-muted)}
.mlist .mnew{border-top:1px solid var(--rule-soft);color:var(--text-secondary)}
.btn.rcv{height:24px;padding:0 4px;color:var(--text-secondary)}
.rinfo{border-top:1px solid var(--rule-soft);margin-top:var(--space-2);padding-top:var(--space-2)}
.rinfo p,.recvp p{margin:0 0 var(--space-1)}
.rinfo .rx,.recvp .rx{font-family:var(--font-num);overflow-wrap:anywhere}
.rinfo .rmsg,.recvp .rmsg{color:var(--error-11)}
.savep .frow,.savep{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.savep .smsg{flex-basis:100%;margin:0}
.savedl{width:min(420px,calc(100vw - 16px))}
.savedl .sl{list-style:none;margin:0 0 var(--space-2);padding:0}
.savedl .sl li{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;border-bottom:1px solid var(--rule-soft);padding:2px 0}
.savedl .sn{flex:1;min-width:8em;overflow-wrap:anywhere}
.savedl .sd{color:var(--text-muted);font-size:var(--text-xs)}
.savedl .sa .btn{height:28px}
.savedl .slf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1)}
.savedl .slh{color:var(--text-muted);margin-right:var(--space-1)}
.savedl .smsg{color:var(--error-11);margin:0}
.savedl .rejl{margin:var(--space-1) 0 0;padding-left:1.2em}
.fillbar{stroke:var(--mark-market-line);stroke-width:2;stroke-dasharray:2 4}
/* ── G 묶음: 회사 펼침 · 나란히 비교(명세 §38 · §39) ── */
.margin .empty .nb{white-space:nowrap} /* 「그 회사가」는 한 덩이(P09) */
.btn.text[aria-disabled="true"],.btn.text[aria-disabled="true"]:hover{color:var(--text-muted);background:none;cursor:not-allowed}
@media (width >= 760px){
  /* 펼침 폭 =본문 폭 W의 min(0.70W, W−320) — 캔버스 320px 하한이 68~72%보다 앞선다(P01). 유니버스 바는 그대로다. */
  .page.fullon{grid-template-columns:minmax(0,1fr) min(70%,calc(100% - 320px))}
  .page.fullon .margin{position:relative;inset:auto;width:auto;height:auto;transform:none;transition:none;border-left:1px solid var(--rule)}
}
.fhd{flex:none;height:44px;display:flex;align-items:center;gap:var(--space-5);padding:0 var(--space-3) 0 var(--space-5);border-bottom:1px solid var(--rule)}
.fhd .fret{flex:none;margin-left:calc(-1 * var(--space-2))} /* 「← <돌아갈 보기 이름>」(§51-8) — 머리 왼쪽 끝 */
.abf{color:var(--text-muted);margin-left:2px} /* 비정상 범위 표지 ※(§51-3) */
.fhd h2{flex:0 1 auto;min-width:0;font:500 var(--text-lg)/1.2 var(--font-display);letter-spacing:-.01em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftabs,.stabs{display:flex;gap:var(--space-4)}
.ftabs{flex:1;align-self:stretch}
.ftabs button,.stabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--text-muted);white-space:nowrap;padding:0 1px}
.ftabs button{height:100%}
.ftabs button[aria-disabled="true"]{cursor:not-allowed}
.stabs{flex:none;padding:0 var(--space-5);border-bottom:1px solid var(--rule-soft)}
.stabs button{height:36px;margin-bottom:-1px;font-size:var(--text-sm)}
.ftabs button[aria-selected="true"],.stabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--text);font-weight:500}
.fbody{flex:1;min-height:0;display:flex;flex-direction:column}
.fbody>.cometa{margin:var(--space-4) var(--space-5)}
/* 표는 이 칸 안에서만 민다(두 겹 스크롤 없음): 머리 32px는 위에, 첫 열(항목 이름)은 왼쪽에 붙는다. 행 33px. */
.stw{flex:1;min-height:0;overflow:auto}
.stt{width:auto;min-width:100%;font-size:var(--text-xs)}
.stt th,.stt td{height:33px;padding:0 8px;background:var(--margin-bg);border-bottom:1px solid var(--rule-soft);white-space:nowrap}
.stt thead th{height:32px;position:sticky;top:0;z-index:2;color:var(--text-muted);font-weight:400;border-bottom:1px solid var(--rule)}
.stt thead tr+tr th{top:32px}
.stt th:first-child{position:sticky;left:0;z-index:1;text-align:left;min-width:180px;max-width:260px;white-space:normal;padding-left:var(--space-5)}
.stt thead th:first-child{z-index:3}
.stt .sgrp th,.stt .sgrp td{font-weight:500;border-bottom:1px solid var(--rule)}
.stt .sgrp th{white-space:nowrap}
.stt tbody tr,.stt tbody tr:hover{cursor:default;background:none}
.stt td.na,.stt td[data-loading]{color:var(--text-muted)}
.stt thead th.yr{text-align:center;border-left:1px solid var(--rule-soft)}
.stt th svg.shape,.ccos svg.shape{width:12px;height:12px;fill:var(--mark-pinned);vertical-align:-1px}
.stt th[data-fy] .num{margin-left:4px}
.sgh{background:none;border:0;padding:0;min-height:28px;font:inherit;font-weight:500;display:inline-flex;align-items:center;gap:4px;color:var(--text)}
.sgh[aria-expanded="false"] .ic{transform:rotate(-90deg)}
.cv{background:none;border:0;padding:0;min-height:24px;font:inherit;color:inherit}
.cv:hover{text-decoration:underline;text-underline-offset:3px}
/* R: 재작성 흔적 표지(값 뒤 위첨자 †)와 값 없는 칸의 「—」 단추(누르면 그 칸의 값 근거 판) — 칸의 글자·자리는 그대로 둔다 */
.rdag,.rmiss{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.rdag{color:var(--text-muted);padding-left:1px}
.rdag sup{font-size:.75em;line-height:0}
.rmiss:hover{text-decoration:underline;text-underline-offset:3px}
.odot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mark-company)}
/* 비교: 그림 둘(SVG 높이 240px) · 견주는 회사 줄 32px · 표. 받는 그림은 머리에 표식. */
.cchs{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);padding:var(--space-2) var(--space-5) 0}
.cchs[hidden]{display:none}
.cch{margin:0;min-width:0}
.cchh{background:none;border:0;border-bottom:2px solid transparent;height:28px;padding:0 1px;display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:500;color:var(--text-muted)}
.cch[data-receiving] .cchh{color:var(--text);border-bottom-color:var(--text)}
.rcv{font-size:var(--text-xs);font-weight:400;border:1px solid var(--border-strong);padding:0 4px;border-radius:var(--radius-1)}
.cplot{height:240px}
.cplot svg{display:block;overflow:visible}
.cplot text{font:400 12px var(--font-num);fill:var(--text-muted)}
.cplot .grid{stroke:var(--rule-soft)}
.cl{fill:none;stroke-linejoin:round;stroke-linecap:round}
.cl.o{stroke:var(--mark-company);stroke-width:2}
.cl.p{stroke:var(--mark-pinned);stroke-width:1.5}
.cpt.o{fill:var(--mark-company)}
.cpt.p{fill:var(--mark-pinned)}
.ccos{flex:none;height:32px;display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-5);font-size:var(--text-sm);border-bottom:1px solid var(--rule-soft);overflow:hidden;white-space:nowrap}
.ccos .who{display:inline-flex;align-items:center;gap:6px}
.srcp{width:min(360px,calc(100vw - 16px))}
.srcf{list-style:none;margin:0;padding:0}
.srcf li{border-top:1px solid var(--rule-soft);padding:var(--space-1) 0;overflow-wrap:anywhere}
/* 코호트(H 묶음 · §40): 고른 연도 2px --text · 나머지 1px --mark-market-line · 밴드 --mark-market 채움(고른 연도만) · 점선 두 가지는 같은 모양 */
.cchips{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0 0 var(--space-2);font-size:var(--text-sm)}
.cchips [data-cohort-chip]{height:32px;padding:0 var(--space-3);border:1px solid var(--control-border);border-radius:var(--radius-1);background:var(--background);color:var(--text-muted);font-family:var(--font-num);white-space:nowrap}
.cchips [data-cohort-chip]:hover{background:var(--surface-hover)}
.cchips [data-cohort-chip][aria-pressed="true"]{background:var(--surface-active);border-color:var(--text);color:var(--text);font-weight:500}
.cchips select{height:32px;border:0;border-bottom:1px solid var(--control-border);background:none;color:var(--text)}
.cchips .cbs{color:var(--text-muted)}
.cline{fill:none;stroke:var(--mark-market-line);stroke-width:1;stroke-linejoin:round;stroke-linecap:round;cursor:pointer}
.cline.chosen{stroke:var(--text);stroke-width:2;cursor:default}
.cline[data-dash]{stroke-dasharray:4 3;stroke-linecap:butt}
.cdot{fill:var(--mark-market-line)}
.cdot.chosen{fill:var(--text)}
.cband{fill:var(--mark-market);fill-opacity:.18;stroke:none}
.cbench{fill:none;stroke:var(--mark-market-line);stroke-width:1.5;stroke-dasharray:8 3 2 3}
.clbl .plbg{fill:var(--background)}
.clbl.chosen text{fill:var(--text);font-weight:600}
.clbl.co{cursor:pointer}
.clbl.co text{fill:var(--text);font-family:var(--font-body)}
.coptp .copt{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-3);padding:2px 0}
.coptp .cn{min-width:7em;color:var(--text)}
.coptp .copt[aria-disabled="true"] .cn,.coptp .copt[aria-disabled="true"] .seg button{color:var(--text-muted);opacity:.5;cursor:not-allowed}
.coptp .why{display:none;flex-basis:100%;color:var(--text-muted);font-size:var(--text-xs)}
.coptp .copt[aria-disabled="true"]:hover .why,.coptp .copt[aria-disabled="true"]:focus-within .why{display:block}
/* I 묶음(§10 · 11-06 · 11-14 · §45 · §46): 760 미만에서만 보이는 것들의 기본(760 이상에서는 그리지 않는다) */
.mob,.shd,.usubslot,.hdl,.fback,.cover,.fexb{display:none}
.fed .shd{display:contents}
.fed .shd .iconbtn{display:none}
#theme .lab{display:none}
.vhead .axline{min-width:0;flex:1 1 0;font-size:var(--text-sm);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#axespop .ctl{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-1) 0}
.vrow[data-fold]{flex-wrap:wrap} /* 접힌 머리(760 미만 · 펼침 중 좁은 캔버스 N-7): 머리 한 줄(제목 · 축 · 지표 이름) 아래에 예외 수 · 기준 */
.vrow[data-fold]>.vhead{flex-basis:100%;flex-wrap:nowrap;align-items:center}
.vrow[data-fold]>.vhead h2{white-space:nowrap}
.vhead [data-action="axes"]{flex:none;background:none;border:0;border-bottom:1px solid var(--control-border);padding:0 1px;color:var(--text);font-weight:500} /* 「축」은 머리의 다른 조작 단추(.axis 안)와 같은 꼴 · 본문색 */
.vhead [data-action="axes"][aria-expanded="true"]{border-bottom:2px solid var(--text)}
#axespop [data-mid]{display:none}
@media (width < 760px){
  body{height:100dvh}
  /* 셸(§45-3): 로고 · 검색 아이콘(누르면 검색 칸이 셸 전폭) · 「≡」 메뉴(아래 작은 시트) */
  .shell{padding:0 var(--space-4);gap:var(--space-2);position:relative}
  .shell .mob{display:grid;color:var(--shell-text-muted);width:44px;height:44px}
  .shell .mob:hover{background:none;color:var(--shell-text)}
  .shell [data-action="search"]{margin-left:auto}
  .searchwrap{display:none}
  .shell[data-search] .searchwrap{display:block;position:absolute;left:var(--space-4);right:var(--space-4);top:6px;max-width:none;z-index:31}
  .search{height:40px}
  .search kbd{display:none}
  .shell nav{margin:0;flex-direction:column;align-items:stretch;gap:0}
  .shell nav[hidden]{display:none}
  .shell nav button{width:100%;height:auto;min-height:44px;padding:0 var(--space-2);display:flex;align-items:center;gap:var(--space-2);color:var(--text)!important;font-size:var(--text-base)!important;border-bottom:1px solid var(--rule-soft);border-radius:0}
  .shell nav button:hover{color:var(--text)}
  #theme .lab{display:inline}
  /* 바(§10 · 11-06): 「이름 + 회사 수」 한 줄 56px — 바 전체가 편집 시트를 여는 단추다 */
  .ubar[data-compact]{padding:0 var(--space-4)}
  .ubar[data-compact] .uid{flex:1;max-width:none;display:flex;align-items:baseline;gap:var(--space-3)}
  .ubar[data-compact] .uname{flex:0 1 auto;min-width:0}
  .ubar[data-compact] .ucount b{flex:none}
  .ubar[data-compact] .umenu{display:flex;position:absolute;inset:0;width:auto;height:auto;justify-content:flex-end;align-items:center;padding:0 var(--space-4);border:0;border-radius:0;background:none;z-index:1}
  /* 전폭 시트 공통 틀(§45-2): 머리 56px(← 뒤로 · 제목 · ×) · 높이는 보이는 창(visual viewport — 키보드 위) · 위아래 안전 영역은 안쪽 */
  [data-sheet="edit"],[data-sheet="full"]{position:fixed!important;left:0!important;right:0!important;top:var(--vvt,0px)!important;bottom:auto!important;width:auto!important;height:var(--vvh,100dvh)!important;max-width:none!important;max-height:none!important;transform:none!important;transition:none!important;z-index:50;background:var(--background);border:0!important;margin:0}
  [data-sheet="edit"][hidden],[data-sheet="full"][hidden]{display:none!important}
  #fedit[data-sheet]{z-index:60}
  .shd{display:flex;align-items:center;gap:var(--space-2);flex:none;height:56px;padding:0 var(--space-2);border-bottom:1px solid var(--rule);background:var(--background)}
  .shd h2{flex:1;min-width:0;margin:0;font:500 var(--text-md)/1.2 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shd .iconbtn,.fed .shd .iconbtn{display:grid}
  /* 편집 시트: 칩 · 강조 · 「+ 조건」 · 기준 · 도구. 칩 팝업·「+ 조건」 판은 이 시트 안(머리 아래)에서 */
  #urest[data-sheet="edit"]{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3);overflow:auto;padding:0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom))}
  #urest[data-sheet="edit"]>.shd{position:sticky;top:0;z-index:2;margin:0 calc(-1 * var(--space-4))}
  #urest[hidden]{display:none} /* sheets() 전(E1이 늦거나 실패)에도 숨은 편집 줄이 셸 ≡를 덮지 않게 — 760 이상은 그대로 바 안의 줄(D40) */
  .usubslot{display:block}
  #usubslot #usub{display:block;width:auto;min-width:0;white-space:normal;color:var(--text-muted);font-size:var(--text-sm)}
  #usubslot #usub *{white-space:normal}
  .chips{flex:none;flex-wrap:wrap;overflow:visible}
  #chips{max-width:none}
  #chipmore{display:none}
  #basisb{align-self:flex-start}
  #hlbar{flex-wrap:wrap;height:auto;padding:0;border:0}
  .utools{margin-left:0;flex-wrap:wrap}
  .utools .lab{display:inline}
  .urule{display:none}
  .urest .cpop,.urest .cpanel{position:fixed;left:0!important;right:0;top:56px!important;bottom:0;width:auto;max-height:none;border:0;border-top:1px solid var(--rule);z-index:3;padding-bottom:env(safe-area-inset-bottom)}
  .ptabs,.pbody,.pfoot{padding-left:var(--space-4);padding-right:var(--space-4)}
  .pfoot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--space-3)} /* 예상 수가 바뀌어도 단추 자리가 밀리지 않게: 스위치 · 예상 수 / 닫기 · 적용 */
  .pfoot .pacts{grid-column:1/-1}
  .fld.wide{width:100%}
  /* 작은 시트(§45-2): 아래에서 올라옴 · 높이는 내용만큼(최대 62% dvh) · 안전 영역은 안쪽 여백 · 덮개 위 */
  [data-sheet="small"]{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-width:none!important;max-height:62dvh!important;overflow:auto;z-index:70;background:var(--background);color:var(--text);border:0;border-top:1px solid var(--rule);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));display:block}
  [data-sheet="small"][hidden]{display:none!important}
  .basis[data-sheet="small"]{display:flex}
  .cover{display:block;position:fixed;inset:0;z-index:65;background:var(--background);opacity:.6}
  .cover[hidden]{display:none}
  .coptp .copt[aria-disabled="true"] .why{display:block} /* 무시 사유는 마우스가 없어도 보인다 */
  /* 회사 시트(§10 · 11-06): 두 단 28% · 62%(바깥 높이 · 분모 100dvh) · 비모달 · 덮개 없음 · 아래 안전 영역은 안쪽 */
  .margin{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;height:28dvh;border-left:0;border-top:1px solid var(--rule);transform:translateY(100%);z-index:20;padding-bottom:env(safe-area-inset-bottom)}
  .margin[data-stop="62"]{height:max(62dvh,min(166px,100dvh))} /* 2026-11-07: 아주 낮은 화면에서 62 단이 28 단(최소 166px)보다 작아지지 않게(Astra 2차 지적 6) */
  .margin[data-sheet="company"][data-stop="28"]{height:max(28dvh,min(166px,100dvh))} /* 2026-11-07: §27 F1 뒤 머리(펼치기·고정·닫기 44px)가 높아져 낮은 화면(390×520)에서 28 단의 「기준」 줄이 잘렸다 — 손잡이 44 + 머리 + 자리 줄이 들어가는 최소 높이 */
  .margin[data-sheet="company"][data-stop="28"] .cofoot{display:none} /* 28 단 숨김이 아래 한 줄 grid(§51-5)를 이긴다(특이성) */
  .margin[data-sheet="company"] .cotop{padding:0 var(--space-4)}
  .margin[data-sheet="company"] .cohead h2{font-size:var(--text-xl);line-height:1.1} /* 수리 K9: 28 단 첫 보는 지표 행이 시트 안에 들게 머리를 2px 줄임 */
  /* §51-4: 고정 머리(손잡이 + 회사 이름 머리 — 밀 자리) · 그 아래 한 스크롤 상자(알림 · 자리 줄 · 표 · 끝 단추 줄). 28 단은 시트 전체가 밀 자리이고 스크롤하지 않는다. */
  .margin[data-sheet="company"] [data-sheet-head]{flex:none;touch-action:none}
  .margin[data-sheet="company"][data-stop="28"]{touch-action:none}
  .margin[data-sheet="company"] [data-sheet-body]{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .margin[data-stop="28"] [data-sheet-body]{overflow:hidden}
  .margin[data-sheet="company"] .mtab{flex:none;overflow:visible;padding:0 var(--space-3)}
  /* 표는 가로 스크롤 없이 폭에 맞춘다: 자리 칸은 띠 그림을 숨기고 글자만(§51-4 · D49 ⑤) · 지표 이름 칸과 자리 글자는 줄바꿈 · 기간 머리 줄은 한 스크롤 상자 맨 위에 붙는다(.mt thead th의 sticky). */
  .margin[data-sheet="company"] .mt{width:100%}
  .margin[data-sheet="company"] .bd svg{display:none}
  /* 수리(L 실행기 D-2·D-3): 열 비율 고정(지표 이름 24% · 자리 25% · 기간 셋이 나눔) · 칸 글자는 줄바꿈 · 기간 머리 32px(누르는 자리 아님) — 360·390에서 폭에 맞고 28 단에 첫 보는 지표 행이 들어온다(390×844).
     † 단추는 누름 영역 44px 그대로 두고 음수 여백으로 자리만 좁힌다(오른쪽 이웃 칸의 글자 위로 조금 겹침 — 그 칸은 누르는 자리가 아니다). */
  .margin[data-sheet="company"] .mt{table-layout:fixed}
  .margin[data-sheet="company"] .mt th,.margin[data-sheet="company"] .mt td{padding:2px 3px;white-space:normal;overflow-wrap:anywhere}
  .margin[data-sheet="company"] .mt thead th{height:32px}
  .margin[data-sheet="company"] .mt thead th:first-child{width:24%}
  .margin[data-sheet="company"] .mt thead th:last-child{width:25%}
  .margin[data-sheet="company"] .mt .rdag{margin:-8px -14px -8px -8px}
  /* §51-5: 끝 단추 줄 한 줄(「같은 업종·테마로 보기」 하나 — 넘치면 그 단추 안에서 줄바꿈 · 「재무 전체 펼치기」는 머리로 옮김) · 위아래 8px · 단추 44px */
  .margin[data-sheet="company"] .cofoot{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);padding:var(--space-2) var(--space-4)} /* F4: 단추 하나(같은 업종·테마로 보기) */
  .margin[data-sheet="company"] #fullb{width:44px;padding:0;justify-content:center} /* F1·F2: 시트 머리에서는 아이콘만(이름은 aria-label) */
  .margin[data-sheet="company"] #fullb .lab{display:none}
  .margin[data-sheet="company"] .cofoot .btn{font-size:var(--text-sm)}
  .margin[data-sheet="company"] #jumpb{white-space:normal;text-align:left;justify-content:flex-start;line-height:1.2}
  /* 회사 시트가 열린 동안 캔버스 아래 여백 = 시트 바깥 높이(28/62% dvh) — 끝까지 밀면 마지막 줄이 시트 위에 온다(단·닫힘·폭 전환을 속성으로 따라간다) */
  .page.open:has(>.margin[data-stop="28"])>.canvas{padding-bottom:28dvh}
  .page.open:has(>.margin[data-sheet="company"][data-stop="28"])>.canvas{padding-bottom:max(28dvh,min(166px,100dvh))} /* 위 최소 높이와 같게 · 화면 높이를 넘지 않게(Astra 3차 지적 4) */
  .page.open:has(>.margin[data-stop="62"])>.canvas{padding-bottom:max(62dvh,min(166px,100dvh))}
  .hdl{display:flex;flex:none;justify-content:center;align-items:center;width:100%;height:44px;background:none;border:0;padding:0}
  .hdl::before{content:"";width:36px;height:3px;background:var(--control-border)}
  /* 펼침·비교(11-14 · §51-8): 머리 56px(「← <보기 이름>」 · 회사 이름) 아래 탭 줄 · 탭 5는 가로로 미는 한 줄 · 첫 열 고정 + 최근 3기간 */
  .margin[data-sheet="full"] .fhd{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:56px 44px;height:auto;padding:0 var(--space-2);gap:0 var(--space-2)}
  .fhd .fret{grid-area:1/1;margin:0}
  .fhd h2{grid-area:1/2}
  .fhd .ftabs{grid-area:2/1/3/3;align-items:stretch}
  .fhd .cmpnone{grid-area:2/2/3/3;align-self:center;justify-self:end;font-size:var(--text-sm);color:var(--text-muted)}
  .stabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;padding:0 var(--space-3)}
  .stabs button{height:44px}
  .stt th,.stt td{height:44px}
  .stt th:first-child,.stt .sgrp th{min-width:132px;width:132px;max-width:132px;padding-left:var(--space-3);white-space:normal;overflow-wrap:anywhere}
  .stt thead th:not(:first-child),.stt td{min-width:calc((100vw - 132px) / 3)}
  .stt .cv{display:inline-flex;align-items:center;justify-content:flex-end}
  .cchs{grid-template-columns:minmax(0,1fr);padding:var(--space-2) var(--space-3) 0}
  .cplot{height:180px}
  .cchn{font-size:var(--text-sm);font-weight:500;margin:0}
  .ccos{height:auto;min-height:44px;overflow-x:auto;padding:0 var(--space-3);gap:var(--space-2)}
  .ccos [data-cmp-mate]{border:1px solid var(--control-border);border-radius:var(--radius-1);background:var(--background);padding:0 var(--space-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .ccos [data-cmp-mate][aria-pressed="true"]{border-color:var(--text);font-weight:500}
  /* 수식 만들기(11-14): 입력 위 · 지표 목록 아래 · 미리보기 한 줄 늘 · 예시 접힘 · 연산자·함수 줄은 키보드 바로 위 */
  #fedit[data-sheet="full"]{display:flex;flex-direction:column;gap:var(--space-2);overflow:auto;padding:0 var(--space-4) env(safe-area-inset-bottom)}
  #fedit[data-sheet="full"] .shd{display:flex;margin:0 calc(-1 * var(--space-4));position:sticky;top:0;z-index:3}
  .fed .fins{display:contents}
  #fedit[data-sheet="full"]>*,#fedit[data-sheet="full"] .fins>*,#urest[data-sheet="edit"]>*{flex:none} /* 시트 안 줄이 내용 높이보다 줄어들지 않게 — 넘치면 시트가 스크롤한다 */
  .fed .ffoot{order:8}
  .fed .fops{order:9;position:sticky;bottom:0;z-index:2;margin-top:auto;background:var(--background);border-top:1px solid var(--rule-soft);flex-wrap:nowrap;overflow-x:auto;padding:var(--space-1) 0}
  .fexb{display:inline-flex}
  .fprev .fex[hidden]{display:none}
  /* 보기 머리: 산점도 선택기는 「축」 단추 하나로 접고 머리에는 가로·세로 지표 이름 한 줄(§45-4) */
  .canvas{padding:var(--space-3) var(--space-3) var(--space-5)} /* 좌우 12px: 360에서 분포 막대의 누름 칸이 44px을 넘게(P06 · 그림 셈은 그대로) */
  .vrow{flex-wrap:wrap}
  .vrow>.vhead{flex-basis:100%}
  .vhead[data-fold]{flex-wrap:nowrap;align-items:center}
  .plot{min-height:300px}
  .rdag sup{font-size:var(--text-xs)}
  .tablewrap td:nth-child(2),.tablewrap th:nth-child(2){display:none}
  /* 누름 영역 44px(§10 · P06): 단추·선택기·입력·링크와 표의 행·칸 조작 */
  button,select,input,textarea{min-height:44px!important} /* 각 부품의 32px·36px 하한보다 앞선다 */
  button,select{min-width:44px!important}
  .btn,.chip,.iconbtn{height:44px}
  .iconbtn{width:44px}
  .rdag,.rmiss,.cv{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
  td,.mt th,.mt td{height:44px}
  a[href]{display:inline-flex;align-items:center;min-height:44px}
  .shell .brand{display:flex;align-items:center;min-height:44px}
  .qres li{min-height:44px;align-items:center}
  .qres li.qh{min-height:0}
}
/* K 묶음(§50): 피드백 판 — 760 이상 셸 「피드백」 아래 팝업(폭 min(560px, 100vw − 16px)) · 760 미만 전폭 시트(머리 56px ← · 제목 · × · 덮개 없음) */
#fbpop{width:min(560px,calc(100vw - 16px));max-width:none;max-height:calc(100vh - 64px);padding:0 var(--space-4) var(--space-4);flex-direction:column;gap:var(--space-2)}
#fbpop:not([hidden]){display:flex}
#fbpop>*{flex:none}
.fbhd{display:flex;align-items:center;gap:var(--space-2);height:44px;margin:0 calc(-1 * var(--space-4));padding:0 var(--space-2) 0 var(--space-4);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:2;background:var(--background)}
.fbhd h2{flex:1;min-width:0;margin:0;font:500 var(--text-md)/1.2 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbnote{margin:0;font-size:var(--text-xs);color:var(--text-muted)}
#fbpop>.fbnote:first-of-type{font-size:var(--text-sm);color:var(--text);margin-top:var(--space-2)}
#fbTitle,#fbText{width:100%;box-sizing:border-box;background:var(--background);color:var(--text);border:1px solid var(--control-border);border-radius:var(--radius-1);padding:var(--space-2) var(--space-3);font-family:inherit;font-size:var(--text-sm)}
#fbTitle{height:36px}
#fbText{resize:vertical;line-height:1.6}
#fbHp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fbctx{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--text-xs);color:var(--text-muted)}
.fbsend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);margin-top:var(--space-2)}
.fbsend[hidden]{display:none}
.fbto,.fbacts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.fbto{margin-top:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--rule-soft);font-size:var(--text-xs);color:var(--text-muted)}
.fbto code{font-size:var(--text-xs);color:var(--text);user-select:all;overflow-wrap:anywhere}
#fbMsg{font-size:var(--text-xs);color:var(--text)}
@media (width < 760px){
  #fbpop[data-sheet="full"]{z-index:75;padding:0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));overflow:auto}
  #fbpop .fbhd{height:56px;padding:0 var(--space-2)}
  #fbpop .fback{display:grid}
  #fbTitle{height:44px}
}