/* T2 종목 화면 (트렌드 브랜드·상품·성분) — 목업 rs_tpl.html .sym/.desk/.wl/.book/.trades 기준.
   전역 .pill/.seg/h2/table/.gbn은 다른 탭이 쓰므로 재정의하지 않음 → 모두 .dk-* / .sym 범위 안에서만. 토큰은 style.css 이름(--rule/--ground/--ink-soft). */
#p-brands,#p-products,#p-ings{gap:10px}
.dk-top{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--rule)}

/* 종목 헤더 */
.sym{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:flex-end;padding:10px 14px;background:var(--panel)}
.sym .st{display:flex;flex-direction:column;gap:1px;min-width:0}
.sym .nmc{max-width:100%}
.sym h1{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.sym .kind,.sym .k{font-size:12px;color:var(--muted)}
.sym .dk-sub{font-size:12px;color:var(--muted)}
.sym .big{font:600 26px/1.05 var(--mono);font-variant-numeric:tabular-nums}
.sym .chg{font:600 13px var(--mono);font-variant-numeric:tabular-nums}
.sym .v{font:500 13px var(--mono);font-variant-numeric:tabular-nums}
.sym .v2{font-size:13px;color:var(--ink-soft)}
.sym .dk-memo{font-size:12px;color:var(--muted)}
.sym .dk-why{flex-basis:100%;font-size:12px;color:var(--ink-soft);border-top:1px dashed var(--rule);padding-top:5px}

/* 데스크 그리드 — 차트 | 워치리스트 / 하단 패널 | 워치리스트 */
.dk-desk{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"chart list" "lower list";gap:1px;background:var(--rule)}
.dk-desk > section{background:var(--ground);min-width:0;gap:0}
.dk-chartbox{grid-area:chart;padding:8px 12px 4px}
.dk-ctl{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-bottom:4px}
.dk-tg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:var(--r);overflow:hidden}
.dk-tg button{appearance:none;border:0;background:none;color:var(--muted);font:600 12px var(--mono);padding:3px 9px;cursor:pointer;white-space:nowrap}
.dk-tg button[aria-pressed="true"]{background:var(--oy-wash);color:var(--oy)}
.dk-cnote{font-size:12px;color:var(--muted);flex:1 1 260px;text-align:right;line-height:1.45}
.dk-lma{display:inline-block;width:14px;height:2px;background:var(--warn);vertical-align:middle;margin-right:4px}
.dk-chart{display:block;width:100%;height:300px;overflow:visible}
.dk-chart .dk-bar{fill:var(--muted);opacity:.78}
/* 막대 색 = 직전 수집일 대비 (목업 방식 · 사용자 확정 10/08): 증가 상승색 · 감소 하락색 · 같음 중립 */
.dk-chart .dk-bar.dk-up{fill:var(--up)} .dk-chart .dk-bar.dk-down{fill:var(--down)} .dk-chart .dk-bar.dk-flat{fill:var(--muted)}
.dk-chart .dk-part{stroke:var(--muted);stroke-width:.6}
.dk-chart .dk-ma{fill:none;stroke:var(--warn);stroke-width:1.7}
.dk-chart .dk-cx{stroke:var(--ink-soft);stroke-dasharray:3 3}
.dk-tip{position:fixed;z-index:30;pointer-events:none;background:var(--panel-2);border:1px solid var(--rule-strong);border-radius:var(--r);padding:6px 9px;font:12px/1.5 var(--mono);color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.3);white-space:nowrap}

/* 워치리스트 — 그리드 행 높이는 차트+하단이 정하고, 목록은 그 안에서 스크롤 */
.dk-list{grid-area:list;display:flex;flex-direction:column;contain:size}
.dk-lh{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:8px 10px 6px;border-bottom:1px solid var(--rule)}
.dk-lh input[type=search]{width:100%;font-size:12px;padding:4px 8px}
.dk-wlcnt{font-size:12px}
.dk-wl{flex:1 1 0;min-height:0;overflow:auto}
.dk-wl.sc{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
.dk-wl table{font-size:12px;table-layout:fixed}
.dk-wl th{position:sticky;top:0;z-index:1;background:var(--ground);color:var(--muted);font:500 12px var(--font);padding:5px 6px;cursor:pointer;user-select:none;white-space:nowrap;border-bottom:1px solid var(--rule)}
.dk-wl th.st{width:26px;cursor:default;padding:5px 0}
.dk-wl th.l{text-align:center}
.dk-wl th[data-k="cur"]{width:52px} .dk-wl th[data-k="chg"]{width:66px} .dk-wl th:last-child{width:72px;cursor:default}
.dk-wl th[aria-sort="descending"]::after{content:" ▼";font-size:12px} .dk-wl th[aria-sort="ascending"]::after{content:" ▲";font-size:12px}
.dk-wl td{padding:0 6px;height:30px;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:middle}
.dk-wl td.st{padding:0;text-align:center}
.dk-wl td.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.dk-wl td.nm{overflow:hidden;text-overflow:ellipsis}
.dk-wl td.sp{padding:0 4px}
.dk-wl tbody tr[data-n]{cursor:pointer}
.dk-wl tbody tr[data-n]:hover td{background:var(--panel-2)}
.dk-wl tbody tr[aria-selected="true"] td{background:var(--oy-wash)}
.dk-wl tbody tr[aria-selected="true"] td.nm{color:var(--oy);font-weight:600}
.dk-wl tr.dk-sep td{height:3px;padding:0;background:var(--rule-strong)}
.dk-wl td.dk-none{color:var(--muted);text-align:center;height:40px}
.dk-star{appearance:none;border:0;background:none;color:var(--muted);font-size:13px;line-height:1;padding:4px;cursor:pointer}
.dk-star[aria-pressed="true"]{color:var(--warn)}
.dk-new{font:600 12px var(--mono);color:var(--warn);border:1px solid var(--warn);border-radius:2px;padding:0 3px;margin-left:4px}
.dchg{display:inline-block;min-width:52px;text-align:right;padding:1px 5px;border-radius:3px;font:600 12px var(--mono);font-variant-numeric:tabular-nums}
.dchg.up{background:var(--up-wash)} .dchg.down{background:var(--down-wash)} .dchg.flat{background:var(--panel-2)}
.dk-sp{display:block}
.dk-sp path{fill:none;stroke:var(--ink-soft);stroke-width:1.2}
.dk-lcap{font-size:12px;padding:5px 10px;border-top:1px solid var(--rule)}

/* 하단 — 의도 호가창 · 최근 원문 · Summary */
.dk-lower{grid-area:lower;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.05fr) minmax(0,1.3fr);gap:1px;background:var(--rule)!important}
.dk-lower > div{background:var(--ground);padding:10px 12px;min-width:0;display:flex;flex-direction:column;gap:6px}
.dk-lower h3{font-size:13px;font-weight:600;display:flex;gap:8px;align-items:baseline}
.dk-lower h3 small{font-weight:400;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-lower .book .row{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:8px;align-items:center;height:24px;font-size:12px}
.dk-lower .book .lb{color:var(--ink-soft);white-space:nowrap}
.dk-lower .book .tr{position:relative;height:16px;background:var(--panel-2);border-radius:2px;overflow:hidden}
.dk-lower .book .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;opacity:.6}
.dk-lower .book .vv{text-align:right;font:500 12px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.dk-lower .book .cap{font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}
.dk-lower .trades{display:flex;flex-direction:column}
.dk-lower .trades a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;padding:4px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.dk-lower .trades a:hover .t{color:var(--oy);text-decoration:underline}
.dk-lower .trades .d{font:500 12px var(--mono);color:var(--muted);padding-top:1px}
.dk-lower .trades .tx{display:flex;flex-direction:column;min-width:0}
.dk-lower .trades .t{font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-lower .trades .s{font-size:12px;color:var(--muted)}
.dk-sum .gbn{border:0;padding:0;background:none;gap:6px}
.dk-sum h3 .dk-tg{margin-left:auto;flex:none}
.dk-sum h3 .dk-tg button{font:600 12px var(--font);padding:2px 8px}
.dk-sum .gbn-title{display:none}
.dk-sum .gbn ul{font-size:12px;line-height:1.5}

/* 경고(해석에 영향) — 보이되 작게 */
.note.dk-warn{font-size:12px;padding:5px 10px;line-height:1.5}

/* 보조 블록 — 접힌 섹션(기본 닫힘) */
.dk-sec{border:1px solid var(--rule);border-radius:var(--r);background:var(--panel)}
.dk-sec > summary{cursor:pointer;padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink-soft);list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.dk-sec > summary::-webkit-details-marker{display:none}
.dk-sec > summary::before{content:"▸";color:var(--muted);font-size:12px}
.dk-sec[open] > summary::before{content:"▾"}
.dk-sec > summary .hint{font-weight:400;font-size:12px}
.dk-sec > summary:hover{color:var(--ink)}
.dk-secb{padding:4px 12px 12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.dk-secb > section.card,.dk-secb > section.gap{border:0;padding:0;background:none;margin:0}

@media (max-width:1100px){
  .dk-desk{grid-template-columns:minmax(0,1fr);grid-template-areas:"chart" "list" "lower"}
  .dk-list{contain:none;height:400px}
  .dk-lower{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dk-sum{grid-column:1 / -1}
}
@media (max-width:640px){
  .dk-lower{grid-template-columns:minmax(0,1fr)}
  .dk-cnote{text-align:left}
  .sym{gap:6px 18px}
  .sym .big{font-size:22px}

}

/* 차트 상단 스코어보드 (핵심 지표 · 탭 전체 기준) */
.dk-scorelab{font-size:12px;margin:0 0 4px}
.dk-score{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden;margin:0 0 8px}
.dk-score .tile{background:var(--panel);border:0;border-radius:0;padding:6px 10px;margin:0;min-width:0}
.dk-score .tile .k{font-size:12px}
.dk-score .tile .v{font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-score .tile .d{font-size:12px}
.dk-score .tile .i{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-score .tile[data-sym]{cursor:pointer}
.dk-score .tile[data-sym]:hover{background:var(--panel-2)}

/* 전체 랭킹 — 항상 펼침 · Top 10 상세 */
.dk-rank{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:10px 14px;margin:0 0 10px}
.dk-rankh{display:flex;gap:10px;align-items:baseline;margin:0 0 6px}
.dk-rankh h3{margin:0;font-size:13.5px}
.dk-rank tr.dk-top10 td{vertical-align:top}
.dk-samples{display:flex;flex-direction:column;gap:2px;margin-top:3px}
.dk-samples a{font-size:12px;line-height:1.45}
.dk-more{margin-top:8px;border:1px solid var(--rule-strong);background:transparent;color:var(--ink-soft);border-radius:4px;padding:5px 12px;cursor:pointer;font-size:12px}
.dk-more:hover{background:var(--panel-2)}