/* 내 종목은 Sayo 공용 토큰과 공용 본문 그리드를 그대로 상속한다. */
html.my-stocks-modal-open { overflow: hidden; }
.my-stocks-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8) 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}

.my-stocks-heading h1 { margin: 0; scroll-margin-top: var(--space-8); }
.my-stocks-heading p {
  max-width: 62ch;
  margin: var(--space-2) 0 0;
  color: var(--sub);
}

.my-stocks-add,
.my-stocks-workspace button,
.my-stocks-workspace summary {
  min-height: 44px;
  touch-action: manipulation;
}

.my-stocks-workspace {
  display: grid;
  gap: var(--space-5);
  min-height: 320px;
  padding: var(--space-6) 0 var(--space-12);
}

.my-stocks-loading {
  min-height: 180px;
  padding: var(--space-6);
  color: var(--sub);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.my-stocks-workspace .hub-tools,
.my-stocks-workspace .actions,
.my-stocks-workspace .entry-secondary-actions,
.my-stocks-workspace .company-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.my-stocks-workspace .filters {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.my-stocks-workspace .filters button { flex: 0 0 auto; min-height: 44px; }

.my-stocks-workspace .portfolio-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.my-stocks-workspace .portfolio-summary button {
  min-width: 0;
  padding: var(--space-4);
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.my-stocks-workspace .portfolio-summary button + button { border-left: 1px solid var(--line); }
.my-stocks-workspace .portfolio-summary button[aria-pressed="true"] { color: var(--accent); }

/* 공용 헤더의 주 행동이 유일한 추가 버튼이다. 런타임 버튼은 위임 대상으로만 둔다. */
.my-stocks-workspace .hub-tools .add-stock { display: none; }

.my-stocks-workspace .entry-progress {
  width: max-content;
  margin: 0 0 var(--space-4);
  color: var(--accent);
  font: 700 12px/1.4 var(--mono);
}

.my-stocks-workspace .entry-shell {
  display: grid;
  align-items: start;
  justify-items: stretch;
  width: 100%;
  padding: var(--space-6) 0 var(--space-10);
}
.my-stocks-workspace .entry-form {
  display: grid;
  gap: var(--space-5);
  width: min(640px, 100%);
  min-width: 0;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.my-stocks-workspace .entry-question {
  width: 100%;
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font: 700 22px/1.35 var(--sans);
  overflow-wrap: anywhere;
}
.my-stocks-workspace .entry-field { display: grid; gap: var(--space-2); min-width: 0; }
.my-stocks-workspace .entry-field--asset input { font-size: 17px; }
.my-stocks-workspace .asset-suggestions {
  display: grid;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}
.my-stocks-workspace .asset-suggestions[hidden] { display: none; }
.my-stocks-workspace .asset-suggestions button {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.my-stocks-workspace .asset-suggestions button:hover,
.my-stocks-workspace .asset-suggestions button:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
}
/* 선택 확정 칩 — 제안을 눌렀다는 사실이 화면에 남는 유일한 자리다. 입력창에 남는
   회사명은 "검색어를 쳤다" 와 구분되지 않으므로 티커·거래소까지 함께 못 박는다. */
.my-stocks-workspace .asset-selected {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  overflow-wrap: anywhere;
}
.my-stocks-workspace .asset-selected[hidden] { display: none; }
.my-stocks-workspace .asset-selected__check {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
}
.my-stocks-workspace .entry-error {
  margin: 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
}
.my-stocks-workspace .entry-error[hidden] { display: none; }
.my-stocks-workspace .entry-help {
  margin: 0;
  color: var(--sub);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.my-stocks-workspace .entry-choices { display: grid; gap: var(--space-3); }
.my-stocks-workspace .entry-candidate-list { display: grid; gap: var(--space-2); }
.my-stocks-workspace .entry-candidate-list button { width: 100%; text-align: left; }
.my-stocks-workspace .entry-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  align-items: center;
  min-height: 44px;
  padding: var(--space-4);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}
.my-stocks-workspace .entry-choice input { grid-row: 1 / span 2; width: 20px; min-height: 20px; }
.my-stocks-workspace .entry-choice__title { color: var(--ink); font-weight: 700; }
.my-stocks-workspace .entry-choice__description { color: var(--sub); font-size: 14px; font-weight: 400; }
.my-stocks-workspace .entry-choice:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.my-stocks-workspace .entry-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.my-stocks-workspace .entry-primary-submit {
  min-width: 120px;
  min-height: 44px;
  justify-self: end;
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
}
.my-stocks-workspace .entry-primary-submit:not(:disabled):hover { color: var(--accent); background: var(--accent-soft); }
.my-stocks-workspace .entry-primary-submit:disabled { cursor: not-allowed; }
.my-stocks-workspace .entry-secondary-submit { width: 100%; background: transparent; }
.my-stocks-workspace .entry-secondary-actions { justify-content: flex-start; }
.my-stocks-workspace .entry-review {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--space-4);
  background: var(--panel);
  border-radius: var(--radius-md);
}
.my-stocks-workspace .entry-review dt { color: var(--sub); font-weight: 650; }
.my-stocks-workspace .entry-review dd { margin: 0; overflow-wrap: anywhere; }

/* 해명 질문 — 위저드의 한 단계이므로 entry-shell/entry-form 껍데기를 그대로 쓴다.
   만료 문구만 notice 로 세운다(.wait-eta 와 같은 배지). 문구 자체는 서버 만료가
   실제로 짧기 때문에 그대로다 — 시각만 정돈한다. */
.my-stocks-workspace .question-prompt {
  margin: 0;
  color: var(--ink);
  font: 600 16px/1.6 var(--sans);
  overflow-wrap: anywhere;
}
.my-stocks-workspace .question-notice {
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

.my-stocks-workspace .refresh-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--sub);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.my-stocks-workspace .my-stocks-quiet-loading {
  min-height: 120px;
  margin: 0;
  padding: var(--space-6) 0;
  color: var(--sub);
}

/* 런타임 적재 실패 폴백 — 워크스페이스가 grid 라 자식이 행을 꽉 채우므로
   카드로 감싸고 align-self 로 늘어남을 끊는다(전폭 거대 버튼 방지). */
.my-stocks-workspace .my-stocks-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  align-self: start;
  justify-self: start;
  max-width: 640px;
  padding: var(--space-4) var(--space-5);
  color: var(--sub);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.my-stocks-workspace .my-stocks-error p { margin: 0; }
.my-stocks-workspace .my-stocks-error button { flex: 0 0 auto; width: auto; }

/* [표정 2026-09-07] 이 두 자리는 이미 카드였다 — 모자란 것은 **읽히는 행간**과
   등장 전이였다. 실패 카피가 "무슨 일인지 + 무엇이 남았는지" 두 마디로 길어져
   1.4 행간에서는 뭉쳐 보인다. state-note-in 키프레임은 style.css 정의를 쓴다
   (내 종목 페이지가 tokens → style → my-stocks 순으로 링크한다). */
.my-stocks-workspace .refresh-error,
.my-stocks-workspace .my-stocks-error {
  line-height: 1.65;
  animation: state-note-in 220ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .my-stocks-workspace .refresh-error,
  .my-stocks-workspace .my-stocks-error { animation: none; }
}

.my-stocks-workspace button {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  color: var(--ink);
  font: 700 14px/1.4 var(--sans);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.my-stocks-workspace button:hover { background: var(--panel); }
.my-stocks-workspace button:disabled { cursor: wait; opacity: .62; }
.my-stocks-workspace :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.my-stocks-workspace .filters button,
.my-stocks-workspace [data-action="detail"],
.my-stocks-workspace [data-action="cancel"],
.my-stocks-workspace [data-action="entry-back"],
.my-stocks-workspace [data-action="entry-cancel"],
.my-stocks-workspace [data-action="close-detail"] {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
}
.my-stocks-workspace [data-action="detail"] {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
}
.my-stocks-workspace [data-action="detail"]:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.my-stocks-workspace [data-action="confirm-diagnosis"],
.my-stocks-workspace [data-action="confirm-recheck"],
.my-stocks-workspace [data-action="confirm-position"],
.my-stocks-workspace [data-action="confirm-archive"] {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
}
.my-stocks-workspace [data-action="confirm-delete"] {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--ink);
}
.my-stocks-workspace [data-action="confirm-diagnosis"]:hover,
.my-stocks-workspace [data-action="confirm-recheck"]:hover,
.my-stocks-workspace [data-action="confirm-position"]:hover,
.my-stocks-workspace [data-action="confirm-archive"]:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.my-stocks-workspace [data-action="confirm-delete"]:hover {
  color: var(--surface);
  background: var(--ink);
}
.my-stocks-workspace .filters button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--surface);
  border-color: var(--line);
}

.my-stocks-workspace .company-card,
.my-stocks-workspace .empty-state,
.my-stocks-workspace form {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.my-stocks-workspace .company-card {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  border-radius: var(--radius-lg);
}
.my-stocks-workspace .company-card:hover {
  border-color: var(--line);
}
.my-stocks-workspace .company-card__identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.my-stocks-workspace .company-card__identity h3 { grid-column: 1; }
.my-stocks-workspace .company-card__identity .company-code { grid-column: 1; }
.my-stocks-workspace .company-card__identity .position-label {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.my-stocks-workspace .company-card__verdict {
  width: max-content;
  max-width: 100%;
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent);
}
.my-stocks-workspace .company-card__reason {
  padding: var(--space-4);
  background: var(--panel);
  border-radius: var(--radius-md);
}
.my-stocks-workspace .company-card__signals { min-width: 0; }
.my-stocks-workspace .company-card__actions {
  justify-content: flex-start;
  padding-top: var(--space-1);
}

.my-stocks-workspace .company-code,
.my-stocks-workspace .company-card__reason,
.my-stocks-workspace .company-card__signals {
  min-width: 0;
  overflow-wrap: anywhere;
}

.my-stocks-workspace [role="dialog"] {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  max-height: min(720px, calc(100dvh - var(--space-8)));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.my-stocks-workspace [role="dialog"] article,
.my-stocks-workspace [role="dialog"] section {
  display: grid;
  gap: var(--space-4);
}
.my-stocks-workspace [role="dialog"] .actions {
  gap: var(--space-3);
}

.my-stocks-workspace .empty-state {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.my-stocks-workspace .loading-company {
  min-height: 220px;
  overflow: hidden;
}
.my-stocks-workspace .loading-slot {
  min-height: 56px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  animation: my-stocks-pulse 1.4s ease-in-out infinite;
}
@keyframes my-stocks-pulse {
  50% { opacity: .55; }
}

/* 진단 대기 카드 — 실측 3~7분을 기다리는 화면이라 단일 초점 카드로 묶는다.
   entry-form 과 같은 서피스·폭·라운드를 써서 위저드에서 이어지는 한 흐름으로 읽힌다. */
.my-stocks-workspace .entry-shell--wait { justify-items: center; }
.my-stocks-workspace .wait-card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  width: min(480px, 100%);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.my-stocks-workspace .wait-spinner {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-1);
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: my-stocks-spin 900ms linear infinite;
}
@keyframes my-stocks-spin { to { transform: rotate(360deg); } }
.my-stocks-workspace .wait-title {
  margin: 0;
  color: var(--ink);
  font: 700 22px/1.35 var(--sans);
}
.my-stocks-workspace .wait-step { margin: 0; color: var(--sub); }
.my-stocks-workspace .wait-eta {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.my-stocks-workspace .wait-notice,
.my-stocks-workspace .wait-long {
  max-width: 34ch;
  margin: 0;
  color: var(--sub);
  font-size: 13px;
}
.my-stocks-workspace .wait-long {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* 월간 사용량 bar — 패널 .sp-bar 선례와 같은 구조(트랙 + fill). 유저에게 노출되는
   사용량 단위는 이 비율 하나뿐이다(크레딧 개수 표기 금지). */
.my-stocks-workspace .usage-bar {
  width: min(280px, 100%);
  height: 6px;
  margin: var(--space-2) 0 var(--space-3);
  overflow: hidden;
  background: var(--line);
  border-radius: var(--radius-pill);
}
.my-stocks-workspace .usage-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width .3s ease;
}
.my-stocks-workspace .usage-exhausted-title {
  margin: 0;
  color: var(--ink);
  font: 700 22px/1.35 var(--sans);
}

/* 진단 결과 뷰 — 이 화면에는 스타일이 한 줄도 없었다(.causal-chain 매칭 규칙 0개).
   entry-form·company-card 와 같은 서피스·라운드·간격을 써서 위저드에서 이어지는
   한 흐름으로 읽히게 한다. 색은 전부 토큰이라 라이트/다크가 같이 따라온다. */
.my-stocks-workspace .diagnosis-result {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.my-stocks-workspace .diagnosis-result h2 {
  margin: 0;
  color: var(--ink);
  font: 700 22px/1.35 var(--sans);
}
/* 라벨 + 값. o() 헬퍼는 회사 상세와 공유하는 자리라 규칙을 결과 뷰 안으로 가둔다. */
.my-stocks-workspace .diagnosis-result .field-row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.my-stocks-workspace .diagnosis-result .field-row__label {
  color: var(--sub);
  font-weight: 650;
}

.my-stocks-workspace .causal-chain {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.my-stocks-workspace .causal-chain__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  background: var(--panel);
  border-radius: var(--radius-md);
}
.my-stocks-workspace .causal-chain__title {
  grid-column: 1;
  margin: 0;
  color: var(--ink);
  font: 700 16px/1.4 var(--sans);
}
.my-stocks-workspace .causal-chain__state {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding: var(--space-1) var(--space-2);
  color: var(--sub);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
/* 판정색은 --color-verified/-unverified/-warn 계열이다. 세 값 모두 tokens.css 가
   다크에서 재정의하니 여기서 테마 분기를 다시 쓰지 않는다. */
.my-stocks-workspace .causal-chain__state[data-state="aligned"] {
  color: var(--color-verified);
  background: var(--color-verified-bg);
  border-color: var(--color-verified-line);
}
.my-stocks-workspace .causal-chain__state[data-state="mismatch"] {
  color: var(--color-unverified);
  background: var(--color-unverified-bg);
  border-color: var(--color-unverified-line);
}
.my-stocks-workspace .causal-chain__state[data-state="partially_aligned"] {
  color: var(--ink);
  background: var(--color-warn-bg);
  border-color: var(--color-warn-line);
}
.my-stocks-workspace .causal-chain__claim,
.my-stocks-workspace .causal-chain a,
.my-stocks-workspace .causal-chain span:not(.causal-chain__state) {
  grid-column: 1 / -1;
  margin: 0;
  min-width: 0;
  color: var(--sub);
  overflow-wrap: anywhere;
}
.my-stocks-workspace .causal-chain a { color: var(--accent); }
.my-stocks-workspace .causal-chain__claim:empty { display: none; }

.my-stocks-workspace .thesis-health-line {
  width: max-content;
  margin: var(--space-3) 0 0;
  padding: var(--space-1) var(--space-2);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

.my-stocks-workspace .company-card h3,
.my-stocks-workspace .company-card h4 { margin: 0; }
.my-stocks-workspace .lead-thesis h4 { line-height: 1.5; }
.my-stocks-workspace .event-count,
.my-stocks-workspace .health-text { margin: 0; font-weight: 650; }
.my-stocks-workspace .evidence-meta { margin-top: var(--space-3); }
.my-stocks-workspace .evidence-meta summary {
  color: var(--sub);
  cursor: pointer;
  font-size: 14px;
}

.my-stocks-workspace .company-code,
.my-stocks-workspace .summary-label {
  margin: 0 0 var(--space-1);
  color: var(--sub);
  font: 600 12px/1.4 var(--mono);
}

.my-stocks-workspace .company-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--line);
}
.my-stocks-workspace .company-summary--compact { grid-template-columns: 1fr; }
.my-stocks-workspace .company-summary--compact > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-4);
}
.my-stocks-workspace .company-summary > div { padding: var(--space-4); }
.my-stocks-workspace .company-summary > div + div { border-left: 1px solid var(--line); }

.my-stocks-workspace input,
.my-stocks-workspace select,
.my-stocks-workspace textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  color: var(--ink);
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.my-stocks-workspace textarea { min-height: 120px; resize: vertical; }
.my-stocks-workspace input { min-width: 0; }
.my-stocks-workspace fieldset { display: grid; gap: var(--space-3); border: 0; padding: 0; }

@media (max-width: 620px) {
  .my-stocks-heading { align-items: stretch; flex-direction: column; }
  .my-stocks-add { width: 100%; }
  .my-stocks-workspace { gap: var(--space-4); }
  .my-stocks-workspace .entry-shell {
    padding: var(--space-4) 0 var(--space-8);
  }
  .my-stocks-workspace .entry-form {
    width: 100%;
    padding: var(--space-5) var(--space-4);
  }
  .my-stocks-workspace .entry-primary-submit {
    width: 100%;
  }
  .my-stocks-workspace .entry-question { font-size: 22px; }
  .my-stocks-workspace .hub-tools { align-items: stretch; flex-direction: column; }
  .my-stocks-workspace .portfolio-summary { grid-template-columns: 1fr; }
  .my-stocks-workspace .portfolio-summary button + button {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .my-stocks-workspace .filters { display: flex; width: 100%; }
  .my-stocks-workspace .filters button { flex: 1 0 auto; }
  .my-stocks-workspace .company-summary { grid-template-columns: 1fr; }
  .my-stocks-workspace .company-summary > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .my-stocks-workspace [data-action="detail"] { width: 100%; }
  .my-stocks-workspace .refresh-error { align-items: stretch; flex-direction: column; }
  .my-stocks-workspace .my-stocks-error { align-items: stretch; flex-direction: column; }
  .my-stocks-workspace .company-card,
  .my-stocks-workspace .empty-state,
  .my-stocks-workspace form,
  .my-stocks-workspace .diagnosis-result,
  .my-stocks-workspace [role="dialog"] { padding: var(--space-4); }
  /* 좁은 폭에서는 라벨 열을 접는다 — 8.5rem 을 떼면 값이 2~3자마다 줄바꿈된다. */
  .my-stocks-workspace .diagnosis-result .field-row { grid-template-columns: 1fr; }
  .my-stocks-workspace .company-card__identity {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .my-stocks-workspace [role="dialog"] {
    max-height: calc(100dvh - var(--space-4));
  }
}

@media (max-width: 360px) {
  .my-stocks-workspace .filters {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .my-stocks-workspace .filters button { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .my-stocks-workspace *,
  .my-stocks-workspace *::before,
  .my-stocks-workspace *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   내 종목 피드 (PR-F2, 설계 mystocks-thesis-monitor-20260908 §1.1)

   토스식 단일 초점: 이 면의 메시지는 "당신 종목에 오늘 달라진 것" 하나다. 그래서
   행은 카드가 아니라 **헤어라인 목록**이다 — 항목마다 그림자 상자를 두르면 N 개의
   초점이 생기고, 그건 이 화면이 피하려는 형태다(랜딩 v2 의 비대칭 리듬과 같은 규율).
   행 안의 위계도 하나뿐이다: 회사 · 근거 세기 → 공시 원문 인용 → 링크.
   ========================================================================== */
.my-stocks-workspace .my-stocks-feed {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
}
.my-stocks-workspace .feed-head { display: grid; gap: var(--space-1); }
.my-stocks-workspace .feed-head .feed-title {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}
/* 신선도 표기는 약하게, 그러나 늘 보이게 — 지우면 화면이 실시간인 척하게 된다. */
.my-stocks-workspace .feed-freshness {
  margin: 0;
  color: var(--sub);
  font-size: 13px;
}
.my-stocks-workspace .feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.my-stocks-workspace .feed-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}
.my-stocks-workspace .feed-item:last-child { border-bottom: 1px solid var(--line); }
.my-stocks-workspace .feed-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.my-stocks-workspace .feed-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--sub);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
/* 안 본 소식 배지. 색은 accent 하나만 쓴다 — 방향(호재·악재)을 색으로 말하지
   않는다(무추천 규율은 어휘만이 아니라 시각에도 걸린다). */
.my-stocks-workspace .feed-new {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
.my-stocks-workspace .feed-date {
  margin-left: auto;
  color: var(--sub);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.my-stocks-workspace .feed-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
/* 인용은 인용처럼 보여야 한다 — 이 문장이 "왜 이 소식이 내 피드에 왔나"의 답이다. */
.my-stocks-workspace .feed-quote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.my-stocks-workspace .feed-why {
  margin: 0;
  color: var(--sub);
  font-size: 13px;
}
.my-stocks-workspace .feed-links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.my-stocks-workspace .feed-link { font-size: 13px; }
.my-stocks-workspace .feed-truncated {
  margin: 0;
  color: var(--sub);
  font-size: 13px;
}
.my-stocks-workspace .feed-loading { color: var(--sub); }
.my-stocks-workspace .feed-empty { display: grid; gap: var(--space-1); }
.my-stocks-workspace .feed-empty p { margin: 0; }
.my-stocks-workspace .feed-empty-title { font-size: 16px; font-weight: 600; }
.my-stocks-workspace .feed-empty p + p { color: var(--sub); font-size: 14px; }
/* 장애는 빈 상태와 **다르게** 생겨야 한다. 같은 조판이면 유저는 둘을 구분하지 못하고,
   그때 화면은 "달라진 게 없다"는 거짓을 말한 것과 같아진다. */
.my-stocks-workspace .feed-error {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-4);
  border: 1px solid var(--color-warn-line);
  background: var(--color-warn-bg);
  border-radius: var(--radius-md);
}
.my-stocks-workspace .feed-error p { margin: 0; }

@media (max-width: 640px) {
  .my-stocks-workspace .feed-date { margin-left: 0; }
}
/* 접근 상태(로그아웃·미승인). 장애가 아니라 안내이므로 warn 색을 쓰지 않는다. */
.my-stocks-workspace .feed-gate {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.my-stocks-workspace .feed-gate p { margin: 0; }
.my-stocks-workspace .feed-gate-title { font-size: 16px; font-weight: 600; }
.my-stocks-workspace .feed-gate p + p { color: var(--sub); font-size: 14px; }

/* ==========================================================================
   내 종목 등록/해제 (다크: SAYO_MYSTOCKS_REGISTER)

   토스식 단일 초점: 이 블록의 메시지도 하나다 — "무엇이 등록돼 있고, 무엇을 더할
   수 있는가". 그래서 피드와 같은 헤어라인 목록이고, 상자도 그림자도 두르지 않는다.
   등록 목록이 카드가 되면 이 면에 초점이 둘(피드·목록) 생기는데, 이 화면의 주인공은
   피드다. 등록은 그 입력을 고치는 자리이지 경쟁하는 표면이 아니다.

   `.my-stocks-workspace` 하위가 아니라 자기 루트를 쓰는 이유: 등록 컨테이너는
   워크스페이스와 **다른 노드**다(renderFeed 가 워크스페이스를 매번 비우므로 같이
   살 수 없다). 선택자를 그쪽에 매달면 한 줄도 적용되지 않는다.
   ========================================================================== */
.my-stocks-holdings-root { display: block; max-width: 44rem; }
.my-stocks-holdings {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.my-stocks-holdings .holdings-title {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.my-stocks-holdings .holdings-search { display: grid; gap: var(--space-2); }
.my-stocks-holdings .holdings-search-label {
  color: var(--sub);
  font-size: 13px;
}
.my-stocks-holdings .holdings-search-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  font: inherit;
  font-size: 16px; /* iOS 가 16px 미만 입력에 자동 확대를 건다 */
}
.my-stocks-holdings .holdings-search-status {
  margin: 0;
  color: var(--sub);
  font-size: 13px;
}
.my-stocks-holdings .holdings-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.my-stocks-holdings .holdings-add {
  width: 100%;
  padding: var(--space-3) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.my-stocks-holdings .holdings-result:last-child .holdings-add {
  border-bottom: 1px solid var(--line);
}
.my-stocks-holdings .holdings-add:hover { background: var(--panel); }
/* [QA 2026-10-18 3-2] 키보드로 고른 항목(aria-activedescendant 대상). 포커스는 입력칸에
   머물러 있으므로 활성 표시는 배경과 왼쪽 막대로 따로 그린다. */
.my-stocks-holdings .holdings-add.is-active {
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--ink, currentColor);
}
.my-stocks-holdings .holdings-results:empty { display: none; }
.my-stocks-holdings .holdings-search-status:empty { display: none; }
.my-stocks-holdings .holdings-add[disabled] { color: var(--sub); cursor: default; }
.my-stocks-holdings .holdings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.my-stocks-holdings .holdings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.my-stocks-holdings .holdings-item:last-child { border-bottom: 1px solid var(--line); }
.my-stocks-holdings .holdings-item-name { min-width: 0; overflow-wrap: anywhere; }
/* 해제는 파괴적 동작이라 시선을 끌지 않는다 — 눈에 띄게 만들면 이 화면이 "해제하세요"
   라고 말하는 꼴이다. 그러나 탭 타깃은 44px 를 지킨다(모바일 최적화 규율). */
.my-stocks-holdings .holdings-remove {
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--sub);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.my-stocks-holdings .holdings-remove[disabled] { cursor: default; opacity: 0.6; }
.my-stocks-holdings .holdings-empty { display: grid; gap: var(--space-1); }
.my-stocks-holdings .holdings-empty p { margin: 0; }
.my-stocks-holdings .holdings-empty-title { font-size: 15px; font-weight: 600; }
.my-stocks-holdings .holdings-empty p + p { color: var(--sub); font-size: 14px; }
.my-stocks-holdings .holdings-loading { margin: 0; color: var(--sub); }
.my-stocks-holdings .holdings-notice { margin: 0; font-size: 14px; }
/* 담기·빼기 알림. 노드는 늘 있고(aria-live) 비었을 때만 접힌다. */
.my-stocks-holdings .holdings-toast:empty,
.my-stocks-holdings .holdings-notice-slot:empty,
.my-stocks-holdings .holdings-body:empty { display: none; }
.my-stocks-holdings .holdings-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  font-size: 14px;
}
.my-stocks-holdings .holdings-undo {
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.my-stocks-holdings a.holdings-item-name { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* 장애는 빈 상태와 다르게 생긴다(피드와 같은 규율). */
.my-stocks-holdings .holdings-error {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-4);
  border: 1px solid var(--color-warn-line);
  background: var(--color-warn-bg);
  border-radius: var(--radius-md);
}
.my-stocks-holdings .holdings-error p { margin: 0; }
/* 빈 피드의 등록 유도. 이 버튼은 등록 0 일 때만 서고, 같은 페이지의 검색창으로
   포커스를 옮긴다 — 새 화면으로 보내면 유저를 한 번 더 헤매게 할 뿐이다. */
.my-stocks-workspace .feed-empty-cta {
  justify-self: start;
  margin-top: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: inherit;
  font: inherit;
  cursor: pointer;
}