/* ============================================================
   대가의 눈 — 토스 스타일 디자인 시스템
   테두리 대신 배경으로 구분하고, 큰 굵은 숫자와 넉넉한 여백을 쓴다.

   색 규칙: 텍스트에 쓰는 색은 모두 흰 배경·회색 배경·연한 틴트 배경 위에서
   대비 4.5:1 이상을 만족한다(WCAG AA). 그래픽 전용 색은 별도 토큰으로 분리한다.
   간격: 4px 그리드. 라운드/자간/폰트 크기는 토큰으로만 쓴다.
   ============================================================ */

:root {
  /*
   * 브랜드 — 딥 그린.
   *
   * 원래 파랑(#3182f6)이었는데 두 가지 이유로 바꿨다.
   * 1) 같은 운영자의 '숨은지원금'(sumeundon.com)이 파랑 #2563eb에 같은 회색 배경,
   *    같은 Pretendard라 두 사이트가 거의 구분되지 않았다. 서브도메인으로 붙이면
   *    방문자가 같은 사이트로 인식한다.
   * 2) 국내 관행상 하락이 파랑이라, 브랜드색과 하락색이 같은 계열로 겹쳤다.
   *
   * #05603a는 흰 배경에서 대비 7.9:1 (WCAG AAA).
   */
  --brand: #05603a;
  --brand-dark: #044a2d;
  --brand-weak: #e6f4ec;
  --brand-weaker: #f3faf6;

  /* 이전 이름 호환 — 규칙 25곳에서 --blue 계열을 쓰고 있어 별칭으로 남긴다 */
  --blue: var(--brand);
  --blue-dark: var(--brand-dark);
  --blue-weak: var(--brand-weak);
  --blue-weaker: var(--brand-weaker);

  /* 등락 — 국내 관행: 상승 빨강 / 하락 파랑
     -graphic은 차트·막대 등 비텍스트용, -text는 글자용(대비 확보) */
  --up-graphic: #f04452;
  --up: #c62b38;
  --up-weak: #feeced;
  --down-graphic: #3182f6;
  --down: #1b64da;
  --down-weak: #e8f3ff;

  /* 그레이 스케일 */
  --g900: #191f28;
  --g800: #333d4b;
  --g700: #4e5968;
  --g600: #5a6473;
  --g500: #66707c;
  --g400: #7c8794;
  --g300: #d1d6db;
  --g200: #e5e8eb;
  --g100: #f2f4f6;
  --g50: #f9fafb;
  --white: #fff;

  /* 판정 색 — 모두 같은 계열 틴트 배경 위에서도 4.5:1 이상 */
  --great: #04724d;
  --great-weak: #e7f7f0;
  /* 원래 파랑이었으나 하락 파랑과 헷갈려 청록으로 옮겼다. 흰 배경 대비 5.6:1 */
  --good: #0f766e;
  --good-weak: #e6f5f3;
  --ok: #95590a;
  --ok-weak: #fff4e0;
  --bad: #c62b38;
  --bad-weak: #feeced;
  --na: #66707c;
  --na-weak: #f2f4f6;
  --na-fill: #d1d6db;

  /* 라운드 */
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 8px;
  --r-2xs: 6px;

  /* 간격 (4px 그리드) */
  --sp-card: 24px;
  --sp-card-sm: 18px;
  --sp-section: 28px;

  /* 자간 — 세 단계만 사용 */
  --ls-tight: -0.035em; /* 제목 */
  --ls-num: -0.02em; /* 숫자·본문 (한글 단위가 붙어도 안전) */
  --ls-base: -0.01em;

  --shadow: 0 1px 3px rgba(25, 31, 40, 0.05), 0 8px 24px rgba(25, 31, 40, 0.04);
  --shadow-pop: 0 4px 16px rgba(25, 31, 40, 0.1), 0 16px 40px rgba(25, 31, 40, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--g50);
  color: var(--g900);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI',
    'Malgun Gothic', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: var(--ls-base);
  word-break: keep-all;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

main.wrap {
  flex: 1;
}

button {
  font-family: inherit;
  letter-spacing: inherit;
}

/* ── 상단바 ────────────────────────────────── */
.topbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  position: sticky;
  top: 0;
  z-index: 50;
  /* 아래 .market-bar의 top:64px와 정확히 맞물리도록, 높이를 늘리지 않는 그림자로 구분선을 낸다 */
  box-shadow: 0 1px 0 var(--g100);
}
.topbar-inner {
  display: flex;
  align-items: center;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  width: 36px;
  height: 36px;
  flex: none;
  display: block;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.brand-text strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--g900);
}
.brand-text em {
  font-style: normal;
  font-size: 12px;
  color: var(--g500);
  font-weight: 500;
}

.topnav {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.topnav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--g700);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.14s;
}
.topnav a:hover {
  background: var(--g100);
  color: var(--g900);
}
/* 메뉴가 넷이라 지금 어디인지 표시해 준다 */
.topnav a.here {
  background: var(--brand-weak);
  color: var(--brand);
  font-weight: 700;
}

@media (max-width: 560px) {
  .topnav {
    gap: 2px;
  }
  .topnav a {
    font-size: 13px;
    padding: 7px 9px;
  }
}

/* ── 가이드 코너 ────────────────────────────── */
.guide-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 32px;
}
.guide-list.compact {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 14px;
}
.guide-card {
  display: block;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.16s, box-shadow 0.16s;
}
.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}
.guide-card h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  margin: 0 0 8px;
  color: var(--g900);
  line-height: 1.4;
}
.guide-card p {
  font-size: 14px;
  color: var(--g600);
  line-height: 1.65;
  margin: 0 0 12px;
  font-weight: 500;
}
.guide-meta {
  font-size: 12.5px;
  color: var(--g500);
  font-weight: 600;
}

.guide-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 24px;
}
.crumb {
  margin-bottom: 18px;
}
.crumb a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue-dark);
  text-decoration: none;
}
.crumb a:hover {
  text-decoration: underline;
}
.guide-article h1 {
  font-size: clamp(26px, 4.5vw, 34px);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: 1.35;
  margin: 0 0 14px;
  color: var(--g900);
}
.guide-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--g600);
  font-weight: 500;
  margin: 0 0 14px;
}
.guide-meta-row {
  font-size: 13px;
  color: var(--g500);
  font-weight: 600;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--g200);
  margin-bottom: 8px;
}
.guide-article h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  margin: 40px 0 14px;
  color: var(--g900);
}
.guide-article h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--g900);
}
.guide-article p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--g800);
  margin: 0 0 18px;
  font-weight: 450;
}
.guide-article ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.guide-article li {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--g800);
  margin-bottom: 8px;
}
.guide-article strong {
  font-weight: 700;
  color: var(--g900);
}
.guide-article code {
  background: var(--g100);
  padding: 2px 6px;
  border-radius: var(--r-2xs);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}
.table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.table-wrap th,
.table-wrap td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--g100);
}
.table-wrap th {
  background: var(--g50);
  font-weight: 700;
  color: var(--g800);
  font-size: 14px;
  white-space: nowrap;
}
.table-wrap td {
  color: var(--g700);
}
.table-wrap tr:last-child td {
  border-bottom: 0;
}

.faq-item {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.faq-item p {
  margin: 0;
  font-size: 15.5px;
  color: var(--g700);
}

.guide-cta {
  background: var(--blue-weaker);
  border-radius: var(--r-lg);
  padding: 24px;
  margin: 40px 0 0;
  text-align: center;
}
.guide-cta p {
  font-size: 15.5px;
  color: var(--g700);
  margin: 0 0 16px;
  font-weight: 500;
  line-height: 1.7;
}
.btn-primary {
  display: inline-block;
  /* 흰 글자 대비 4.5:1을 넘기려면 --blue(#3182f6, 3.71)로는 부족해 진한 파랑을 쓴다 */
  background: var(--blue-dark);
  color: var(--white);
  font-weight: 700;
  font-size: 15.5px;
  padding: 13px 26px;
  border-radius: var(--r-sm);
  text-decoration: none;
  letter-spacing: var(--ls-num);
  transition: background 0.14s;
}
.btn-primary:hover {
  background: #14479c;
}

/* ── 시황 바 ────────────────────────────────── */
.market-bar {
  background: var(--white);
  box-shadow: 0 1px 0 var(--g100);
  position: sticky;
  top: 64px;
  z-index: 40;
}
.market-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
}
.regime {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-xs);
  color: var(--rc, var(--g600));
  background: var(--rc-bg, var(--g100));
  white-space: nowrap;
  letter-spacing: var(--ls-num);
}
/* 지수 6개는 줄바꿈하지 않고 가로 스크롤한다 — 고정 영역이 커지는 것을 막는다 */
.tickers {
  display: flex;
  gap: 18px;
  align-items: center;
  font-variant-numeric: tabular-nums;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.tickers::-webkit-scrollbar {
  display: none;
}
.tick {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
  flex: none;
}
.tick .n {
  color: var(--g500);
  font-weight: 500;
}
.tick .v {
  font-weight: 700;
  color: var(--g800);
}
.tick .d {
  font-weight: 700;
  font-size: 12px;
}

/* ── 공통 카드 ─────────────────────────────── */
.stock-head,
.insight,
.rep-hero,
.philosophy,
.check,
.biz,
.fund-note {
  background: var(--white);
  border-radius: var(--r-lg);
}

/* ── 검색 화면 ─────────────────────────────── */
.step {
  padding: 56px 0 24px;
}
#stepResult {
  padding-top: var(--sp-section);
}
.hero-title {
  font-size: clamp(28px, 5.5vw, 40px);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  margin: 0 0 12px;
  text-align: center;
  color: var(--g900);
}
.hero-sub {
  text-align: center;
  color: var(--g600);
  margin: 0 0 32px;
  font-size: 16px;
  font-weight: 500;
}

/* sticky인 상단바(50)·시황바(40)보다 위에 떠야 하므로 스태킹 컨텍스트를 올린다 */
.search {
  position: relative;
  z-index: 60;
  max-width: 560px;
  margin: 0 auto;
}
.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 21px;
  height: 21px;
  fill: var(--g400);
  pointer-events: none;
  transition: fill 0.15s;
}
.search:focus-within .search-icon {
  fill: var(--blue-dark);
}
#q {
  width: 100%;
  height: 60px;
  padding: 0 52px;
  border-radius: var(--r-md);
  border: 0;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--g200);
  color: var(--g900);
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--ls-num);
  outline: none;
  transition: box-shadow 0.15s;
}
#q::placeholder {
  color: var(--g500);
  font-weight: 500;
}
#q:focus {
  box-shadow: inset 0 0 0 2px var(--blue);
}
#q::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  max-height: 360px;
  overflow-y: auto;
}
.suggest li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.suggest li:hover,
.suggest li[aria-selected='true'] {
  background: var(--g100);
}
.suggest .s-name {
  font-weight: 600;
  font-size: 15px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g900);
}
.suggest .s-sym {
  font-size: 13px;
  color: var(--blue-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.suggest .s-ex {
  font-size: 12px;
  color: var(--g500);
  flex: none;
}
.suggest .s-empty {
  padding: 18px;
  color: var(--g600);
  cursor: default;
  justify-content: center;
  font-size: 14px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: var(--sp-section);
}
.chips-label {
  font-size: 13px;
  color: var(--g500);
  font-weight: 600;
  margin-right: 2px;
}
.chip {
  border: 0;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--g200);
  color: var(--g700);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--ls-num);
  cursor: pointer;
  transition: all 0.14s;
}
.chip:hover {
  background: var(--blue-weak);
  box-shadow: inset 0 0 0 1px var(--blue);
  color: var(--blue-dark);
}
.chip:active {
  transform: scale(0.97);
}

/* ── 종목 헤더 ─────────────────────────────── */
.btn-back {
  border: 0;
  background: var(--g100);
  color: var(--g700);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 20px;
  transition: background 0.14s;
}
.btn-back:hover {
  background: var(--g200);
}

.stock-head {
  padding: var(--sp-card);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.sh-top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
.sh-name {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  margin: 0;
  line-height: 1.3;
  color: var(--g900);
}
.sh-meta {
  color: var(--g500);
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* 구분점은 항목 뒤에 붙인다 — 줄바꿈될 때 줄 맨 앞에 남아 불릿처럼 보이는 것을 막는다 */
.sh-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 8px;
  color: var(--g300);
}
.sh-price {
  text-align: right;
}
.sh-price .p {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  color: var(--g900);
}
.sh-price .c {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.up {
  color: var(--up);
}
.down {
  color: var(--down);
}
.flat {
  color: var(--g600);
}
.change-symbol {
  font-size: 12px;
  font-weight: 600;
  color: var(--g600);
  background: var(--g100);
  border-radius: var(--r-xs);
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}

.sparkline {
  margin-top: 20px;
  width: 100%;
  height: 84px;
  display: block;
}
.sh-range {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  font-size: 12px;
  color: var(--g500);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.sh-range span {
  white-space: nowrap;
}

/* ── 종합 인사이트 ─────────────────────────── */
.insight {
  padding: var(--sp-card);
  margin-bottom: var(--sp-section);
  box-shadow: var(--shadow);
}
.insight h3 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: var(--ls-tight);
  color: var(--g900);
}
.insight .sub {
  font-size: 14px;
  color: var(--g500);
  font-weight: 500;
  margin: 0 0 20px;
}
.ins-block {
  border-top: 1px solid var(--g100);
  padding-top: 20px;
  margin-top: 20px;
}
.ins-block:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.ins-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--g900);
  letter-spacing: var(--ls-num);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ins-label .pill {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  background: var(--tc-bg, var(--g100));
  color: var(--tc, var(--g600));
  font-weight: 700;
}
.ins-block p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--g700);
  font-weight: 500;
}
.ins-block p:last-child {
  margin-bottom: 0;
}
.ins-block p strong {
  color: var(--g900);
  font-weight: 700;
}
.ins-note {
  font-size: 12px;
  color: var(--g500);
}

/* 수급 */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 14px;
}
.flow-cell {
  background: var(--fc-bg, var(--g50));
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
/* 틴트 배경 위라 한 단계 진한 회색을 쓴다 */
.flow-cell .k {
  font-size: 13px;
  color: var(--g700);
  font-weight: 600;
  display: block;
}
.flow-cell .v {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fc);
  letter-spacing: var(--ls-num);
  margin-top: 3px;
}
.flow-cell .s {
  font-size: 12px;
  color: var(--g700);
  margin-top: 1px;
}
.streaks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.streaks span {
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-xs);
  background: var(--g100);
  color: var(--g700);
}

/* 위치 게이지 */
.pos-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pos-track {
  flex: 1;
  min-width: 140px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--down-weak), var(--g100) 50%, var(--up-weak));
  position: relative;
}
.pos-track i {
  position: absolute;
  top: -3px;
  width: 6px;
  height: 14px;
  border-radius: 999px;
  background: var(--g900);
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--white);
}
.pos-cap {
  font-size: 13px;
  color: var(--g500);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.risk-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.risk-list li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--g700);
  font-weight: 500;
  padding: 10px 14px 10px 38px;
  position: relative;
  margin-bottom: 6px;
  background: var(--g50);
  border-radius: var(--r-sm);
}
.risk-list li:last-child {
  margin-bottom: 0;
}
.risk-list li::before {
  content: '!';
  position: absolute;
  left: 14px;
  top: 13px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-2xs);
  background: var(--bad);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* ── 투자자 선택 ───────────────────────────── */
.investor-picker {
  margin-top: var(--sp-section);
}
.section-title {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: var(--ls-tight);
  color: var(--g900);
}
.section-title .sub {
  font-weight: 500;
  color: var(--g500);
  font-size: 13px;
  letter-spacing: var(--ls-base);
}
.block-title {
  margin-top: var(--sp-section);
}
.investors {
  display: grid;
  /* 모델 수가 늘어도 깨지지 않게 고정 열 수 대신 최소 너비로 채운다 */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.inv {
  background: var(--white);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--g200);
  border-radius: var(--r-md);
  padding: 18px 10px 16px;
  cursor: pointer;
  text-align: center;
  color: var(--g900);
  transition: all 0.16s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.inv:hover {
  box-shadow: inset 0 0 0 1px var(--g300), var(--shadow);
  transform: translateY(-2px);
}
.inv[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--ic), var(--shadow);
}
.inv-face {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: var(--ls-tight);
  /* color-mix 미지원 브라우저 폴백 */
  background: var(--g100);
  background: color-mix(in srgb, var(--ic) 12%, var(--white));
  color: var(--ic);
}
.inv[aria-pressed='true'] .inv-face {
  background: var(--ic);
  color: var(--white);
}
.inv-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: 1.3;
  color: var(--g900);
}
.inv-en {
  font-size: 11px;
  color: var(--g500);
  line-height: 1.2;
  font-weight: 500;
}
.inv-score {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ic);
  letter-spacing: var(--ls-num);
  min-height: 16px;
}

/* ── 리포트 ────────────────────────────────── */
#report {
  margin-top: var(--sp-section);
}
.rep-hero {
  background: var(--white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ic) 7%, var(--white)), var(--white) 70%);
  box-shadow: inset 0 0 0 1px var(--g200), var(--shadow);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 20%, var(--g200)), var(--shadow);
  padding: var(--sp-card);
}
.rep-top {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.gauge {
  flex: none;
  position: relative;
  width: 132px;
  height: 132px;
}
.gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.gauge-txt {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.gauge-num {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  color: var(--g900);
}
.gauge-num small {
  font-size: 15px;
  color: var(--g600);
  font-weight: 700;
  letter-spacing: var(--ls-num);
}
.rep-lead {
  flex: 1;
  min-width: 240px;
}
.rep-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rep-who b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--g900);
}
.rep-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--g100);
  background: color-mix(in srgb, var(--ic) 12%, var(--white));
  color: var(--ic);
  letter-spacing: var(--ls-num);
}
.rep-verdict {
  font-size: 17px;
  line-height: 1.72;
  margin: 0 0 14px;
  color: var(--g800);
  font-weight: 600;
  letter-spacing: var(--ls-num);
}
/* Pretendard에는 이탤릭 자형이 없어 인조 기울임이 되므로 쓰지 않는다 */
.rep-quote {
  font-size: 14px;
  color: var(--g600);
  border-left: 3px solid var(--g200);
  border-left-color: color-mix(in srgb, var(--ic) 45%, var(--white));
  padding-left: 13px;
  margin: 0;
  font-weight: 500;
  line-height: 1.7;
}

/* 실존 인물과의 무관계 고지 — 각 모델 카드에 상시 노출한다 */
.attrib {
  font-size: 12px;
  line-height: 1.6;
  color: var(--g500);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--g100);
  font-weight: 500;
}

.rep-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.sum-box {
  background: var(--g50);
  border-radius: var(--r-sm);
  padding: 15px 17px;
}
.sum-box .k {
  font-size: 13px;
  color: var(--g600);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.sum-box .v {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--g900);
}
.sum-box .n {
  font-size: 13px;
  color: var(--g600);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.philosophy {
  padding: var(--sp-card);
  margin-top: 14px;
  box-shadow: var(--shadow);
}
.philosophy h3 {
  font-size: 17px;
  margin: 0 0 10px;
  color: var(--ic);
  letter-spacing: var(--ls-tight);
  font-weight: 800;
}
.philosophy p {
  margin: 0;
  font-size: 15px;
  color: var(--g700);
  line-height: 1.78;
  font-weight: 500;
}
.focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
.focus-tags span {
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-xs);
  background: var(--g100);
  background: color-mix(in srgb, var(--ic) 9%, var(--white));
  color: var(--ic);
}

/* 항목별 채점 */
.checks {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.checks:empty {
  display: none;
}
.check {
  padding: 20px;
  box-shadow: var(--shadow);
}
.check-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.check-label {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: var(--ls-tight);
  color: var(--g900);
}
.check-hint {
  font-size: 13px;
  color: var(--g500);
  font-weight: 500;
}
.check-val {
  margin-left: auto;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--vc);
  letter-spacing: var(--ls-num);
}
.check-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--g100);
  margin: 14px 0 12px;
  overflow: hidden;
}
.check-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--vc);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.check-comment {
  font-size: 15px;
  color: var(--g700);
  line-height: 1.72;
  margin: 0;
  font-weight: 500;
}
/* 점수 막대가 없는 카드(ETF 등)에서 제목과 설명이 붙지 않도록 */
.check-head + .check-comment {
  margin-top: 12px;
}
.check-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--g500);
  font-weight: 600;
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}

/* 핵심 지표 */
.metrics {
  margin-top: var(--sp-section);
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}
/* 테두리 대신 배경으로 구분한다 (토스 원칙) */
.metric {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.metric .k {
  font-size: 13px;
  color: var(--g600);
  font-weight: 600;
  display: block;
}
.metric .v {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
  margin-top: 3px;
  color: var(--g900);
}
.metric-group {
  font-size: 14px;
  font-weight: 700;
  color: var(--g600);
  margin: 20px 0 10px;
  letter-spacing: var(--ls-num);
}

/* 푸터의 약관·방침 링크 */
.legal-links {
  margin-top: 12px;
}
.legal-links a {
  color: var(--g600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-links a:hover {
  color: var(--blue-dark);
}

/* 약관·개인정보처리방침 본문 */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-section) 0;
}
.legal-date {
  margin: 0 0 32px;
  font-size: 13px;
  color: var(--g500);
}
.legal h2 {
  margin: 34px 0 12px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--g900);
}
.legal p,
.legal li {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--g700, #333d4b);
  word-break: keep-all;
}
.legal ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.legal a {
  /* 기본 강조색(--blue)은 흰 배경에서 3.55:1이라 본문 링크로는 AA 미달이다.
     본문에 섞이는 링크라 --blue-dark를 쓴다. */
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 종목 리포트 ─────────────────────────────── */
/* 조회 시점 스냅샷 */
.snap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 2px;
  margin: 26px 0 0;
  background: var(--g150, #e5e8eb);
  border-radius: var(--r-md);
  overflow: hidden;
}
.snap > div {
  background: var(--white);
  padding: 14px 12px;
  display: grid;
  gap: 4px;
}
.snap span {
  font-size: 12px;
  color: var(--g500);
}
.snap b {
  font-size: 17px;
  font-weight: 800;
  color: var(--g900);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
}
.snap-as-of {
  grid-column: 1 / -1;
  background: var(--white);
  margin: 0;
  padding: 0 12px 12px;
  font-size: 11.5px;
  color: var(--g500);
}

/* 모델별 점수 막대 */
.score-board {
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
}
.score-row {
  display: grid;
  grid-template-columns: minmax(96px, 1.3fr) 3fr auto;
  align-items: center;
  gap: 12px;
}
.sb-name {
  font-size: 13.5px;
  color: var(--g600);
  word-break: keep-all;
}
.sb-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--g150, #e5e8eb);
  overflow: hidden;
}
.sb-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--g400, #b0b8c1);
}
.score-row.top .sb-bar i {
  background: var(--blue, #3182f6);
}
.score-row.top .sb-name {
  color: var(--g900);
  font-weight: 700;
}
.sb-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--g900);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}
.sb-num em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--g500);
  margin-left: 4px;
}

/* 카드뉴스 사진 */
.note-shot {
  margin: 34px 0 0;
}
.note-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 460px;
  margin: 0 auto;
  border-radius: var(--r-md);
  background: var(--g100, #f2f4f6);
}

@media (max-width: 560px) {
  .score-row {
    grid-template-columns: 1fr auto;
  }
  .sb-bar {
    display: none;
  }
}

/* 모델의 한계 — 접혀 있지만 개수는 밖에서 보인다 */
.limits {
  margin-top: var(--sp-section);
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--g50, #f9fafb);
  box-shadow: inset 0 0 0 1px var(--g150, #e5e8eb);
}
.limits > summary {
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--g700, #333d4b);
  letter-spacing: var(--ls-tight);
  list-style: none;
}
.limits > summary::-webkit-details-marker {
  display: none;
}
.limits > summary::after {
  content: '＋';
  float: right;
  color: var(--g500);
  font-weight: 500;
}
.limits[open] > summary::after {
  content: '−';
}
.limits > summary span {
  margin-left: 6px;
  font-weight: 500;
  color: var(--g500);
  font-size: 13px;
}
.limits ol {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--g600);
  font-size: 13.5px;
  line-height: 1.75;
}
.limits li + li {
  margin-top: 7px;
}

/* 점수를 그대로 믿으면 안 되는 경우의 경고 */
.rep-caveat {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff4e6;
  color: #8a4b00;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: var(--ls-base);
}
.rep-caveat + .rep-caveat {
  margin-top: 8px;
}

/* 종목별 재무 데이터 출처 표기 */
.metric-source {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--g150, #e5e8eb);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--g500);
  letter-spacing: var(--ls-base);
}
.metric-source strong {
  font-weight: 700;
  color: var(--g600);
}

.biz {
  margin-top: var(--sp-section);
  padding: var(--sp-card);
  box-shadow: var(--shadow);
}
.biz h3 {
  font-size: 17px;
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--g900);
}
.biz p {
  margin: 0;
  font-size: 14px;
  color: var(--g600);
  line-height: 1.78;
  font-weight: 500;
}

/* ── ETF 화면 ──────────────────────────────── */
.fund-note {
  background: var(--blue-weaker);
  box-shadow: inset 0 0 0 1px var(--blue-weak);
  padding: 20px;
  margin-bottom: 20px;
}
.fund-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--g700);
  font-weight: 500;
}
.fund-note strong {
  color: var(--blue-dark);
  font-weight: 700;
}
.holdings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: var(--shadow);
}
.hold {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 15px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
}
.hold:hover {
  background: var(--g50);
}
.hold .sym {
  font-weight: 800;
  width: 72px;
  flex: none;
  color: var(--blue-dark);
  font-size: 13px;
  letter-spacing: var(--ls-num);
}
.hold .nm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g700);
  font-weight: 500;
}
.hold .bar {
  width: 120px;
  flex: none;
  height: 8px;
  border-radius: 999px;
  background: var(--g100);
  overflow: hidden;
}
.hold .bar i {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 999px;
}
.hold .w {
  width: 54px;
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: var(--ls-num);
  color: var(--g900);
}

/* ── 상태 ──────────────────────────────────── */
.state {
  text-align: center;
  padding: 72px 20px;
  color: var(--g600);
  font-weight: 500;
}
.state.error {
  color: var(--bad);
  font-weight: 600;
}
.spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--g200);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -10px;
}
.spinner.big {
  position: static;
  width: 36px;
  height: 36px;
  border-width: 3px;
  margin: 0 auto 16px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.fade-in {
  animation: fade 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ── 푸터 ──────────────────────────────────── */
.footer {
  border-top: 1px solid var(--g100);
  margin-top: 72px;
  padding: 32px 0 48px;
  background: var(--white);
}
.disclaimer {
  font-size: 14px;
  color: var(--g700);
  line-height: 1.75;
  margin: 0 0 14px;
  font-weight: 500;
  background: var(--g50);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.disclaimer strong {
  color: var(--g900);
  font-weight: 700;
}
.disclaimer em {
  font-style: normal;
  font-weight: 700;
  color: var(--g800);
}
.source {
  font-size: 13px;
  color: var(--g500);
  margin: 0;
  line-height: 1.72;
  font-weight: 500;
}

/* ── 반응형 ────────────────────────────────── */
@media (max-width: 760px) {
  .investors {
    grid-template-columns: repeat(3, 1fr);
  }
  .inv {
    padding: 14px 6px 12px;
    gap: 7px;
  }
  .inv-face {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .market-bar {
    position: static;
  }
  .rep-sum,
  .flow-grid {
    grid-template-columns: 1fr;
  }
  .sh-price {
    text-align: left;
  }
  .sh-price .c {
    justify-content: flex-start;
  }
  .step {
    padding: 36px 0 16px;
  }
  .gauge {
    width: 112px;
    height: 112px;
  }
  .rep-top {
    gap: 18px;
  }
  .stock-head,
  .insight,
  .rep-hero,
  .philosophy,
  .biz,
  .fund-note,
  .check {
    padding: var(--sp-card-sm);
  }
  .hold .bar {
    display: none;
  }
  .footer {
    margin-top: 48px;
  }
}
@media (max-width: 480px) {
  /* 트랙이 한 줄을 차지하고 최저·최고 라벨이 그 아래 양끝으로 간다 */
  .pos-row {
    justify-content: space-between;
  }
  .pos-track {
    order: -1;
    flex-basis: 100%;
    margin-bottom: 4px;
  }
}
@media (max-width: 420px) {
  .investors {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hold .sym {
    width: 60px;
  }
  .hold .w {
    width: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}