/* 공통 UI 컴포넌트 — PC(/stock/...)와 모바일(/m/...)이 함께 싣는다. 눈으로 보는 카탈로그: /design (모바일 /m/design) ⚠ 경계 규칙 : stock.css 와 mobile.css 에 같은 뜻의 규칙이 두 벌 있으면 여기로 옮긴다. 한쪽만 쓰는 것은 그 파일에 둔다. 왜 이 파일이 생겼는가 — 화면이 반응형 한 벌이 아니라 PC · 모바일 두 벌이고, 모바일은 사이드바 · 표 스타일이 필요 없어 stock.css 를 싣지 않는다. 그래서 두 화면이 함께 쓰는 것 (등락 표기 · 별 · 배지 · 설명 모달)을 모바일 쪽에 다시 적어 왔고, 값이 갈라졌다 — 별이 #f6c23e ↔ #f0a93b, 배지 모서리가 6px ↔ 5px 였다. 규칙을 한 벌로 만들어 그 원인을 없앤다. 색 · 크기 값은 여기 적지 않는다. token.css 의 var() 만 쓴다. 싣는 순서 : token.css → ui.css → (stock.css | mobile.css) stock.css · mobile.css 가 뒤에 오므로 화면별 차이는 그쪽에서 덮는다. */ /* ---- 기준선 ---- */ /* 링크. ID(#wrapper)를 붙이면 특이도가 사이드바 · 톱바의 컴포넌트 규칙을 이겨 색이 잘못 먹으므로 반드시 a 단독(0,0,1)으로 둔다 */ a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-ink); } /* 체크박스 · 라디오는 브라우저 기본 모양에 브랜드 색만 입힌다 */ input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); } /* ---- 등락 · 값 표기 ---- JS 쪽 짝은 public/js/stock.js 의 stockDiff · stockRate · stockCloseCell 이다 */ .stock-up { color: var(--up); } .stock-down { color: var(--down); } /* 만기가 지난 사채 */ .stock-over { color: var(--ink-3); text-decoration: line-through; } /* 아직 시세를 안 받아 금액을 낼 수 없는 칸. 0원과 섞이지 않게 흐린 색 + 도움 커서 */ .stock-none { color: var(--muted); font-size: 0.9em; cursor: help; } /* 「신호가 뜬 날 이미 그만큼 올라 있었다」 표시 (MIN-214) — 추천 목록(PC)과 모바일 카드가 함께 쓴다. 실측 승률이 기저보다 낮은 등락률 구간에만 붙고 자세한 값은 title 이 쥔다. **경고색을 쓰지 않는다** — 이것은 「위험한 종목」이 아니라 「읽을 때 감안할 것」이고, 빨강으로 칠하면 하락 색(--down)과 뜻이 섞인다 */ .stock-warn-mark { color: var(--ink-2); font-size: 0.9em; cursor: help; white-space: nowrap; } /* 긴 사유는 한 줄로 줄이고 hover 로 전체를 본다 */ .stock-multi { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; cursor: help; } /* ---- 관심 별 ---- JS 쪽 짝은 stockFavoriteStar · stockCompanyStar (public/js/stock.js) */ .stock-star { cursor: pointer; color: var(--muted); font-size: var(--fs-icon); vertical-align: middle; } .stock-star:hover, .stock-star.stock-star-on { color: var(--star); } /* 카드 · 구역 머리 아래 한 줄 부제 (MIN-151 — 대시보드 「최근 알림」의 조용한 이유) */ .stock-card-note, .m-sec-note { margin: 0 0 var(--sp-3); line-height: 1.5; } /* ---- 배지 ---- .stock-badge(PC) 와 .m-badge(모바일) 는 같은 것이다. 이름을 그대로 둔 채 모양만 한 벌로 맞춘다. 상태 낱말(수집 · 중지 · 오류)은 뷰가 붙인다 — stock/company/main.php · mobile/stock/company/main.php */ .stock-badge, .m-badge { display: inline-block; /* 모바일 카드의 가로 줄 안에서 이름에 밀려 찌그러지지 않게 */ flex: 0 0 auto; border-radius: var(--r-sm); padding: 2px var(--sp-3); font-size: var(--fs-mini); font-weight: 600; line-height: 1.6; background: var(--line-soft); color: var(--ink-2); } .stock-badge.on, .m-badge.on { background: var(--ok-soft); color: var(--ok); } .stock-badge.stop, .m-badge.stop { background: var(--line-soft); color: var(--ink-3); } .stock-badge.err, .m-badge.err { background: var(--up-soft); color: var(--up); } /* 「신규」 — 13F 보유 표의 마지막 변화 칸(2026-09-15 · MIN-300). **방향색(up · down)을 쓰지 않는다** — 새로 담은 것은 「올랐다」가 아니다. 옆 줄의 ±% 가 방향색이라 같은 색을 쓰면 그 줄만 뜻이 달라진다 */ .stock-badge.new, .m-badge.new { background: var(--brand-soft); color: var(--brand-ink); } /* ---- 신호 배지의 방향색 (2026-08-23 · MIN-145) ---- 상승 = up 색 · 하락 = down 색 · 중립 = 흐림. 점수 부호가 아니라 카탈로그의 `dir` 이다 — v2 가중치는 학습 결과라 부호가 뜻과 반대인 것이 있다(데드크로스 +3). Bootstrap .badge 위에 덮는다 */ .badge.sig-up { background: var(--up-soft); color: var(--up); } .badge.sig-down { background: var(--down-soft); color: var(--down); } .badge.sig-flat { background: var(--line-soft); color: var(--ink-2); } /* ---- 조건 고르개 (2026-09-09 · MIN-292) ---- 스크리너 「신호」 탭이 쓴다. **고른 것을 따로 세우는 자리가 필요한 까닭** : 신호가 88종이라 갈래를 옮겨 다니며 고르게 되는데, 고른 것이 지금 보는 갈래 밖에 있으면 무엇을 골랐는지 화면에서 사라진다. 지우는 단추를 여기 두는 것도 같은 이유다 — 갈래를 다시 찾아 들어가 같은 칩을 눌러야 빠진다면 그것은 길이 아니다 */ .stock-field-lab { display: block; margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-mini); font-weight: 700; color: var(--ink-3); letter-spacing: .02em; } .stock-field-lab:first-child { margin-top: 0; } .stock-picked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 34px; padding: var(--sp-3) var(--sp-4); background: var(--brand-soft); border: 1px solid var(--brand-soft-2); border-radius: var(--r); } .stock-pick { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 3px var(--sp-1) 3px var(--sp-4); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: var(--fs-mini); font-weight: 500; } .stock-pick-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; font-size: var(--fs-body); line-height: 1; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); } .stock-pick-x:hover { color: var(--up); background: var(--up-soft); } /* 모바일 짝은 없다 — 조건을 넣고 결과를 견주는 작업대라 폰에서 할 일이 아니다(Mobile::HIDE). 그래도 손가락 크기는 준다 : 폰으로 열면 PC 화면이 그대로 온다 */ .m-body .stock-pick-x { min-width: var(--m-tap); min-height: var(--m-tap); } /* ---- 목록의 「오늘 신호」 칸 (2026-09-09 · MIN-292) ---- 신호 여덟을 이름으로 늘어놓으면 표 한 줄에 안 들어간다. 88종을 **갈래 열일곱으로 접어** 아이콘 하나씩 세우고 이름은 눌러서 편다(`stockSignalCell`). **방향을 ▲ 묶음 · ▼ 묶음 · ◆(중립) 묶음으로 가르는 것**은 색만으로 뜻을 전하지 않기 위해서다 — 상승 여섯에 하락 하나가 섞인 종목은 색이 뒤섞여 안 읽힌다. PC · 모바일이 같은 것을 쓴다 */ .stock-sig { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; } .stock-sig-score { flex: 0 0 auto; font-weight: 700; font-size: var(--fs-cell); padding: 2px var(--sp-2); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; } .stock-sig-score.up { background: var(--up-soft); color: var(--up); } .stock-sig-score.down { background: var(--down-soft); color: var(--down); } .stock-sig-score.flat { background: var(--line-soft); color: var(--ink-3); } /* 방향 묶음. 테두리로 묶음의 경계를 긋는다 — 색을 못 보아도 ▲n · ▼n · ◆n 이 갈라 준다 */ .stock-sig-side { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2) 2px var(--sp-1); border: 1px solid transparent; border-radius: var(--r-sm); } .stock-sig-side.up { background: var(--up-soft); border-color: var(--up-line); color: var(--up); } .stock-sig-side.down { background: var(--down-soft); border-color: var(--down-line); color: var(--down); } /* 중립(◆) — 방향이 없는 신호(스퀴즈 · 피보나치 단계 …). 모양(◆)과 무채색으로 ▲ · ▼ 와 가른다 */ .stock-sig-side.flat { background: var(--line-soft); border-color: var(--line-2); color: var(--ink-2); } .stock-sig-arw { font-size: var(--fs-mini); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-right: 1px; } /* 갈래 아이콘. 개수는 오른쪽 위 작은 수로 — 아이콘을 두 번 그리면 줄이 길어진다 */ .stock-sig-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: var(--fs-icon); } .stock-sig-n { position: absolute; right: -3px; top: -3px; font-size: var(--fs-nano); font-weight: 700; line-height: 1; padding: 1px 3px; border-radius: var(--r-pill); background: currentColor; color: var(--surface); font-variant-numeric: tabular-nums; } .stock-sig-warn { flex: 0 0 auto; font-size: var(--fs-mini); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); } /* 「신규 2」 · 「이어짐」 (signal-repeat-survey) — 어제 난 것이 오늘 또 난 것인지를 칸에서 가른다. **둘의 무게가 다르다** : 신규는 읽을 것이라 포인트 색이고, 이어짐은 「새것이 없다」는 말이라 흐리게 둔다. 그래야 훑는 눈이 이어짐을 건너뛴다 */ .stock-sig-new, .stock-sig-keep { flex: 0 0 auto; font-size: var(--fs-mini); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--r-sm); white-space: nowrap; } .stock-sig-new { background: var(--brand-soft); color: var(--brand-ink); } .stock-sig-keep { background: var(--line-soft); color: var(--muted); font-weight: 400; } /* 펼친 이름 배지 안의 같은 말. 배지 색을 안 바꾸고 글자만 얹는다 — 배지 색은 **방향**이 쥐고 있어(sig-up · sig-down) 여기서 뺏으면 뜻이 둘이 된다 */ .badge .sig-fresh, .badge .sig-keep { font-style: normal; font-size: var(--fs-mini); font-weight: 700; opacity: 0.85; } .badge .sig-keep { font-weight: 400; opacity: 0.55; } /* 칸 전체가 단추다(2026-09-16 · ux-signal-badge) — 누르면 뜻 팝오버(모바일은 아래 시트)가 뜬다 */ button.stock-sig { padding: 2px var(--sp-1); border: 1px solid transparent; border-radius: var(--r); background: transparent; color: inherit; font: inherit; cursor: pointer; } button.stock-sig:hover { border-color: var(--line-2); background: var(--row-hover); } button.stock-sig[aria-expanded="true"] { border-color: var(--brand-line); background: var(--brand-soft); } button.stock-sig:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .m-body button.stock-sig { min-height: var(--m-tap); } /* 뜻 팝오버의 몸통(stockSignalDetail) — 방향 묶음마다 머리 한 줄, 줄마다 이름 · 신규/이어짐 · 뜻 · 전제 */ .sig-pop-h { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-tiny); font-weight: 700; } .sig-pop-h:first-child { margin-top: 0; } .sig-pop-h.up { color: var(--up); } .sig-pop-h.down { color: var(--down); } .sig-pop-h.flat { color: var(--ink-3); } .sig-pop-list { margin: 0; padding: 0; list-style: none; } .sig-row { padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); border-left: 3px solid var(--line-2); margin-bottom: var(--sp-1); } .sig-row.up { border-left-color: var(--up-line); } .sig-row.down { border-left-color: var(--down-line); } .sig-row > b { font-size: var(--fs-cell); color: var(--ink); } .sig-row > em { margin-left: var(--sp-2); font-style: normal; font-size: var(--fs-mini); } .sig-row > em.sig-fresh { color: var(--brand); font-weight: 700; } .sig-row > em.sig-keep { color: var(--muted); } .sig-row > p { margin: var(--sp-1) 0 0; font-size: var(--fs-tiny); color: var(--ink-2); line-height: 1.55; white-space: normal; } .sig-row > small { display: block; margin-top: var(--sp-1); font-size: var(--fs-mini); color: var(--ink-3); white-space: normal; } /* 배지와 같은 규칙 — 전제를 못 채운 발동은 흐리게 */ .sig-row.pre-no { opacity: .55; } .sig-pop-warn { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-tiny); } /* ---- 설명 팝오버 · 시트 : stockPop(누른 것, { title, html, link }) — kit.js ---- */ .k-pop { position: fixed; z-index: var(--z-pop); width: min(24rem, calc(100vw - 16px)); max-height: min(70vh, 32rem); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-pop); color: var(--ink); white-space: normal; } .k-pop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-2); } .k-pop-head > b { font-size: var(--fs-body); } .k-pop-x { width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); } .k-pop-x:hover { background: var(--row-hover); } .k-pop-body { overflow-y: auto; padding: 0 var(--sp-5) var(--sp-4); } .k-pop-link { display: block; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-soft); font-size: var(--fs-cell); font-weight: 600; } .k-sheet-dim { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; align-items: flex-end; background: var(--dim); } .k-sheet { width: 100%; max-height: 75vh; display: flex; flex-direction: column; border-radius: var(--r-2xl) var(--r-2xl) 0 0; background: var(--surface); color: var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px); } .k-sheet .k-pop-head { padding: var(--sp-6) var(--sp-6) var(--sp-3); } .k-sheet .k-pop-head > b { font-size: var(--fs-sec); } .k-sheet .k-pop-x { width: var(--m-tap); height: var(--m-tap); } .k-sheet .k-pop-body { padding: 0 var(--sp-6) var(--sp-5); } .k-sheet .k-pop-link { display: flex; align-items: center; min-height: var(--m-btn); padding: 0 var(--sp-6); font-size: var(--fs-sec); } .m-body .sig-row > b { font-size: var(--fs-sec); } .m-body .sig-row > p { font-size: var(--fs-body); } /* **모바일에서는 접는다.** PC 표는 칸이 넓어 한 줄로 두어도 되지만, 폰 카드는 320px 폭에 패딩을 빼면 290px 남짓이고 갈래가 여섯이면 점수 · 방향 · 아이콘 · 「이름」이 그것을 넘는다. `nowrap` 인 채로 넘치면 **줄이 아니라 페이지가 밀고**, 그러면 position:fixed 인 하단 탭바가 화면 밖으로 나가 그 화면에서 나갈 길이 없어진다 */ .m-body .stock-sig { flex-wrap: wrap; white-space: normal; row-gap: var(--sp-2); } /* ---- 정의가 그 발동을 어떻게 보나 (2026-09-08 · MIN-283) ---- `sig-pre-no` = 전제가 거짓이라 **정의로는 안 세는** 발동. **지우지 않고 흐리게 둔다** — 목록에서 빼는 자리가 아니라 「정의는 이 발동을 이렇게 본다」를 보이는 자리이고, 빼는 배선은 아직 없다(하위 24). 색을 새로 만들지 않고 투명도 하나로 가르는 것은 방향색(위 셋)이 이미 뜻을 쥐고 있어서다 — 색을 겹치면 어느 쪽이 무슨 말인지 못 읽는다. **`sig-pre-na`(재료가 없어 못 잼)에는 아무 표시도 안 한다** — 「거짓」과 같은 옷을 입히면 둘이 같아 보이는데, 그 둘은 다음에 할 일이 다르다 */ .badge.sig-pre-no { opacity: .45; } /* ---- 추천 한 줄의 「까닭」 칸 (2026-09-08 · MIN-283) ---- 접이 안의 신호별 표. 표 안의 표라 테두리를 안 두르고 줄 간격만 준다 */ .stock-why-list { margin: var(--sp-1) 0 0; padding-left: var(--sp-3); } .stock-why-list li { margin-bottom: 2px; } .stock-why-list li.off { opacity: .5; } /* ---- 노랑 배지의 글자 (2026-08-25) ---- 노랑 바탕은 두 테마에서 다 밝다. 그런데 `.text-dark` 를 붙이면 다크에서 --bs-dark 가 뒤집혀 글자까지 밝아지고(실측 **1.46:1** — 추천의 「주의」가 안 보였다), 안 붙이면 Bootstrap 기본값인 흰 글자가 남아 라이트에서도 흐리다(실적 발표의 「정정」). 그래서 호출부에서 `.text-dark` 를 떼고 글자색을 여기서 한 번에 정한다 — `bg-light` 는 --bs-light 가 테마를 따라가므로 해당 없다. `.text-dark` 가 `!important` 라 클래스를 남겨 두면 이 규칙이 진다 */ .badge.bg-warning { color: var(--ink-on-bright); } /* ---- 거래소 조치 배지 (2026-08-21 · MIN-95) ---- 관리종목 · 거래정지 · 투자유의. **수집기 상태 배지(`.stock-badge`)와 모양이 달라야 한다** — 같은 자리에 같은 알약이 서면 「수집 중지」와 「거래정지」가 헷갈린다. 그래서 이쪽은 **채우지 않고 테두리**로 두른다. 판정은 `CompanyModel::tradeActions` 한 곳이다 */ .stock-act { display: inline-block; flex: 0 0 auto; border: 1px solid currentColor; border-radius: var(--r-sm); padding: 1px 7px; font-size: var(--fs-mini); font-weight: 700; line-height: 1.6; background: transparent; color: var(--ink-3); cursor: help; } /* 배당기준일 D-n (2026-08-21 · MIN-103). 조치가 아니라 **일정**이라 조치색을 쓰지 않는다 — 같은 테두리 모양이되 브랜드색으로 「알림」임을 알린다 */ .stock-act.divi { color: var(--brand); } /* 거래정지가 가장 센 조치다 — 그 종목은 오늘 사고팔 수가 없다 */ .stock-act.halt { color: var(--down); } .stock-act.admin { color: var(--warn); } .stock-act.warn { color: var(--ink-2); } /* 배지가 여럿 달릴 수 있다(관리종목 + 거래정지) — 이름과 배지 사이가 붙지 않게 */ .stock-act + .stock-act { margin-left: 3px; } /* 상세 상단의 조치 줄. 태그 줄(.tg-line)과 같은 자리 · 같은 여백이라 둘이 나란히 읽힌다 */ .stock-act-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); } /* 매수 / 매도 라벨. 배지와 같은 모양인데 폭을 맞춰 세로로 줄이 선다. JS 쪽 짝은 stockSide (public/js/stock.js) */ .stock-side { display: inline-block; min-width: 2.6rem; padding: 2px var(--sp-3); border-radius: var(--r-sm); background: var(--line-soft); font-size: var(--fs-mini); font-weight: 600; text-align: center; } .stock-side.stock-up { background: var(--up-soft); } .stock-side.stock-down { background: var(--down-soft); } /* Bootstrap 배지. 색은 token.css 의 「Bootstrap 다리」가 맡고 여기서는 모양만 맞춘다 — 기본값(0.75em · 0.25rem)이 화면 글자 크기에 따라 흔들려 배지마다 크기가 달랐다. 이 클래스를 쓰는 곳 : stockSignalBadge · stockFeedbackType · stockFeedbackStatus · 톱바 알림 수 */ .badge { border-radius: var(--r-sm); padding: 3px var(--sp-3); font-size: var(--fs-mini); font-weight: 600; } /* Bootstrap 의 .text-muted 만 색을 변수로 두지 않아(리터럴 #6c757d) 다리로 잇지 못한다. 원본이 !important 라 여기도 붙인다 */ .text-muted { color: var(--ink-2) !important; } /* ---- 안 읽음 표식 ---- .stock-dot(PC) · .m-dot(모바일). 브랜드 색이다 — 이 화면에서 빨강은 「상승」의 뜻이라 빨간 점은 등락으로 오해된다 */ .stock-dot, .m-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--r-round); background: var(--brand); margin-right: 5px; vertical-align: middle; } /* ---- 버튼 : Bootstrap 클래스에 우리 톤 ---- #wrapper 를 떼지 못하는 이유는 basic_con.css 의 옛 규칙 특이도를 이겨야 하기 때문이다. 모바일(.m-body)은 그 파일을 싣지 않으므로 선택자 둘이면 충분하다. .m-body 를 더한 것은 모바일 설명 모달의 단추가 Bootstrap 기본 파랑으로 뜨던 것을 고치려는 것이다 */ #wrapper .btn, .m-body .btn { border-radius: var(--r); font-size: var(--fs-cell); font-weight: 600; } #wrapper .btn-primary, .m-body .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--surface); } #wrapper .btn-primary:hover, .m-body .btn-primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); } #wrapper .btn-secondary, .m-body .btn-secondary { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-ink); } #wrapper .btn-secondary:hover, .m-body .btn-secondary:hover { background: var(--brand-soft-2); border-color: var(--brand-soft-2); color: var(--brand-ink); } #wrapper .btn-outline-primary, .m-body .btn-outline-primary { color: var(--brand); border-color: var(--brand); } #wrapper .btn-outline-primary:hover, .m-body .btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: var(--surface); } #wrapper .btn-outline-secondary, .m-body .btn-outline-secondary { color: var(--ink-2); border-color: var(--line-2); } #wrapper .btn-warning, .m-body .btn-warning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } /* ---- 화면 설명 모달 ---- 뷰(app/Views/layout/guide.php)와 guide.js 는 PC · 모바일이 같은 것을 쓴다. 그래서 모양도 여기 한 벌. PC 는 가운데 모달 · 모바일은 아래에서 올라오는 시트라 껍데기 모양만 각 파일에서 덮는다 */ .stock-guide-head { color: var(--brand); font-weight: 600; margin-bottom: var(--sp-5); } .stock-guide #guide_slide_body { color: var(--ink-2); line-height: 1.8; } .stock-guide-dot { display: flex; gap: var(--sp-2); } .stock-guide-dot span { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--line); } .stock-guide-dot span.on { background: var(--brand); } /* ---- 축약 차트 (mchart.js) ---- **ETF 상세(PC)가 같은 차트를 쓴다** — 두 벌로 두지 않는다(경계 규칙: 같은 뜻의 규칙이 두 벌 생기려 하면 ui.css 로). 클래스 이름을 모바일 것 그대로 두는 것도 그 규칙이다 — 뷰 · JS 를 안 고쳐도 된다 */ .m-note { padding: 32px 0; color: var(--ink-3); text-align: center; } .m-chart-box { margin-top: 16px; padding: var(--sp-4) var(--sp-4) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); } .m-chart-tab { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); } /* 이 줄에 기간 단추 대신 고르는 칸이 서는 화면이 있다(미국 시장 「추이」의 지수 · 기간). 그전에는 뷰에 인라인 `style="height:30px;…font-size:var(--fs-tiny)"` 로 눌러 놓았는데, 30px 는 `--m-tap` 에 못 미치고 12px 는 **iOS 가 화면을 확대하는 크기**였다 (2026-08-26 · mobile-fit-audit). 규칙을 여기 두어 뷰가 컴포넌트를 덮지 않게 한다 */ /* `min-width: 0` 이 없으면 flex 항목이 **고유 폭(가장 긴 선택지 글자) 밑으로 안 줄어** 좁은 폰에서 그만큼 화면이 밀린다 — `.m-search-input` 이 2026-08-24 에 같은 데 걸렸다 */ .m-chart-tab > .m-sel { flex: 1 1 0; width: auto; min-width: 0; margin-bottom: 0; } .m-chart-btn { flex: 1 1 0; height: var(--m-tap); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font-size: var(--fs-body); } .m-chart-btn.on { border-color: var(--brand); background: var(--brand-fill); color: var(--brand); font-weight: 700; } /* 지표 줄은 기간 줄보다 한 단 작게 — 둘이 같은 크기면 무엇이 상위인지 알 수 없다. 기간은 「무엇을 볼지」, 지표는 「어떻게 볼지」라 기간이 먼저다 */ .m-chart-ind { margin-bottom: var(--sp-3); } /* 지표 켜기/끄기는 기간 단추보다 작게 두었는데 30px 은 손가락 잣대(--m-tap)에 못 미친다 — 차트 바로 아래라 빗맞히면 차트가 끌린다(2026-08-26 · mobile-fit-fix) */ .m-chart-ind .m-chart-btn { font-size: var(--fs-cell); } /* touch-action 을 none 으로 두어야 끌 때 화면이 함께 움직이지 않는다 */ .m-chart { display: block; width: 100%; height: auto; touch-action: none; } .m-chart .mcu { fill: var(--up); stroke: var(--up); } .m-chart .mcd { fill: var(--down); stroke: var(--down); } .m-chart .mcw { stroke-width: .8; } .m-chart .mcb { stroke-width: 0; } .m-chart .mcv { fill-opacity: .55; stroke-width: 0; } /* 이동평균 · 볼린저 · RSI. **색은 PC 차트와 같은 토큰을 쓴다** — MA20 에 --c-fib-auto(보라) 같은 다른 토큰을 쓰면 PC(노랑)와 다른 선처럼 보인다 */ .m-chart .mcma20 { fill: none; stroke: var(--c-ma20); stroke-width: 1.2; } .m-chart .mcma5 { fill: none; stroke: var(--c-ma5); stroke-width: 1; } .m-chart .mcma60 { fill: none; stroke: var(--c-ma60); stroke-width: 1; } .m-chart .mcbb { fill: var(--c-bb-fill); stroke: var(--c-bb-line); stroke-width: .6; } .m-chart .mcrsi { fill: none; stroke: var(--c-rsi); stroke-width: 1.2; } /* 결측 경계 — PC 의 `.cgap` 과 같은 토큰. 좁은 화면이라 글자는 안 붙이고 선만 긋는다 */ .m-chart .mcgap { stroke: var(--c-gap); stroke-width: .8; stroke-dasharray: 3 3; } /* 뜻이 있는 기준선(RSI 30 · 70) — 눈금선보다 진하고 점선이다 */ .m-chart .mcgd { stroke: var(--line-2); stroke-width: .6; stroke-dasharray: 3 3; } .m-chart .mcg { stroke: var(--line); stroke-width: .6; } .m-chart .mct { fill: var(--ink-3); font-size: var(--fs-micro); } .m-chart .mcx { stroke: var(--ink-2); stroke-width: .8; stroke-dasharray: 3 3; } .m-chart-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) 2px 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-tiny); color: var(--ink-2); } .m-chart-date { color: var(--ink-3); } .m-chart-price { font-size: var(--fs-icon); font-weight: 700; color: var(--ink); } .m-chart-ohlc { flex: 1 0 100%; color: var(--ink-3); font-size: var(--fs-mini); } .m-chart-note { margin: var(--sp-2) 0 0; color: var(--ink-3); font-size: var(--fs-mini); text-align: center; } /* ========================================================================== 선 차트 — PC · 모바일이 둘 다 쓴다 stockLineChart · stockMultiLineChart 가 그리는 SVG 의 모양과 마우스 오버 상자다. 원래 stock.css 에 있었는데 모바일 거시 화면(환율 · 금리 · 지수)이 같은 함수를 쓰게 되어 여기로 올렸다 — 두 벌이 되면 값이 갈린다(`.claude/rules/design.md` 의 `ui.css` 경계). 폭 하한(min-width: 40rem)만 stock.css 에 남겼다. 그것은 캔들이 가로로 스크롤되게 하는 PC 사정이고, 좁은 화면에서는 오히려 화면을 깨뜨린다. ========================================================================== */ .stock-chart-svg { width: 100%; height: auto; } .stock-chart-svg .cg { stroke: var(--line-soft); stroke-width: 1; } .stock-chart-svg .cgd { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; } .stock-chart-svg .clast { fill: var(--c-line); font-weight: 600; } .stock-chart-svg .cl { fill: var(--c-axis); font-size: var(--fs-label); } /* ---- 막대 + 선 두 축 차트 (2026-08-21 · MIN-97) ---- 0 기준선이 「들어옴」과 「나감」을 가른다 — 격자보다 진해야 그림에서 그 경계가 읽힌다 */ .stock-chart-svg .czero { stroke: var(--ink-3); stroke-width: 1; } /* 범례 점 — 막대는 「들어옴」 쪽 색, 선은 종가 흐름과 같은 색이다. .dot 이 currentColor 를 칠하므로 색만 준다 */ .stock-cmp-legend .cd-flow { color: var(--up); } .stock-cmp-legend .cd-line { color: var(--c-line); } .stock-chart-svg .cline { fill: none; stroke: var(--c-line); stroke-width: 1.4; } .stock-chart-svg .cavg { stroke: var(--c-avg); stroke-width: 1.4; stroke-dasharray: 5 4; } .stock-chart-svg .cavg-t { fill: var(--c-avg-t); } /* ---- 고정 눈금선 (2026-09-07 · MIN-279) ---- 시장 계기의 「시총 = 한 해 GDP」 · VIX 20 / 30 처럼 **판정이 아니라 눈금**인 선이다. 격자(.cg)보다는 보이고 값 선(.cline)보다는 흐려야 한다 — 값만큼 진하면 눈금이 신호로 읽힌다(규칙집 「기준선은 판정이 아니라 눈금」). */ .stock-chart-svg .cmark { stroke: var(--c-axis); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.55; } .stock-chart-svg .cmark-t { fill: var(--c-axis); font-size: var(--fs-mini); opacity: 0.75; } /* ---- 차트 위 표시(mark) — 13F 분기말을 얹는 자리 (2026-09-15 · MIN-302/303) ---- **`stock.css` 가 아니라 여기다** — 모바일도 같은 캔들 차트를 그리는데 PC 전용 파일에 있어서 표시가 색도 굵기도 없이 나갔다(선은 stroke 기본값이 none 이라 아예 안 보인다). 사채 발행 점선(ccbl · cebl)과 같은 성격이라 굵기 · 파선 간격을 맞추고, 방향 색은 국내 표기와 같다(늘림 up · 줄임 down). */ .stock-chart-svg .cmk { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; } .stock-chart-svg .cmkg.mkup .cmk { stroke: var(--up); } .stock-chart-svg .cmkg.mkdn .cmk { stroke: var(--down); } .stock-chart-svg .cmkt { font-size: var(--fs-nano); fill: var(--ink-2); } .stock-chart-svg .cmkg.mkup .cmkt { fill: var(--up); } .stock-chart-svg .cmkg.mkdn .cmkt { fill: var(--down); } /* **누를 수 있는 표시**는 투명한 띠가 표적이다 — 점선 1px 은 마우스로도 못 짚는다. `data-mark` 가 없는 표시(그냥 알리는 것)는 띠가 없어 「물음표 손」이다 */ .stock-chart-svg .cmkg[data-mark] { cursor: pointer; } .stock-chart-svg .cmkg:not([data-mark]) .cmk, .stock-chart-svg .cmkg:not([data-mark]) .cmkt { cursor: help; } .stock-chart-svg .cmkhit { fill: var(--ink); fill-opacity: 0; } .stock-chart-svg .cmkg[data-mark]:hover .cmkhit { fill-opacity: 0.05; } /* 고른 분기 — 띠가 남아 「지금 아래에 보이는 것이 이 분기」임을 말한다 */ .stock-chart-svg .cmkg.on .cmkhit { fill: var(--brand); fill-opacity: 0.14; } .stock-chart-svg .cmkg.on .cmk { stroke-width: 1.6; stroke-dasharray: none; } .stock-chart-svg .cmkg.on .cmkt { font-size: var(--fs-mini); font-weight: 700; } /* 분기 기둥(stockCandleChart 의 col) — 13F 의 「직전 분기말 ~ 이 분기말」 구간. 머리는 굵은 값(ccol1) · 작은 값(ccol2 · 방향색) · 분기(ccol3) 세 줄, 머리 막대(ccolt)는 방향색, 몸통은 옅게. 값은 분기 기둥 목업(2026-09-21 · 요청 us-flow-column 안 5)의 것이다 — 몸통 옅기 .09~.10 은 캔들이 그 위에서 읽히는 한계, 고른 것 .22 는 이웃 기둥과 갈리는 최소다 */ .stock-chart-svg .ccolb { fill: var(--ink-3); fill-opacity: 0.10; } .stock-chart-svg .ccol.mkup .ccolb { fill: var(--up); fill-opacity: 0.09; } .stock-chart-svg .ccol.mkdn .ccolb { fill: var(--down); fill-opacity: 0.09; } .stock-chart-svg .ccol.mkup .ccolt { fill: var(--up); } .stock-chart-svg .ccol.mkdn .ccolt { fill: var(--down); } .stock-chart-svg .ccol1 { font-size: var(--fs-body); font-weight: 700; fill: var(--ink); } .stock-chart-svg .ccol2 { font-size: var(--fs-label); } .stock-chart-svg .ccol3 { font-size: var(--fs-nano); fill: var(--ink-3); } /* 넷째 줄(t4) — 13F 화면의 「의원 n↑ n↓」. 분기(ccol3)와 같은 크기에 한 단 짙게 — 분기와 갈려 읽혀야 한다 */ .stock-chart-svg .ccol4 { font-size: var(--fs-nano); fill: var(--ink-2); } .stock-chart-svg .ccol.mkup .ccol2 { fill: var(--up); } .stock-chart-svg .ccol.mkdn .ccol2 { fill: var(--down); } .stock-chart-svg .ccol[data-mark] { cursor: pointer; } .stock-chart-svg .ccol:not([data-mark]) { cursor: help; } .stock-chart-svg .ccol.on .ccolb { fill-opacity: 0.22; } .stock-chart-svg .ccol.on .ccolt { height: 5px; } .stock-chart-svg .cmp { fill: none; stroke: currentColor; stroke-width: 1.4; } .stock-chart-svg .cdot { fill: currentColor; color: var(--c-line); stroke: var(--surface); stroke-width: 1.5; pointer-events: none; } .stock-cmp-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-2); font-size: var(--fs-mini); color: var(--ink-2); } .stock-cmp-legend .item { display: inline-flex; align-items: center; gap: var(--sp-2); } .stock-cmp-legend .dot { width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-round); background: currentColor; } .stock-chart-tip { position: absolute; z-index: var(--z-handle); background: var(--tip-bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.4rem 0.6rem; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); pointer-events: none; /* 캔들 값은 짧아 안 접히고, 깃발의 긴 사유만 상자 폭 안에서 접힌다 */ white-space: normal; max-width: 26rem; box-shadow: var(--shadow-pop); } .stock-chart-tip .tdot { display: inline-block; width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-round); background: currentColor; margin-right: var(--sp-1); } .stock-chart-hover { position: relative; cursor: crosshair; } .stock-empty { border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 2rem 1rem; margin: var(--sp-5) 0; text-align: center; background: var(--surface); } .stock-empty p { color: var(--ink-2); margin-bottom: 0.9rem; } .stock-cmp-s1 { color: var(--c-cmp-1); } .stock-cmp-s2 { color: var(--c-cmp-2); } .stock-cmp-s3 { color: var(--c-cmp-3); } .stock-cmp-s4 { color: var(--c-cmp-4); } .stock-cmp-s5 { color: var(--c-cmp-5); } .stock-cmp-s6 { color: var(--c-cmp-6); } /* 값 옆에 붙는 작은 부제(단위 · 기준일). PC 요약 카드와 모바일 m-stat 이 둘 다 쓴다 */ .stock-sub { font-size: var(--fs-mini); color: var(--ink-3); } /* ---- 대량보유 월별 흐름 ---- PC 공시 · 투자자 상세 · 모바일 투자자 상세 · 대가 상세(막대만)가 같이 쓴다(2026-09-02 · detail-timeline-mobile). 좁은 폭의 칸 너비는 mobile.css 의 `.m-body .hd-*` 가 맞춘다. 가운데(0)에서 취득은 오른쪽, 처분은 왼쪽으로 뻗는다 — 지수 · 업종 화면의 좌우 막대와 같은 뜻 체계다. 같은 뜻의 그림이 화면마다 다르면 읽는 법을 두 번 익혀야 한다 */ .hd-flow { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; margin-bottom: var(--sp-6); } .hd-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-6); font-size: var(--fs-cell); } .hd-row + .hd-row { border-top: 1px solid var(--line-soft); } .hd-row:not(.hd-head):hover { background: var(--row-hover); } .hd-head { background: var(--th); color: var(--ink-3); font-size: var(--fs-mini); font-weight: 600; } .hd-ym { flex: 0 0 4.5rem; font-variant-numeric: tabular-nums; } .hd-cnt { flex: 0 0 3rem; text-align: right; font-variant-numeric: tabular-nums; } .hd-diff { flex: 0 0 3.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .hd-holder { flex: 0 0 3.5rem; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* 막대 — 가운데를 기준으로 두 방향. flex 로 반씩 나눠 쓴다 */ .hd-bar { flex: 1 1 auto; display: flex; align-items: center; height: 12px; } .hd-head .hd-bar { height: auto; justify-content: center; color: var(--ink-3); } .hd-bar i { height: 100%; border-radius: var(--r-sm); } /* 처분은 왼쪽 절반의 오른쪽 끝에서 시작한다 — margin-left auto 가 그 일을 한다 */ .hd-bar i.down { margin-left: auto; background: var(--down); } .hd-bar i.up { margin-right: auto; background: var(--up); } /* ========================================================================== 가격 헤더 (MIN-159) — 상세 화면에서 가장 큰 값. 짝은 Display_model::getQuote() **값 계층을 마크업으로 굳힌 자리다.** 고치기 전에는 지금 값(장중가)이 화면에서 가장 작은 글씨였고 하루 전 종가가 가장 큰 글씨였다. 크기 순서가 곧 중요도 순서여야 한다 : 가격 > 등락 > 상태 > 출처 · 시각. ========================================================================== */ .stock-quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); } .stock-quote-state { font-size: var(--fs-cell); color: var(--ink-3); } .stock-quote-price { font-size: var(--fs-value-lg); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .stock-quote-rate { font-size: var(--fs-sec); font-weight: 700; font-variant-numeric: tabular-nums; } /* 시 · 고 · 저 · 거래량 · 출처 · 체결시각. **값이 아니라 값을 읽는 데 필요한 것**이라 작다 — 여기 문장을 늘어놓지 않는다. 정의 · 주석은 title 로 내린다 */ .stock-quote-sub { font-size: var(--fs-mini); color: var(--ink-3); } /* ========================================================================== 한 줄 지표 띠 (MIN-159) — 요약 카드(.stock-summary)를 한 줄로 접은 것 차트가 주인공인 화면(상세 셋)이 쓴다. 카드 아홉 장이 148px 를 먹고 차트를 화면 밖으로 밀어내던 자리다. 짝은 Display_model::getKeyline(). 카드와 다른 점 : 값 · 라벨이 같은 줄에 서고, 항목 사이를 세로줄로 가르고, 값이 없는 항목은 자리를 안 준다. ========================================================================== */ .stock-keyline { display: flex; flex-wrap: wrap; align-items: baseline; padding: var(--sp-2) 0; margin-bottom: var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); font-size: var(--fs-cell); line-height: 1.6; } .stock-keyline-item { display: inline-flex; align-items: baseline; gap: var(--sp-1); padding: 0 var(--sp-5); } /* 첫 항목과 줄이 바뀐 첫 항목에는 세로줄이 없어야 하는데, flex-wrap 은 어느 항목이 줄머리인지 CSS 로 알려 주지 않는다. 줄이 바뀐 자리에 세로줄이 하나 뜨는 것은 그대로 둔다 — 경계선이 옅어(`--line-soft`) 눈에 걸리지 않고, 이것을 없애려면 JS 로 재야 한다 */ .stock-keyline-item + .stock-keyline-item { border-left: 1px solid var(--line-soft); } .stock-keyline-label { color: var(--ink-3); } .stock-keyline-item b { font-size: var(--fs-body); font-variant-numeric: tabular-nums; } .stock-keyline-sub { color: var(--ink-3); font-size: var(--fs-mini); } /* ========================================================================== 칩과 시황 브리핑 카드 — PC · 모바일이 둘 다 쓴다 경제 뉴스의 급상승 키워드 · 분류 탭이 칩이고, 오늘의 시황이 nb-card 다. 원래 stock.css 에 있었는데 모바일 편이 같은 것을 쓰게 되어 올렸다. 모바일에서 손가락에 맞게 키우는 것은 mobile.css 가 이 규칙을 덮어 한다. ========================================================================== */ .stock-chip { border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); padding: 2px var(--sp-5); font-size: var(--fs-cell); color: var(--ink-2); cursor: pointer; } .stock-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .stock-chip:hover { background: var(--row-hover); } /* 고른 것은 `.active` 다. **`.on` 도 같이 받는다** — 기간 칩은 PC 가 세그먼트 단추 (`.stock-seg-btn.on`)로, 모바일이 칩으로 그리는데 상태 값은 `Stock\Market::makePeriod()` 한 곳에서 나와 둘 다 "on" 이다. 사채→내부자의 「건 목록 / 군집 매수」도 JS 가 `.on` 을 토글한다. 이름을 한쪽으로 몰면 그 자리들이 조용히 활성 표시를 잃는다 (2026-08-25 · 모바일 지수에서 고른 기간이 나머지와 똑같이 보였다) */ .stock-chip.active, .stock-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; } /* 칩 안의 개수. 「업종 46」처럼 눌러 보기 전에 크기를 알려 준다 — 숫자는 이름보다 한 급 흐리게 두어야 칩의 이름이 먼저 읽힌다 */ .stock-chip em { font-style: normal; font-weight: 400; color: var(--ink-3); } .stock-chip.active em, .stock-chip.on em { color: var(--brand-ink); opacity: 0.7; } /* 「신규 3」 — 칩의 개수 옆에 한 칸 더 (signal-repeat-survey). 개수가 흐린 것과 달리 이쪽은 포인트 색이다 : 훑는 사람이 찾는 수가 이것이다 */ .stock-chip em.new { color: var(--brand); font-weight: 600; } .stock-chip.active em.new, .stock-chip.on em.new { color: var(--brand-ink); opacity: 1; } .stock-chip-row .stock-sub { margin-left: auto; } /* ---- 서브탭 (stock-subtab) — 한 탭 안을 다시 가르는 두 번째 층 (2026-08-23 · MIN-147) ---- 첫 층(stock-tab)은 밑줄형 링크라 한 화면에 두 벌이 있으면 어느 것이 바깥인지 모른다. 두 번째 층은 알약 모양 단추로 둔다 — 칩(stock-chip)과 같은 꼴이되 **한 벌 가운데 하나**라는 뜻이 드러나게 붙여 세우고 활성을 brand 로 채운다. 패널은 .stock-subpanel 이고 안 보이는 것은 d-none 이다 */ .stock-subtab { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); margin-bottom: var(--sp-5); background: var(--line-soft); border-radius: var(--r-lg); width: fit-content; max-width: 100%; } /* **칸이 단추일 수도 링크일 수도 있다**(2026-08-31 · MIN-198) — ajax 로 절을 채우는 화면은 화면 안에서 갈아 끼우므로 단추이고, 서버가 절을 그리는 화면은 주소가 바뀌어야 하므로 링크다. 보이는 것은 같아야 해서 규칙을 한 벌로 두고 선택자만 둘을 함께 적는다 */ .stock-subtab button, .stock-subtab a { border: 0; border-radius: var(--r); background: transparent; color: var(--ink-2); padding: var(--sp-2) var(--sp-6); font-size: var(--fs-body); line-height: 1.4; cursor: pointer; text-decoration: none; } .stock-subtab button:hover, .stock-subtab a:hover { color: var(--ink); background: var(--surface); text-decoration: none; } .stock-subtab button.on, .stock-subtab a.on { background: var(--surface); color: var(--brand); font-weight: 700; box-shadow: var(--shadow); } .stock-subtab button:focus-visible, .stock-subtab a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* 칸 안의 건수 · 보조말 — 칩과 같은 규칙(이름이 먼저 읽히게 한 급 흐리게) */ .stock-subtab button em, .stock-subtab a em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: var(--sp-1); } .stock-subtab button.on em, .stock-subtab a.on em { color: var(--brand-ink); opacity: 0.7; } /* ---- 정렬 가능한 열 머리 (stock-th-sort) — 서버가 찍은 표용 (2026-08-27 · MIN-191) ---- DataTables 표는 제 정렬 UI 를 갖고 있다. 이것은 **행이 수십 개뿐이라 서버가 한 번에 찍는 표** (신호 성과 · 담기 계획 · 계좌)를 위한 것이고, 클래스는 `stockSortable()` 이 붙인다 — CSS 를 손으로 적는 자리가 아니다. 눌러도 되는 열인지가 보여야 해서 쉼표(↕)를 늘 띄워 두고 활성 열만 방향 화살표로 바꾼다(안 띄우면 「이 표는 정렬된다」를 알 길이 마우스뿐이다) */ th.stock-th-sort { cursor: pointer; user-select: none; } th.stock-th-sort::after { content: "\2195"; margin-left: var(--sp-1); opacity: 0.35; font-weight: 400; } th.stock-th-sort:hover { color: var(--brand); } th.stock-th-sort:hover::after { opacity: 0.7; } th.stock-th-sort.is-asc::after { content: "\25B2"; opacity: 1; } th.stock-th-sort.is-desc::after { content: "\25BC"; opacity: 1; } th.stock-th-sort.is-asc, th.stock-th-sort.is-desc { color: var(--brand); } th.stock-th-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } /* 손가락으로 누르는 자리는 44px (--m-tap) — 열 머리는 글자 한 줄이라 그냥 두면 모자란다. 상자를 진짜로 키운다(`::after` 로 넓히는 수는 이웃 열이 그 자리를 가져간다). 실측 390px 폭에서 38px → **45.5px** (2026-08-27 · MIN-191). 쓰는 화면은 아직 PC 뿐이지만 서버가 찍는 표는 모바일에도 있을 수 있어(m-rate) 미리 재 두었다 */ .m-body th.stock-th-sort { padding-top: var(--sp-3); padding-bottom: var(--sp-3); line-height: 1.8; } /* ---- 시황 정리본 (nb-*) — PC · 모바일이 둘 다 쓴다 (2026-08-23 · MIN-142 에 다시 짬) ---- 머리(제목 + 날짜 이동) → 요약은 문장마다 한 줄 → 분류 카드 격자 → 보고서 · 근거 접이 순으로 계층을 세운다 — 전부 같은 글자 크기의 문단으로 두지 않는다 */ .nb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .nb-head .stock-sec { flex: 1 1 auto; margin-bottom: var(--sp-3); } .nb-nav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-4); } .nb-nav .k-input { width: auto; } /* ---- 성적 알림띠 (perf-front) — 「이 화면이 실제로 어땠나」를 맨 위에 (2026-09-04 · MIN-245) ---- Bootstrap `alert` 위에 글자 크기와 목록 여백만 얹는다. 색을 다시 정하지 않는 것은 `token.css` 의 「Bootstrap 다리」(`--bs-warning-rgb`)가 다크 모드까지 이미 잇고 있어서다. **접이(`stock-note` · `details`)로 두지 않는다** — 접으면 안 열고, 안 열면 성적이 또 옆방이 된다. PC · 모바일이 같은 마크업을 쓰므로 `ui.css` 다 */ .perf-front { font-size: var(--fs-cell); line-height: 1.7; } .perf-front > p { font-size: var(--fs-cell); margin-bottom: var(--sp-2); } .perf-front > p:last-child { margin-bottom: 0; } .perf-front ul { padding-left: var(--sp-6); margin: var(--sp-2) 0; } .perf-front li { margin-bottom: var(--sp-1); } .nb-card { padding: var(--sp-6) var(--sp-7); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); margin-bottom: var(--sp-6); } /* 업종 · 테마 영향 (MIN-150) — 한 줄씩 : 배지(방향) · 종류 · 이름 · 그날 등락 · 근거. 배지색은 방향이다 — 호재 up · 악재 down · 혼재 흐림(신호 배지 .sig-* 와 같은 약속). 2026-08-25(MIN-166)에 **정리본 절 안으로** 들어갔다 — 그 절만 글이 아니라 자료로 그리는 것은 글에 없는 것(업종 · 테마 화면 링크 · 그날 실제 등락)이 여기 붙어 있어서다 */ .nb-impact-list { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4); } .nb-impact-list li { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "badge kind name rate" "text text text text"; align-items: center; column-gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-cell); color: var(--ink-2); } .nb-impact-list li:first-child { border-top: 0; } .nb-impact-list li > .stock-badge, .nb-impact-list li > .m-badge { grid-area: badge; } .nb-impact-list li > i { grid-area: kind; font-style: normal; font-size: var(--fs-mini); color: var(--ink-3); } .nb-impact-list li > b { grid-area: name; font-size: var(--fs-body); color: var(--ink); } .nb-impact-list li > .nb-imp-rate { grid-area: rate; font-variant-numeric: tabular-nums; font-weight: 600; } .nb-impact-list li > p { grid-area: text; margin: var(--sp-1) 0 0; line-height: 1.55; } .stock-badge.good, .m-badge.good { background: var(--up-soft); color: var(--up); } .stock-badge.bad, .m-badge.bad { background: var(--down-soft); color: var(--down); } .stock-badge.mix, .m-badge.mix { background: var(--line-soft); color: var(--ink-2); } /* 정리본 절 — **절마다 접이 하나**이고 화면은 이것 하나로 본다 (MIN-166). 나눔은 텔레그램이 보내는 것과 같다(util/Brief). 접힌 제목 줄들이 곧 목차라, 표시와 글자 수가 「무엇이 얼마나 들었나」를 펼치기 전에 말한다. **색은 펼침에만 쓴다** — 절마다 다른 색을 주면 여섯 색이 뜻 없이 늘어서고, 등락색(빨강 · 파랑)을 빌려 쓰면 「색과 이름의 규약」(등락색은 등락에만)이 깨진다. 지금 펴 본 절만 브랜드색으로 선다 */ .nb-sections { margin: 0; } .nb-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); } .nb-sec-head b { font-size: var(--fs-body); color: var(--ink); } .nb-sec-head em { font-style: normal; font-weight: 400; font-size: var(--fs-mini); color: var(--ink-3); } .nb-sec { margin-bottom: var(--sp-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); /* 접이 안의 배경이 모서리를 넘지 않게 */ overflow: hidden; } .nb-sec > summary { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--th); cursor: pointer; font-size: var(--fs-cell); font-weight: 600; color: var(--ink); } .nb-sec > summary:hover { background: var(--brand-soft); } .nb-sec > summary i { font-style: normal; font-size: var(--fs-body); } /* 글자 수는 오른쪽 끝으로 — 제목 길이가 절마다 달라도 세로로 줄이 선다 */ .nb-sec > summary em { margin-left: auto; font-style: normal; font-weight: 400; font-size: var(--fs-mini); color: var(--ink-3); } .nb-sec[open] { border-color: var(--brand-line); } .nb-sec[open] > summary { background: var(--brand-soft); border-bottom: 1px solid var(--brand-line); color: var(--brand-ink); } .nb-sec > .nb-report-body { margin: 0; padding: var(--sp-4); } /* 요약 절은 한 급 크다 — 그날을 세 문장으로 말하는 자리라 여기부터 읽는다 */ .nb-sec.sum > .nb-report-body { font-size: var(--fs-sec); line-height: 1.7; color: var(--ink); } /* 보고서 · 근거 — 카드 아래 한 줄 선 밑에 접이 둘 */ .nb-more-row { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); } .nb-more-row > details + details { margin-top: var(--sp-3); } .nb-report, .nb-src { margin: 0; font-size: var(--fs-cell); color: var(--ink-2); } .nb-report > summary, .nb-src > summary { cursor: pointer; font-size: var(--fs-cell); font-weight: 600; color: var(--brand-ink); } /* 전체 보고서 — stockMarkdown 이 그린다(stock.js). 절 제목(h4)이 본문보다 커야 한다 */ .nb-report-body { margin-top: var(--sp-4); line-height: 1.7; } .nb-report-body h4 { margin: var(--sp-7) 0 var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); font-size: var(--fs-sec); color: var(--ink); } .nb-report-body h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .nb-report-body h5, .nb-report-body h6 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-body); color: var(--ink); } .nb-report-body p { margin: 0 0 var(--sp-2); } .nb-report-body ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-7); } .nb-report-body li { margin-bottom: var(--sp-1); } .nb-report-body b { color: var(--ink); } /* 근거 기사 — 분류별 묶음 */ .nb-src-cat { margin-top: var(--sp-4); } .nb-src-cat b { display: block; font-size: var(--fs-cell); color: var(--ink-2); } .nb-src-cat em { font-style: normal; font-weight: 400; color: var(--ink-3); } .nb-src-cat ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-6); font-size: var(--fs-mini); } .nb-src-cat li { margin-bottom: 2px; } /* 원문 그대로 보이는 글 — 프롬프트 · stderr 처럼 줄바꿈과 공백이 뜻인 글. 모달 안에 들어가므로 가로로 넘치지 않게 줄을 접는다(pre-wrap) */ .stock-pre { white-space: pre-wrap; word-break: break-word; margin: 0; padding: var(--sp-3); font-size: var(--fs-cell); line-height: 1.6; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); max-height: 60vh; overflow: auto; } .nb-rate { color: var(--up); } .nb-more { cursor: help; } /* ========================================================================== 지수 분류별 비교 (mk-*) — PC · 모바일이 둘 다 쓴다 막대는 가운데(0)에서 좌우로 뻗고 길이는 그 분류 안의 최댓값 대비다. .mk-grid 는 auto-fit 이라 좁은 화면에서 저절로 한 칸이 된다 — 다만 **한 칸이 된 뒤 그 칸이 안 줄어든다**(auto-fit 은 칸 수만 줄이고 minmax 의 min 은 바닥이다). 20rem = 320px 라 320px 폰에서 14px 삐져나갔다(2026-08-26 · mobile-fit-audit) — min() 으로 바닥을 푼다. 모바일에서 따로 덮는 것은 이름 칸 폭과 목록 높이뿐이다(mobile.css). ========================================================================== */ .mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-8); } .mk-col { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .mk-col-head { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line-soft); } .mk-col-head strong { font-size: var(--fs-head); } .mk-breadth { display: flex; gap: var(--sp-3); font-size: var(--fs-cell); } .mk-breadth b { font-weight: 700; } .mk-updown { margin-left: auto; font-size: var(--fs-cell); font-weight: 700; } .mk-list { max-height: 26rem; overflow-y: auto; padding: var(--sp-2) 0; } .mk-row { display: flex; align-items: center; gap: var(--sp-3); padding: 3px var(--sp-6); font-size: var(--fs-cell); } .mk-row:hover { background: var(--row-hover); } .mk-name { flex: 0 0 9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); } .mk-bar { position: relative; flex: 1 1 auto; height: 12px; border-radius: var(--r-sm); background: var(--line-soft); } .mk-bar::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-2); } .mk-bar i { position: absolute; top: 2px; bottom: 2px; border-radius: var(--r-sm); } .mk-bar i.up { left: 50%; background: var(--up); } .mk-bar i.down { right: 50%; background: var(--down); } .mk-bar i.none { display: none; } .mk-perf { flex: 0 0 4.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } /* ---- 「종목」 공용 탭 줄 (Display_model::setItemTab) ---- PC 와 모바일이 **같은 것**을 쓴다. 여섯 화면(회사 · 사채 · 대량보유 · 실적 발표 · 수급 스크리너 · ETF · 미국 종목)이 좌측 메뉴에서 한 항목으로 접히면서, 서로를 오가는 길이 이 줄 하나가 되었다 — stock.css 와 mobile.css 에 두 벌로 두면 값이 갈라진다. 1단(자산 갈래)은 붙은 단추 한 벌로, 2단(보는 방법)은 밑줄 링크로 모양을 가른다. 같은 모양이면 둘이 같은 층위로 읽힌다 */ .stock-itemnav { margin: var(--sp-5) 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); } .stock-itemnav-top { display: inline-flex; align-self: flex-start; } .stock-itemnav-top > a { padding: 0 var(--sp-7); height: 34px; display: inline-flex; align-items: center; gap: var(--sp-1); border: 1px solid var(--line-2); border-left-width: 0; background: var(--surface); color: var(--ink-2); font-size: var(--fs-body); text-decoration: none; white-space: nowrap; } .stock-itemnav-top > a:first-child { border-left-width: 1px; border-radius: var(--r) 0 0 var(--r); } .stock-itemnav-top > a:last-child { border-radius: 0 var(--r) var(--r) 0; } .stock-itemnav-top > a:hover { color: var(--ink); } .stock-itemnav-top > a.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; } .stock-itemnav-top > a.on + a { border-left-color: var(--brand); } .stock-itemnav-sub { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); border-bottom: 1px solid var(--line); } .stock-itemnav-sub > a { padding: var(--sp-2) var(--sp-1); display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink-2); font-size: var(--fs-body); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .stock-itemnav-sub > a:hover { color: var(--ink); } .stock-itemnav-sub > a.on { color: var(--brand); font-weight: 700; border-bottom-color: var(--brand); } /* 두 단을 한 줄로 합친 꼴(MIN-315 · 안 A) — 갈래 링크가 줄을 차지하고 1단(나라)은 작은 단추로 줄 끝. 밑줄은 줄 전체에 긋는다 — 링크의 `margin-bottom: -1px` 이 그 선에 얹힌다 */ .stock-itemnav-row { display: flex; align-items: flex-end; gap: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--line); } .stock-itemnav-row > .stock-itemnav-sub { flex: 1 1 auto; min-width: 0; border-bottom: 0; } .stock-itemnav-nat { flex: none; align-self: center; } .stock-itemnav-nat > a { height: 28px; padding: 0 var(--sp-5); font-size: var(--fs-cell); } /* 모바일 짝이 없는 화면 표식. 누르면 PC 화면이 뜬다는 것을 미리 알린다 (「더보기」 시트의 .m-sheet-pc 와 같은 뜻이다) */ .stock-itemnav-pc { font-style: normal; font-size: var(--fs-micro); line-height: 1; padding: 2px 3px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink-3); } /* 모바일은 폭이 좁다 — 넘치면 접지 말고 옆으로 밀어 본다(줄이 두 겹이 되면 화면 위쪽을 먹는다) */ .m-body .stock-itemnav { margin: var(--sp-3) var(--sp-4) var(--sp-4); gap: var(--sp-2); } .m-body .stock-itemnav-top { max-width: 100%; overflow-x: auto; } .m-body .stock-itemnav-top > a { padding: 0 var(--sp-5); font-size: var(--fs-cell); } .m-body .stock-itemnav-sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .m-body .stock-itemnav-sub::-webkit-scrollbar { display: none; } /* 합친 줄 — 나라 단추를 **앞**에 고정하고 갈래 링크만 민다(끝에 두면 밀어야 보인다). 밑줄은 밀리는 줄 자신이 긋는다 — 넘침을 자르는 줄이라 줄 밖 선에 링크 밑줄이 못 얹힌다 */ .m-body .stock-itemnav-row { align-items: center; border-bottom: 0; gap: var(--sp-3); } .m-body .stock-itemnav-row > .stock-itemnav-sub { border-bottom: 1px solid var(--line); } .m-body .stock-itemnav-nat { order: -1; } .m-body .stock-itemnav-sub > a { font-size: var(--fs-cell); } /* ================= 주요 사채 카드 ================= **PC · 모바일이 둘 다 쓴다**(2026-08-21 · MIN-127) — 모바일 공시 화면의 「주요 사채」 탭이 같은 카드를 쓰므로 두 벌로 두지 않고 여기에 둔다(`.claude/rules/design.md` 의 `ui.css` 경계). 그리는 함수도 한 벌이다 — public/js/stock.js 의 stockLoanCard(). */ /* ---- 주요 사채 정보 카드 ---- 표가 아니라 읽는 문장이다 — 한 건당 한 문장 요약 + 보조 수치. 카드 전체가 원문 공시로 가는 클릭 영역이라 커서를 준다 */ .lc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); gap: var(--sp-4); } .lc-card { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; } .lc-card:hover { background: var(--row-hover); } .lc-head { display: flex; align-items: center; gap: var(--sp-2); } /* CB · EB 구분은 차트의 발행 표시와 같은 색(--c-cb 주황 · --c-eb 청록)이다 — 같은 뜻은 같은 색 */ .lc-kind { flex: 0 0 auto; font-size: var(--fs-mini); font-weight: 700; } .lc-kind-cb { color: var(--c-cb); } .lc-kind-eb { color: var(--c-eb); } .lc-com { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lc-badges { display: flex; gap: var(--sp-1); flex: 0 0 auto; } /* 배지 4종 — 위험한 쪽부터 오버행(빨강) · 청구임박(노랑) · 대규모(브랜드) · 만기임박(중립) */ .lc-b-over { background: var(--up-soft); color: var(--up); } .lc-b-start { background: var(--warn-soft); color: var(--warn); } .lc-b-size { background: var(--brand-soft); color: var(--brand-ink); } .lc-b-mtd { background: var(--line-soft); color: var(--ink-2); } .lc-dday { margin-left: auto; flex: 0 0 auto; font-size: var(--fs-cell); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .lc-lead { margin: var(--sp-2) 0 0; font-size: var(--fs-cell); } .lc-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-mini); color: var(--ink-3); } .lc-more { margin: var(--sp-5) 0; text-align: center; } /* ================= 오늘의 공시 배지 ================= **PC · 모바일이 둘 다 쓴다**(2026-08-21 · MIN-127) — 그리는 함수(stockDartCls · stockDartType · stockDartName)가 이미 stock.js 한 벌인데 CSS 만 PC 쪽에 있었다. */ /* ---- 오늘의 공시 배지 (2026-08-21 · MIN-100) ---- 시장 구분(유 · 코 · 넥 · 기)은 **글자 한 칸**이라 알약이 작아야 줄이 지저분해지지 않는다. 유형(정기 · 주요사항 · 지분)은 옅게, 정정만 눈에 띄게 둔다 — 「고쳐 낸 것」이 이 표에서 유일하게 판단이 갈리는 값이다. 거래소 조치 배지(`.stock-act`)와는 자리가 달라 테두리로 가를 필요가 없다 */ .dt-cls-Y { background: var(--down-soft); color: var(--down-ink); } .dt-cls-K { background: var(--ok-soft); color: var(--ok); } .dt-cls-N { background: var(--line-soft); color: var(--ink-3); } .dt-cls-E { background: var(--line-soft); color: var(--ink-3); } .dt-ty-A001 { background: var(--brand-soft); color: var(--brand-ink); } .dt-ty-B001 { background: var(--warn-soft); color: var(--warn); } .dt-ty-D001 { background: var(--line-soft); color: var(--ink-2); } .dt-fix { background: var(--up-soft); color: var(--up); } /* 우리 표로 가는 링크. 보고서명 뒤에 붙어 원문과 우리 화면을 잇는다 */ .dt-ours { margin-left: var(--sp-1); font-size: var(--fs-mini); white-space: nowrap; } /* ---- 금리 · 일정 지표 표의 값 (PC .rt-tbl · 모바일 .m-rate · 2026-08-23 · MIN-137) ---- 값 단추는 시계열이 있어 누르면 추이가 열리는 칸이다 — 점선 밑줄이 「누를 수 있다」이고 파생값(계산)과 그 나라에 없는 계열(—)은 단추가 아니다. ⓘ 는 눈금 툴팁 — 판정이 아니라 자 */ .rt-val { border: 0; border-bottom: 1px dashed var(--brand-line); padding: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; } .rt-val:hover, .rt-val.on { color: var(--brand-ink); border-bottom-style: solid; } .rt-val-static { font-weight: 700; } .rt-none { color: var(--ink-3); } .rt-info { margin-left: 2px; color: var(--ink-3); font-size: var(--fs-mini); cursor: help; } /* ---- 조회 조건의 라벨 + 입력 묶음 (2026-08-25) ---- `.stock-search` 는 flex-wrap 이라 라벨과 그 입력이 각각 항목이다 — 줄이 접히는 자리가 **둘 사이**로 떨어지면 라벨만 앞 줄 끝에 남아 짝이 끊긴다(종목의 「보유 자료」 · 재무의 「부채비율 [이상] ~」 에서 물결만 남던 것). 둘을 이 칸으로 묶으면 한 덩이로 접힌다. CSS 로는 못 막는다 — flex 는 항목 단위로 접히므로 마크업에서 묶어야 한다 */ .stock-field { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; } /* 묶음 안에서는 라벨의 왼쪽 여백을 없앤다 — 그 여백은 항목끼리 떨어뜨리는 몫이었다 */ .stock-field > label { margin: 0; } /* 건수 0 인 칩 — 지우지 않고 한 단 물린다(2026-08-25). 태그 화면에 0 건이 서른 개 넘게 섞여 있어 있는 것을 가렸다. 누를 수는 있다(빈 결과가 답인 물음도 있다) */ .stock-chip.none { border-color: var(--line); color: var(--muted); } .stock-chip.none em { color: var(--muted); } .stock-chip.none:hover { color: var(--ink-3); } /* ---- 한국어 줄바꿈 (2026-08-25) ---- 기본값(word-break: normal)은 한글을 **글자 단위로** 끊는다 — 「등락률」이 등락 / 률, 「거래대금」이 거래 / 대금, 「정상」이 정 / 상 으로 갈렸다(다섯 화면 마흔네 곳, 대부분 표 머리글). keep-all 은 낱말 안에서 안 끊는다. 대신 끊을 자리가 없는 긴 글자열(코드 · 주소)이 칸을 넘칠 수 있어 break-word 를 함께 준다 — 그때만 낱말 안에서 끊는다 */ body { word-break: keep-all; overflow-wrap: break-word; } /* ─── 종목 AI 평가 카드 (MIN-174) ────────────────────────────────── PC · 모바일이 **같은 마크업**(stockAiEvalCard · public/js/stock.js)을 쓰므로 규칙도 한 벌이다. 폭에 따라 가격 셋과 강점 · 약점 · 주의가 접히는 것만 다르다(auto-fit). 색은 이 저장소의 등락색 약속을 그대로 따른다 — 매수 붉음(--up) · 매도 푸름(--down) · 보유 회색. 점수 막대도 같은 색이라 등급과 점수가 서로 다른 말을 하지 않는다. */ .ai-card { margin-bottom: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); font-size: var(--fs-body); } .ai-body { padding: var(--sp-6); } .ai-foot { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line-soft); } /* 빈 상태 · 도는 중 · 오류는 본문 없이 한 덩이다 */ .ai-empty { padding: var(--sp-6); } .ai-empty > b { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-head); color: var(--ink); } .ai-empty > p { margin: 0 0 var(--sp-4); font-size: var(--fs-cell); color: var(--ink-2); line-height: 1.6; } .ai-card.empty .ai-note, .ai-card.busy .ai-note, .ai-card.err .ai-note { margin: 0; padding: 0 var(--sp-6) var(--sp-5); } /* 평가가 아직 없는 카드는 한 줄이다(ux-company-info · 2026-09-16) — 설명 두 줄 · 단추 · 면책이 138px 를 먹어 상세의 차트를 밀었다. 설명은 줄이 넘치면 말줄임으로 자르고 전문은 올리면 뜬다 */ .ai-card.empty .ai-empty { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6) var(--sp-2); } .ai-card.empty .ai-empty > b { margin: 0; white-space: nowrap; } .ai-card.empty .ai-empty > p { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ai-card.empty .ai-empty > .btn { flex: none; } .ai-card.empty .ai-note { padding-bottom: var(--sp-3); } .m-body .ai-card.empty .ai-empty { flex-wrap: wrap; } .m-body .ai-card.empty .ai-empty > p { flex-basis: 100%; white-space: normal; } .ai-err { color: var(--up); } /* 제목 줄 — **끝난 카드에도 반드시 있다.** 없으면 등급 배지부터 시작해서, 이 덩이가 AI 가 쓴 것인지 맨 아래 면책까지 내려가야 안다 */ .ai-title { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .ai-title > b { font-size: var(--fs-head); color: var(--ink); } /* 머리 — 등급 · 점수. **등급이 앞이고 크다**(ai-score-wobble · 2026-09-02) — 재현되는 것이 등급이고 점수는 같은 날에도 ±8 이 갈린다. 전에는 점수가 19px · 등급이 15px 라 사람이 숫자를 먼저 읽었다 */ .ai-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .ai-grade { padding: var(--sp-2) var(--sp-5); border-radius: var(--r-pill); font-size: var(--fs-title); font-weight: 700; letter-spacing: .02em; } .ai-grade.buy { background: var(--up-soft); color: var(--up-ink); } .ai-grade.hold { background: var(--line-soft); color: var(--ink-2); } .ai-grade.sell { background: var(--down-soft); color: var(--down-ink); } .ai-score { display: flex; align-items: center; gap: var(--sp-3); min-width: 160px; } .ai-score-bar { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; position: relative; } .ai-score-bar > i { display: block; height: 100%; border-radius: var(--r-pill); } .ai-score-bar > i.buy { background: var(--up); } .ai-score-bar > i.hold { background: var(--muted); } .ai-score-bar > i.sell { background: var(--down); } /* 흔들리는 폭 — 막대 위에 반투명 띠로. 「이 안 어디든 나올 수 있다」를 숫자보다 먼저 보게 한다 */ .ai-score-bar > u { position: absolute; top: 0; bottom: 0; background: var(--ink); opacity: .18; } .ai-score > b { font-size: var(--fs-sec); color: var(--ink); font-variant-numeric: tabular-nums; } .ai-score > b > em { font-style: normal; font-size: var(--fs-mini); color: var(--ink-3); margin-left: 1px; } .ai-pm { font-size: var(--fs-mini); color: var(--ink-3); font-variant-numeric: tabular-nums; } .ai-wobble { margin: var(--sp-2) 0 0; font-size: var(--fs-tiny); color: var(--ink-3); } /* 오늘 것이 아닐 때. 흐리게 두지 않는다 — 낡은 판단을 지금 것으로 읽는 것이 이 카드의 가장 큰 위험이다 */ .ai-old { padding: 2px var(--sp-3); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-mini); font-weight: 600; } .ai-when { margin-left: auto; font-size: var(--fs-mini); color: var(--ink-3); } .ai-summary { margin: var(--sp-4) 0 0; font-size: var(--fs-sec); line-height: 1.6; color: var(--ink); } /* 가격 셋 — 값 아래에 **근거 이름이 늘 붙는다.** 근거를 감추면 AI 가 지어낸 숫자와 구분할 수 없다 */ .ai-price-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); } .ai-price { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--th); } .ai-price-label { display: block; font-size: var(--fs-label); color: var(--ink-3); } .ai-price > b { display: block; margin: 2px 0; font-size: var(--fs-value); font-variant-numeric: tabular-nums; } .ai-price > b > em { font-style: normal; font-size: var(--fs-mini); color: var(--ink-3); margin-left: 2px; } .ai-price-why { display: block; font-size: var(--fs-mini); color: var(--ink-2); } .ai-price.buy > b { color: var(--ink); } .ai-price.target > b { color: var(--up); } .ai-price.stop > b { color: var(--down); } .ai-base { margin: var(--sp-3) 0 0; font-size: var(--fs-mini); color: var(--ink-3); } /* 강점 · 약점 · 주의 */ .ai-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); } .ai-col { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--th); } .ai-col > b { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-cell); } .ai-col.good > b { color: var(--up); } .ai-col.bad > b { color: var(--down); } .ai-col.warn > b { color: var(--warn); } .ai-col ul { margin: 0; padding-left: var(--sp-6); font-size: var(--fs-cell); color: var(--ink-2); line-height: 1.6; } .ai-col li { margin-bottom: var(--sp-1); } /* 봐야 할 뉴스 · 공시 — 방향 배지는 정리본의 업종 · 테마 영향과 같은 것을 쓴다(.stock-badge good/bad/mix). 제목 줄이 붙는 것은 이 목록이 시장마다 다른 것이기 때문이다(국내는 기사 · 미국은 8-K 공시 · MIN-175) */ .ai-news-h { display: block; margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-cell); } .ai-news { list-style: none; margin: 0; padding: 0; } .ai-news li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "badge title press" "text text text"; align-items: center; column-gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-cell); } .ai-news li:first-child { border-top: 0; } .ai-news li > .stock-badge, .ai-news li > .m-badge { grid-area: badge; } .ai-news li > a { grid-area: title; color: var(--ink); } .ai-news li > i { grid-area: press; font-style: normal; font-size: var(--fs-mini); color: var(--ink-3); } .ai-news li > p { grid-area: text; margin: var(--sp-1) 0 0; color: var(--ink-2); line-height: 1.55; } /* 통과했지만 버린 것이 있을 때의 한 줄 */ .ai-drop { margin: var(--sp-3) 0 0; font-size: var(--fs-mini); color: var(--ink-3); } /* 면책 — 카드마다 반드시 한 줄. 등급 · 목표가를 내는 화면이라 이 줄이 규격의 일부다 */ .ai-note { margin: 0; font-size: var(--fs-mini); color: var(--ink-3); line-height: 1.55; } .ai-foot > .ai-note { flex: 1; } .ai-foot > .btn { flex: none; } /* 접힌 카드(2026-09-16 · ux-company-info) — 끝난 평가는 결론 한 줄로 서고 근거는 펼쳐서 본다. 펼친 카드가 1,105px 라 상세 화면의 차트를 첫 화면 밖으로 밀었다. 머리는 flex 라 ::marker 가 사라지므로 「근거 보기 ▾」를 직접 붙인다 */ .ai-fold > .ai-sum { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) var(--sp-6); list-style: none; cursor: pointer; } .ai-fold > .ai-sum::-webkit-details-marker { display: none; } .ai-fold > .ai-sum:hover { background: var(--row-hover); } .ai-fold[open] > .ai-sum { border-bottom: 1px solid var(--line-soft); } .ai-sum-t { font-size: var(--fs-head); color: var(--ink); } .ai-sum .ai-grade { padding: 2px var(--sp-4); font-size: var(--fs-body); } .ai-sum-score { font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; } .ai-sum-score em { font-style: normal; font-weight: 400; font-size: var(--fs-mini); color: var(--ink-3); } .ai-sum-score i { font-style: normal; font-weight: 400; font-size: var(--fs-mini); color: var(--ink-3); } .ai-sum-text { flex: 1 1 18rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); } .ai-sum-price { font-size: var(--fs-cell); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .ai-sum-price b { font-weight: 600; } .ai-sum-more { font-size: var(--fs-tiny); color: var(--brand); white-space: nowrap; } .ai-sum-more::after { content: " \25BE"; display: inline-block; transition: transform .15s; } .ai-fold[open] .ai-sum-more::after { transform: rotate(180deg); } .ai-fold[open] .ai-sum-text { white-space: normal; } /* 펼친 몸통의 제목 · 등급 · 한 문장은 접힌 줄과 같은 말이라 감춘다 — 평가 시각 · 모델(.ai-when)만 남긴다 */ .ai-fold > .ai-body > .ai-title > b, .ai-fold > .ai-body > .ai-title > .ai-old { display: none; } .ai-fold > .ai-body > .ai-head { display: none; } .ai-fold > .ai-body > .ai-summary { display: none; } /* 모바일은 한 문장이 잘리면 읽을 길이 없다 — 줄을 바꾼다 */ .m-body .ai-sum-text { flex-basis: 100%; white-space: normal; } .m-body .ai-fold > .ai-sum { min-height: var(--m-tap); } /* 상세 머리의 칩 줄 — 갈래(시나리오 · 패턴 · 신호 · 주의)마다 머리표를 붙여 무리 짓는다. 마크업은 ScenarioModel::chipHtml 한 곳 */ .stock-chip-groups { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); align-items: center; } .stock-chip-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); } .stock-chip-grp > em { margin-right: var(--sp-1); font-style: normal; font-size: var(--fs-mini); color: var(--ink-3); } /* ── 결산 요약 표 · 상세 스냅숏 (2026-08-26 에 stock.css 에서 옮김) ───────────── **모바일도 같은 것을 쓴다** — ETF 상세의 기간별 누적수익률 표와 미국 상세의 분기 재무 표가 그것이고, mobile.css 에 두면 같은 뜻의 규칙이 두 벌 생긴다(MIN-127). `.stock-table-scroll` 은 DataTables 그릇이라 PC 전용이다 — 모바일은 표를 안 쓴다 */ /* 결산일별 재무 요약 */ .stock-finance-table { width: 100%; background: var(--surface); border-top: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); } .stock-finance-table th, .stock-finance-table td { border-bottom: 1px solid var(--line-soft); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-cell); white-space: nowrap; font-variant-numeric: tabular-nums; } .stock-finance-table thead th { background: var(--th); color: var(--ink-2); text-align: center; } .stock-finance-table td.text-end { text-align: right; } /* ---- 상세 스냅숏 · 동종업종 비교 (2026-08-21 · MIN-94) ---- 표 자체는 결산 요약(.stock-finance-table)을 그대로 쓴다 — 같은 뜻의 규칙을 두 벌 만들지 않으려는 것이다. 여기 있는 것은 제목줄 · 「이 회사」 강조 · 가로 스크롤 셋뿐이다 */ .stock-snap { margin-bottom: var(--sp-6); } .stock-snap-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-cell); font-weight: 600; color: var(--ink-2); } /* 컬럼이 열까지 늘어난다 — 좁은 화면에서 **페이지가 통째로** 옆으로 밀리지 않게 표만 민다 */ .stock-snap-scroll { overflow-x: auto; } /* 견주는 표에서 「나」가 어느 줄인지 한눈에 보여야 한다 — 그것이 이 표의 쓸모다 */ .stock-snap tr.me > th, .stock-snap tr.me > td { background: var(--th); font-weight: 700; } /* 첫 칸은 이름표라 왼쪽에 붙인다(결산 요약에는 tbody th 가 없어 여기서 정한다) */ .stock-snap .stock-finance-table tbody th { color: var(--ink-2); font-weight: 600; text-align: left; } /* 값이 오른쪽이면 머리글도 오른쪽이어야 자릿수가 눈으로 맞는다 */ .stock-snap .stock-finance-table thead th.text-end { text-align: right; } /* ── 태그 (2026-08-26 에 stock.css 에서 옮김) ──────────────────────────────── **모바일도 같은 것을 쓴다** — 태그별 보기(`/m/stock/tag`)와 상세 셋의 태그 줄(`tg-line`)이 그것이다. 마크업을 그대로 쓰므로 이름도 PC 와 같다. `.tg-cols` 는 `auto-fit` 이라 좁은 화면에서 저절로 한 칸이 된다 — 모바일용 격자를 따로 짜지 않는다(모바일 지수의 `.mk-grid` 와 같은 판단). **min() 을 씌우는 것까지가 한 벌이다** : 그것 없이는 한 칸이 된 뒤 그 칸이 min 밑으로 안 줄어 좁은 폰에서 삐져나간다 */ /* ---- 태그별 보기 (/stock/tag) ---- 갈래를 넘어 보는 자리다 — 한 태그의 국내 · ETF · 미국이 나란히 선다. **0 인 갈래도 칸을 비우지 않고 「없습니다」를 적는다** : 숨기면 왜 없는지 물을 자리가 사라진다 */ .tg-chips { margin-bottom: var(--sp-5); } .tg-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); } .tg-group { flex: 0 0 3.5rem; font-size: var(--fs-mini); font-weight: 700; color: var(--ink-3); } .tg-chips a.stock-chip { display: inline-block; text-decoration: none; } /* 0건 태그를 접는다 — **지우는 것이 아니라 접는 것**이다(세어서 보이고 눌러서 편다). PC 도 같은 규칙을 쓴다(2026-08-26 · 2026-08-31) — PC 가 접지 않으면 보이는 표적 193개 가운데 134개(69%)가 눌러도 결과가 없는 칩이다. 같은 뜻의 규칙이 두 벌 생기려 하면 `ui.css` 에 둔다는 규약 그대로다 */ .tg-chips.hide-zero .stock-chip.none { display: none; } /* 칩이 전부 0건인 묶음은 줄째로 접는다 — 안 그러면 이름만 남은 빈 줄이 선다 */ .tg-chips.hide-zero .tg-row.all-zero { display: none; } /* 좁히기로 걸러진 것. **`.tg-chips a.stock-chip` 의 `inline-block` 보다 특이도가 높아야** 감춰진다 — 클래스 셋이라 이긴다. 0건 접기와 겹쳐 걸려도 결과는 같다(둘 다 감춤) */ .tg-chips .stock-chip.tg-hide, .tg-chips .tg-row.tg-hide { display: none; } .tg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--sp-4); } .tg-col { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); } .tg-col h5 { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; font-size: var(--fs-sec); } .tg-cnt { font-size: var(--fs-cell); color: var(--brand-ink); font-variant-numeric: tabular-nums; } .tg-more { margin-left: auto; font-size: var(--fs-mini); } /* 잣대가 갈래마다 다르다 — 무엇으로 세운 것인지 적어 둔다 */ .tg-sort { font-size: var(--fs-nano); color: var(--ink-3); } .tg-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; } .tg-list li { display: flex; align-items: baseline; gap: var(--sp-2); padding: 3px 0; font-size: var(--fs-cell); } .tg-list li + li { border-top: 1px solid var(--line-soft); } .tg-sub { margin-left: auto; font-size: var(--fs-nano); color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tg-over { margin-top: var(--sp-2); font-size: var(--fs-nano); color: var(--ink-3); } /* 상세의 태그 줄 — 국내 회사 · ETF · 미국 종목 상세가 같이 쓴다 */ .tg-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); } .tg-label { font-size: var(--fs-mini); font-weight: 700; color: var(--ink-3); } .tg-box { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); } .tg-box a.stock-chip { text-decoration: none; } .tg-del { margin-left: 2px; color: var(--ink-3); cursor: pointer; } .tg-del:hover { color: var(--up); } .tg-add { max-width: 12rem; } /* 체크박스를 한 줄에 나란히 (2026-08-26 에 stock.css 에서 옮김). **모바일 알림 설정이 같은 것을 쓴다** — 받을 신호 목록의 마크업은 서버가 한 곳 (`Stock\Alert::getSetting`)에서 만들고 두 화면이 그것을 그대로 받는다 */ .stock-check { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-head); color: var(--ink-2); cursor: pointer; } .stock-signal-boxes { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); } /* 피드백 첨부 섬네일 (2026-08-26 에 stock.css 에서 옮김) — 고르는 중(미리보기)과 상세에서 같은 크기로. **모바일 피드백 화면이 같은 것을 쓴다** — 접수 상자와 상세 시트가 PC 와 같은 마크업이다 */ .stock-feedback-preview, #detail_files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; } .stock-feedback-preview img, #detail_files img { max-width: 8rem; max-height: 8rem; border: 1px solid var(--line); border-radius: var(--r-sm); object-fit: cover; } /* ── 투자 대가 카드 (2026-08-26 에 stock.css 에서 옮김) ──────────────────────── **모바일이 같은 마크업을 쓴다** — `.mc-cards` 가 `auto-fill minmax(min(22rem, 100%), 1fr)` 이라 좁은 화면에서 저절로 한 칸이 되고, 카드 안은 원래 세로로 쌓이는 구성이다. 모바일용 카드를 따로 짜면 상위 종목 막대 · 회전율 · 분기말 이후 등락의 뜻이 두 벌이 된다 */ /* ---- 투자 대가 카드 (/us/manager) ---- 표의 「마지막 접수 · 상태」는 수집이 도는지 보는 운영 정보였고, 투자자를 고르는 자리에 있어야 할 값(비중 · 상위 종목)은 DB 에만 있었다. 카드 한 장이 「이 사람이 누구인가」다. `lc-card`(공시 카드)와 같은 결이다 — 면 · 그림자 · 모서리를 맞춘다. 이름을 나누는 것은 담는 것이 달라서다(저쪽은 한 건, 이쪽은 한 사람) */ /* `auto-fill` 은 **칸 수만** 줄이고 `minmax` 의 min 밑으로는 안 줄어든다 — 22rem(352px)이라 360px 폰의 내용 폭보다 넓어 카드가 6~7px 삐져나갔다(2026-08-26 · mobile-fit-audit). `min(22rem, 100%)` 이 그 바닥을 푼다 : 넓으면 22rem 로 여러 칸, 좁으면 폭에 맞춰 한 칸 */ .mc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: var(--sp-4); } .mc-card { display: block; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; } .mc-card:hover { background: var(--row-hover); color: var(--ink); } .mc-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .mc-name { font-size: var(--fs-sec); font-weight: 700; } .mc-firm { margin-top: 2px; font-size: var(--fs-mini); color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 투자 방식 라벨 — 가치 · 성장 · 퀀트 · 매크로 · 행동주의 · 멀티전략 · 재단·보험 (2026-09-15 · MIN-300). **잰 값이 아니라 사람이 붙인 것**이라 배지(수집 상태)와도, 아래 `.mc-stat` 의 숫자와도 모양이 달라야 한다 — 테두리만 있는 칩으로 가른다 */ .mc-kind { flex: 0 0 auto; border: 1px solid var(--brand-soft-2); border-radius: var(--r-pill); padding: 1px var(--sp-3); font-size: var(--fs-mini); font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); } /* 카드의 한 줄 소개. **두 줄에서 자른다** — 카드 높이가 제각각이면 격자가 무너진다. 컨트롤러가 첫 문장만 싣지만 첫 문장이 긴 사람이 있어 여기서 한 번 더 막는다 */ .mc-desc { margin: var(--sp-2) 0 0; font-size: var(--fs-mini); color: var(--ink-2); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* 상세 머리의 소개 문단. **표보다 위에 서는 글**이라 카드 안의 한 줄과 달리 안 자른다 */ .mc-profile { margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border-left: 3px solid var(--brand-soft-2); } .mc-profile p { margin: var(--sp-2) 0; font-size: var(--fs-cell); color: var(--ink); line-height: 1.7; } .mc-profile .stock-sub { font-size: var(--fs-mini); } /* 분류 칩 줄의 개수 — 칩 안의 작은 수(가치 27) */ .mc-kinds .stock-chip em { font-style: normal; opacity: .65; margin-left: 2px; } /* ---- 13F 분기 수급 — 가격 차트 자리 · 이름 칩 (2026-09-15 · MIN-301) ---- */ /* 가격 차트 + 분기 기둥 자리(13F 종목 화면 · 투자자 탭 · 의원 매매 종목 차트). PC · 모바일이 함께 쓴다. **폭을 묶지 않는다** — 처음(2026-09-15)에는 막대 열여섯 개짜리 분기 그림이라 56rem 으로 묶었는데, 가격 차트가 들어선 뒤로 그 폭이 넓은 PC 에서 칸의 반만 그리게 했다(1920 폭 : 896 / 1,632px · 2026-09-21) */ .fl-chart { margin-bottom: var(--sp-5); } /* 이름 칩 — 누가 움직였나. 넘치면 「+N 더」(`.sf-more`)로 접는다 */ .fl-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-pill); padding: 2px var(--sp-3); font-size: var(--fs-mini); text-decoration: none; background: var(--line-soft); color: var(--ink-2); } .fl-chip:hover { color: var(--ink); } .fl-chip em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; } .fl-chip.buy { background: var(--up-soft); color: var(--up); } .fl-chip.sell { background: var(--down-soft); color: var(--down); } /* ---- 대가의 분기 요약 — 담은 것 · 던 것 (2026-09-15 · MIN-301) ---- **갈래 칩 넷(건수)보다 앞에 서는 답이다.** 분기를 고르고 나서 먼저 보고 싶은 것은 「무엇을 얼마나」이지 「신규 몇 건」이 아니다. 좁아지면 두 칸이 위아래로 쌓인다. */ .cs-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-3); } .cs-box { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); } .cs-head { display: flex; align-items: baseline; gap: var(--sp-3); } .cs-title { font-weight: 700; } .cs-cnt { font-size: var(--fs-mini); color: var(--ink-3); } .cs-cnt b { font-variant-numeric: tabular-nums; } .cs-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .cs-box.buy .cs-amt { color: var(--up); } .cs-box.sell .cs-amt { color: var(--down); } /* 두 칸의 막대는 **같은 기준**(그 분기의 큰 쪽)이라 길이로 서로 견줄 수 있다 */ .cs-bar { display: block; height: 8px; margin-top: var(--sp-3); border-radius: var(--r-sm); background: var(--line-soft); overflow: hidden; } .cs-bar b { display: block; height: 100%; width: 0; } .cs-box.buy .cs-bar b { background: var(--up); } .cs-box.sell .cs-bar b { background: var(--down); } /* 종목 줄 — 이름 · 변화 · 금액 · 수량. 표가 아니라 목록이라 머리글이 없다 */ .cs-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; } .cs-list li { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-cell); } .cs-list li:first-child { border-top: 0; } .cs-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cs-tag { flex: 0 0 auto; font-size: var(--fs-mini); font-weight: 700; font-variant-numeric: tabular-nums; } .cs-box.buy .cs-tag { color: var(--up); } .cs-box.sell .cs-tag { color: var(--down); } .cs-v { flex: 0 0 4.5rem; text-align: right; font-variant-numeric: tabular-nums; } .cs-s { flex: 0 0 6rem; text-align: right; font-size: var(--fs-mini); color: var(--ink-3); font-variant-numeric: tabular-nums; } .cs-none { padding: var(--sp-3) 0; color: var(--ink-3); font-size: var(--fs-mini); } .cs-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-5); font-size: var(--fs-mini); } .cs-note b { font-size: var(--fs-cell); font-variant-numeric: tabular-nums; } /* ---- 보유 줄의 두 겹 칸 (2026-09-15 · MIN-301 — 저쪽 사이트의 잣대) ---- 업종은 종목 이름 **위에** 서고, 평단 → 현재가는 화살표 한 줄로 잇는다. 열을 열에서 여섯으로 줄이면서 한 칸에 두 값을 담은 자리들이다. */ .us-sec { display: block; font-size: var(--fs-mini); color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .us-arrow { font-size: var(--fs-mini); color: var(--ink-3); } /* ---- 종목 → 분기 → 그 사람 (2026-09-15 · MIN-302/303) ---- **분기를 고르는 것은 가격 차트다.** 분기를 표로 늘어놓으면 「게시판처럼 나열」이 되고, 무엇보다 그 분기에 무슨 일이 있었나는 가격 옆에 있어야 읽힌다. 여기 있는 것은 **고른 분기 하나가 들어앉는 띠**와 그 아래 칩 두 줄뿐이다. */ .sf-when { display: flex; align-items: stretch; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); } /* 차트 없이도 모든 분기를 밟는 길 — 시세 대상이 아닌 종목과 손가락을 위한 표적이다 */ .sf-step { flex: 0 0 auto; width: var(--m-tap); min-height: var(--m-tap); border: 0; border-radius: var(--r-lg); background: transparent; color: var(--ink-2); font-size: var(--fs-icon); line-height: 1; cursor: pointer; } .sf-step:hover:not(:disabled) { background: var(--row-hover); color: var(--ink); } .sf-step:disabled { color: var(--ink-3); opacity: 0.35; cursor: default; } .sf-when-body { flex: 1 1 auto; min-width: 0; padding: var(--sp-3) 0; } .sf-when-q { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); } .sf-when-q b { font-size: var(--fs-sec); } /* 비중 한 줄 — **그 분기 안에서의 몫**이다(분기끼리 길이로 견주지 않는다). 좁아지면 막대가 먼저 줄고, 더 좁으면 줄이 접힌다 */ .sf-mix { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-cell); } .sf-mix-k { flex: 0 0 2.5rem; font-weight: 700; color: var(--ink-2); } .sf-mix-l { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .sf-mix-l.up { color: var(--up); } .sf-mix-l.down { color: var(--down); } /* 비중을 못 낸 줄 — 값이 아니라 「모른다」라 방향색을 안 준다 */ .sf-mix-l.none { color: var(--ink-3); } /* 전 신고자 집계의 바탕 한 줄 — 9,000곳이 무엇을 했나 (2026-09-15 · MIN-305) */ .sf-when-foot { margin: var(--sp-2) 0 0; font-size: var(--fs-mini); } .sf-when-foot b { font-variant-numeric: tabular-nums; } .sf-mix-bar { flex: 1 1 6rem; display: flex; height: 10px; min-width: 4rem; border-radius: var(--r-sm); background: var(--line-soft); overflow: hidden; } .sf-mix-bar b { display: block; height: 100%; } .sf-mix-bar b.up { background: var(--up); } .sf-mix-bar b.down { background: var(--down); } /* 순매수는 그 분기의 결론이라 오른쪽 끝에 홀로 선다 */ .sf-net { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } /* 칩 두 줄 — **위아래로 세운다.** 대가와 의원은 뜻이 다른 축이라 좌우로 갈라 놓으면 좁은 화면에서 한쪽이 접혀 안 보이고, 한 줄에 섞으면 같은 자료로 읽힌다 */ .sf-rows { display: flex; flex-direction: column; gap: var(--sp-3); } .sf-line { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); } .sf-line-k { display: flex; align-items: baseline; gap: var(--sp-3); font-weight: 700; } .sf-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); } /* 「목록으로 보기」 — 종목 상세에 늘 펼쳐져 있던 표 둘을 없앤 자리다(2026-09-15 · MIN-306). 늘 펴 두면 그것이 다시 게시판이 되므로 **접힌 채로 시작한다** */ .sf-list-btn { margin-left: auto; border: 0; background: transparent; padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-mini); color: var(--brand); cursor: pointer; text-decoration: underline; } .sf-list-btn:hover { color: var(--brand-ink); } .sf-table { margin-top: var(--sp-3); } .sf-table .cs-none { margin: 0; } /* 표 안의 이름은 링크가 아니라 「고르는 것」이라 칩과 같은 뜻이다 */ .sf-tbl-pick { color: var(--ink); font-weight: 600; text-decoration: none; } .sf-tbl-pick:hover { color: var(--brand); text-decoration: underline; } /* 고르는 칩 — 겉모습은 `.fl-chip` 그대로이고 「누를 수 있다 · 골랐다」만 여기서 더한다. `