/* 나 상장하기 — 장르: 증권 단말기 · 거래소 전광판
 * 근흑색 바탕 + 앰버 라벨 + 헤어라인 그리드, 모노스페이스 시세, 스플릿 플랩/오도미터 숫자.
 * 한국 증시 관례: 상승 = 빨강, 하락 = 파랑. */
:root,
:root[data-theme="dark"] {
  --brand: #f0445a;
  --brand-pressed: #d62f45;
  --brand-soft: #3a1820;
  --brand-on: #ffffff;

  --font-display: "IBM Plex Sans KR", var(--font-sans);

  /* 사이트 장식 변수 (--art-*) */
  --art-num: "IBM Plex Mono", var(--font-mono);
  --art-up: var(--color-danger);
  --art-down: #3d8bfd; /* 공용 토큰에 파랑 역할이 없어 하락색만 사이트에서 정의 */
  --art-amber: var(--color-warning);
  --art-up-soft: color-mix(in srgb, var(--art-up) 16%, transparent);
  --art-down-soft: color-mix(in srgb, var(--art-down) 18%, transparent);
  --art-amber-soft: color-mix(in srgb, var(--art-amber) 14%, transparent);
  --art-grid: color-mix(in srgb, var(--color-text) 7%, transparent);
  --art-scan: color-mix(in srgb, var(--color-text) 2.5%, transparent);
  /* 스프링(오버슈트 후 정착) */
  --art-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --art-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body { font-variant-numeric: tabular-nums; }

.num,
.t-num { font-family: var(--art-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.up { color: var(--art-up); }
.down { color: var(--art-down); }
.flat { color: var(--color-text-secondary); }
.amber { color: var(--art-amber); }

/* 공용 컴포넌트 톤 맞추기: 블러 대신 단색 바, 모서리는 단말기처럼 작게 */
.topbar {
  background: var(--color-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--color-border);
}
.topbar__brand { font-family: var(--art-num); letter-spacing: -0.02em; }
.btn { border-radius: var(--r-6); transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-slow) var(--art-pop); }
.btn:active:not(:disabled):not(.is-loading) { transform: scale(0.95, 0.92); transition-duration: 60ms; }
.btn--lg { border-radius: var(--r-8); }
.badge { border-radius: var(--r-4); font-family: var(--art-num); }
.chip { border-radius: var(--r-6); }
.sheet { border-radius: var(--r-12) var(--r-12) 0 0; }

/* 단말기 라벨: 기능 코드 + 이름 */
.fn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font: var(--label-03);
  font-family: var(--art-num);
  color: var(--art-amber);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fn b {
  padding: 0 var(--sp-4);
  border-radius: var(--r-4);
  background: var(--art-amber);
  color: var(--color-bg);
}

/* ---------- 세그먼트 ---------- */
.seg {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-6);
  overflow: hidden;
}
.seg__btn {
  flex: 1 1 0;
  min-height: var(--tap-min);
  padding: 0 var(--sp-16);
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: var(--label-02);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.seg__btn + .seg__btn { border-left: 1px solid var(--color-border-strong); }
.seg__btn[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }
.seg--sm .seg__btn { min-height: 36px; padding: 0 var(--sp-10); font: var(--label-03); font-family: var(--art-num); }

/* ---------- 스플릿 플랩 ---------- */
.flap { display: inline-flex; gap: var(--sp-2); perspective: 400px; font-family: var(--art-num); font-weight: 700; }
.flap__t {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 1.05em;
  padding: 0.08em 0.12em;
  border-radius: var(--r-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  line-height: 1.1;
  transform-origin: 50% 50%;
}
.flap__t::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--color-bg);
  opacity: 0.9;
}
.flap__t.is-sp { background: transparent; border-color: transparent; min-width: 0.4em; }
.flap__t.is-sp::after,
.flap__t.is-p::after { display: none; }
.flap__t.is-p { background: transparent; border-color: transparent; min-width: 0.5em; padding: 0; }
.flap__t.is-flip { animation: flap-flip 62ms cubic-bezier(0.4, 0, 1, 1) both; }
.flap__t.is-land { animation: flap-land 420ms var(--art-pop) both; }
@keyframes flap-flip {
  from { transform: rotateX(70deg); filter: brightness(0.6); }
  to { transform: rotateX(0); }
}
@keyframes flap-land {
  0% { transform: rotateX(80deg); filter: brightness(0.6); }
  100% { transform: rotateX(0); }
}

/* ---------- 오도미터 ---------- */
.odo { display: inline-flex; font-family: var(--art-num); letter-spacing: -0.03em; }
.odo__d { display: inline-block; height: 1.15em; line-height: 1.15em; overflow: hidden; vertical-align: bottom; }
.odo__s { display: flex; flex-direction: column; transition: transform 900ms var(--art-spring); will-change: transform; }
.odo__s span { height: 1.15em; }
.odo__c { line-height: 1.15em; height: 1.15em; }

/* ---------- 키네틱 헤드라인 ---------- */
.kin { clip-path: inset(-0.2em -0.2em -0.1em -0.2em); }
.kin__w { display: inline-block; white-space: nowrap; }
.kin__c { display: inline-block; transform-origin: 50% 100%; animation: kin-in 640ms both; }
@keyframes kin-in {
  0% { transform: translateY(105%) scaleY(1.5); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  55% { transform: translateY(-10%) scaleY(0.86) scaleX(1.06); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  78% { transform: translateY(2%) scaleY(1.04); }
  100% { transform: none; }
}

/* ---------- 인트로 ---------- */
.intro { padding-top: var(--sp-8); }
.intro__stage { align-items: center; min-height: 0; }
.intro__steps { justify-content: flex-start; gap: var(--sp-4); margin: var(--sp-16) 0 var(--sp-12); }
.intro__steps span { width: 28px; height: 3px; border-radius: 0; background: var(--color-border-strong); }
.intro__steps span.is-on { width: 28px; background: var(--art-amber); }
.intro__caption { text-align: left; min-height: 96px; }
.intro__caption.fade-swap { animation: none; }
.intro__caption .t-title-02 { font: var(--title-01); letter-spacing: -0.03em; }
.intro__caption p { font: var(--body-03); }

.term {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-6);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.term::after {
  /* 스캔라인 질감 */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--art-scan) 0 1px, transparent 1px 3px);
}
.term__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-6) var(--sp-10);
  border-bottom: 1px solid var(--color-border);
  font: var(--label-03);
  font-family: var(--art-num);
  color: var(--art-amber);
}
.term__live { display: inline-flex; align-items: center; gap: var(--sp-6); }
.term__live i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--art-up); animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.tape-wrap { overflow: hidden; border-bottom: 1px solid var(--color-border); padding: var(--sp-6) 0; background: var(--color-bg); }
.tape {
  display: inline-flex;
  gap: var(--sp-24);
  white-space: nowrap;
  font: var(--label-03);
  font-family: var(--art-num);
  color: var(--color-text-secondary);
  animation: tape 18s linear infinite;
  padding-left: var(--sp-10);
}
.tape b { color: var(--color-text); font-weight: 700; }
.tape .up, .tape .down { font-weight: 700; }
.term[data-scene="1"] .tape { animation-duration: 7s; }
@keyframes tape { to { transform: translateX(-50%); } }

.term__quote {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4) var(--sp-12);
  align-items: end;
  padding: var(--sp-12) var(--sp-10) var(--sp-8);
}
.term__name { font: var(--title-04); display: flex; align-items: center; gap: var(--sp-8); }
.term__name .flap { font-size: 13px; }
.term__price { font: var(--title-01); font-family: var(--art-num); grid-column: 1; }
.term__chg { font: var(--label-02); font-family: var(--art-num); text-align: right; }
.term__meta { font: var(--label-03); font-family: var(--art-num); color: var(--color-text-tertiary); text-align: right; }
.term__chart { position: relative; border-top: 1px solid var(--color-border); }
.term__svg { width: 100%; height: auto; display: block; }
.term__svg text { font-family: var(--art-num); }
.term__readout {
  position: absolute;
  left: var(--sp-10);
  bottom: var(--sp-6);
  font: var(--label-03);
  font-family: var(--art-num);
  color: var(--art-amber);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.term[data-scene="1"] .term__readout,
.term[data-scene="2"] .term__readout { opacity: 1; }
.term__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); padding: var(--sp-8) var(--sp-10) var(--sp-10); border-top: 1px solid var(--color-border); perspective: 300px; }
.term__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-4) 0;
  border-radius: var(--r-4);
  border: 1px solid var(--color-border);
  font: var(--label-03);
  font-family: var(--art-num);
  color: var(--color-text-tertiary);
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.term__day small { font-size: 9px; line-height: 12px; font-family: var(--font-sans); }
.term[data-scene="3"] .term__day { color: var(--color-text); animation: day-flip 520ms var(--art-pop) both; }
.term[data-scene="3"] .term__day.is-son { border-color: var(--art-amber); background: var(--art-amber-soft); color: var(--art-amber); }
@keyframes day-flip {
  0% { transform: rotateX(90deg); }
  100% { transform: none; }
}

/* SVG 레이어 */
.g-grid line { stroke: var(--art-grid); stroke-width: 1; }
.term .g-grid { clip-path: inset(0 100% 0 0); }
.term[data-scene="0"] .g-grid { animation: wipe 700ms cubic-bezier(0.7, 0, 0.2, 1) both; }
.term:not([data-scene="0"]) .g-grid { clip-path: none; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
.g-band { transform-box: fill-box; transform-origin: 50% 0; }
.g-band rect { fill: transparent; }
.g-band.is-odd rect { fill: var(--art-grid); }
.g-band text { font-size: 9.5px; font-weight: 700; fill: var(--color-text-secondary); }
.g-band text.age { font-size: 8px; font-weight: 500; fill: var(--color-text-tertiary); }
.g-band text.is-up { fill: var(--art-up); }
.g-band text.is-down { fill: var(--art-down); }
.term[data-scene="0"] .g-band { opacity: 0; }
.term[data-scene="1"] .g-band { animation: band-drop 620ms var(--art-spring) both; }
@keyframes band-drop {
  0% { transform: translateY(-40px) scaleY(1.3); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.g-stop1 { stop-color: var(--art-up); stop-opacity: 0.3; }
.g-stop2 { stop-color: var(--art-up); stop-opacity: 0; }
.g-line { fill: none; stroke: var(--art-up); stroke-width: 1.8; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.term[data-scene="0"] .g-line { animation: draw 1900ms cubic-bezier(0.6, 0, 0.2, 1) 500ms both; }
.term[data-scene="0"] .g-area { animation: area-in 500ms ease-out 2200ms both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes area-in { from { opacity: 0; } }
.g-now { stroke: var(--color-text-tertiary); stroke-dasharray: 2 3; }
.g-nowdot { fill: var(--color-text); }
.g-cross line { stroke: var(--art-amber); stroke-width: 1; }
.g-cross circle { fill: var(--art-amber); stroke: var(--color-bg); stroke-width: 2; }
.g-cross { opacity: 0; }
.term[data-scene="1"] .g-cross,
.term[data-scene="2"] .g-cross { opacity: 1; }
.g-zone { fill: var(--art-down-soft); clip-path: inset(0 100% 0 0); }
.term[data-scene="2"] .g-zone { animation: wipe 500ms cubic-bezier(0.7, 0, 0.2, 1) 900ms both; }
.g-peak { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.g-peak rect { fill: var(--art-amber); }
.g-peak text { font-size: 10.5px; font-weight: 700; fill: var(--color-bg); }
.term[data-scene="2"] .g-peak { animation: squash 700ms 650ms both; }
@keyframes squash {
  0% { opacity: 0; transform: translateY(14px) scale(0.3, 0.3); }
  35% { opacity: 1; transform: translateY(-6px) scale(1.12, 0.84); animation-timing-function: ease-out; }
  60% { transform: translateY(2px) scale(0.95, 1.08); }
  80% { transform: scale(1.02, 0.98); }
  100% { opacity: 1; transform: none; }
}
.g-chart { transition: opacity var(--dur-slow) var(--ease-standard); }
.term[data-scene="3"] .g-chart { opacity: 0.1; }
.g-candles { visibility: hidden; }
.term[data-scene="3"] .g-candles { visibility: visible; }
.g-candle { transform-box: fill-box; transform-origin: 50% 50%; }
.term[data-scene="3"] .g-candle { animation: candle 560ms var(--art-spring) both; }
@keyframes candle { 0% { transform: scaleY(0); } 100% { transform: none; } }
.g-candle.is-up line { stroke: var(--art-up); }
.g-candle.is-up rect { fill: var(--art-up); }
.g-candle.is-down line { stroke: var(--art-down); }
.g-candle.is-down rect { fill: var(--art-down); }

.intro__cta .btn--ghost { justify-content: flex-start; padding-left: 0; color: var(--color-text-secondary); }
.ma-invite {
  margin-top: var(--sp-8);
  padding: var(--sp-12);
  border-left: 3px solid var(--art-amber);
  background: var(--color-surface);
  font: var(--body-03);
}
.ma-invite b { display: block; font: var(--body-03-strong); }
.ma-invite span { color: var(--color-text-secondary); font: var(--caption-01); }

/* ---------- 입력 ---------- */
.form { padding: var(--sp-16) 0 var(--sp-48); }
.form__title { margin: var(--sp-8) 0 var(--sp-4); font: var(--title-01); letter-spacing: -0.03em; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: var(--sp-8); }
.form .seg { width: 100%; }
.form .input { border-radius: var(--r-6); background: var(--color-surface); }
.date-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-8); }
.date-row select { padding: 0 var(--sp-12); font-family: var(--art-num); }
.time-row { display: flex; gap: var(--sp-8); align-items: stretch; }
.time-row .input { flex: 1 1 auto; font-family: var(--art-num); }
.time-row .chip { min-height: 52px; padding: 0 var(--sp-20); }
.check { display: flex; align-items: center; gap: var(--sp-8); min-height: var(--tap-min); font: var(--body-03); }
.check input { width: 20px; height: 20px; accent-color: var(--color-primary); }
select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-tertiary) 50%),
    linear-gradient(135deg, var(--color-text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* ---------- 시세 헤더 ---------- */
.quote { padding: var(--sp-16) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-12); }
.quote__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.quote__name { font: var(--title-02); letter-spacing: -0.02em; word-break: break-all; }
.quote__code .flap { font-size: 14px; }
.quote__sector { margin-top: var(--sp-4); font: var(--label-03); color: var(--art-amber); font-family: var(--art-num); }
.quote__price { font: var(--display-01); font-family: var(--art-num); letter-spacing: -0.04em; margin-top: var(--sp-12); display: flex; align-items: baseline; gap: var(--sp-4); }
.quote__price small { font: var(--title-04); color: var(--color-text-secondary); }
.quote__chg { font: var(--label-01); font-family: var(--art-num); }
.quote__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-12);
  border-top: 1px solid var(--color-border);
}
.quote__grid > div { padding: var(--sp-8) 0 0; }
.quote__grid > div + div { padding-left: var(--sp-10); border-left: 1px solid var(--color-border); }
.kv-k { font: var(--label-03); color: var(--color-text-tertiary); }
.kv-v { font: var(--label-02); font-family: var(--art-num); }

.subnav {
  position: sticky;
  top: 56px;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 calc(var(--gutter) * -1) var(--sp-12);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.subnav__a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  font: var(--label-03);
  font-family: var(--art-num);
  color: var(--color-text-tertiary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.subnav__a.is-on { color: var(--art-amber); border-bottom-color: var(--art-amber); }

/* ---------- 패널 ---------- */
.panel {
  scroll-margin-top: 112px;
  margin-bottom: var(--sp-12);
  padding: var(--sp-12) var(--sp-12) var(--sp-16);
  border-radius: var(--r-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.panel h2 { margin: var(--sp-4) 0 0; font: var(--title-03); }
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-8); padding-bottom: var(--sp-10); margin-bottom: var(--sp-10); border-bottom: 1px solid var(--color-border); }
.chart-hint { margin: 0 0 var(--sp-4); }
.chart-wrap { position: relative; margin: 0 calc(var(--sp-4) * -1); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.chart-wrap canvas { touch-action: pan-y; }
.chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: var(--sp-6) var(--sp-10);
  border-radius: var(--r-4);
  background: var(--color-bg);
  border: 1px solid var(--art-amber);
  font: var(--label-03);
  white-space: nowrap;
  pointer-events: none;
}
.chart-tip b { font: var(--label-02); font-family: var(--art-num); }
.chart-tip span { color: var(--color-text-secondary); }

.stat-row { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--sp-12); border-top: 1px solid var(--color-border); }
.stat { padding: var(--sp-10) var(--sp-8) var(--sp-10) 0; border-bottom: 1px solid var(--color-border); }
.stat:nth-child(2n) { padding-left: var(--sp-10); border-left: 1px solid var(--color-border); }
.stat__k { font: var(--label-03); color: var(--color-text-tertiary); }
.stat__v { font: var(--title-04); font-family: var(--art-num); letter-spacing: -0.02em; margin-top: var(--sp-2); }
.stat__s { font: var(--caption-01); color: var(--color-text-secondary); }

.daeun-title { margin: var(--sp-20) 0 var(--sp-6); }
.daeun-list { list-style: none; margin: 0; padding: 0; }
.daeun-list li {
  display: grid;
  grid-template-columns: 72px 1fr 52px;
  align-items: center;
  gap: var(--sp-8);
  min-height: 38px;
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--color-border);
  font: var(--body-03);
}
.daeun-list li.is-now { background: var(--art-amber-soft); border-left: 2px solid var(--art-amber); }
.daeun-list .age { color: var(--color-text-secondary); font: var(--label-03); font-family: var(--art-num); }
.daeun-list .gz b { font: var(--body-03-strong); }
.daeun-list .gz small { color: var(--color-text-tertiary); font: var(--caption-01); margin-left: var(--sp-4); }
.daeun-list .sc { text-align: right; font: var(--label-02); font-family: var(--art-num); }
.now-tag { font: var(--label-03); color: var(--art-amber); margin-left: var(--sp-4); }

/* ---------- 오늘의 시세 ---------- */
.today { margin: 0 0 var(--sp-12); padding: var(--sp-12); border-left: 3px solid var(--art-amber); background: var(--color-surface-sunken); }
.today__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); }
.today__k { font: var(--label-03); color: var(--color-text-tertiary); }
.today__price { font: var(--title-02); font-family: var(--art-num); letter-spacing: -0.03em; }
.today__chg { font: var(--label-02); font-family: var(--art-num); }
.today__c { margin-top: var(--sp-6); font: var(--body-03-strong); }
.candle-pick { margin: var(--sp-8) 0 0; min-height: 44px; }

/* ---------- 리포트 ---------- */
.report__mast {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--sp-8);
  border-bottom: 2px solid var(--color-text);
  font: var(--label-03);
  font-family: var(--art-num);
  color: var(--color-text-secondary);
}
.report__title { margin: var(--sp-12) 0 var(--sp-4); font: var(--title-03); }
.report__sub { margin: 0 0 var(--sp-12); }
.opinion { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--color-border-strong); }
.opinion > div { padding: var(--sp-10) var(--sp-4); }
.opinion > div + div { border-left: 1px solid var(--color-border); padding-left: var(--sp-10); }
.opinion__k { font: var(--label-03); color: var(--color-text-tertiary); }
.opinion__v { font: var(--title-03); font-family: var(--art-num); letter-spacing: -0.02em; }
.opinion__s { font: var(--caption-01); color: var(--color-text-secondary); }
.op-BUY { color: var(--art-up); }
.op-HOLD { color: var(--art-amber); }
.op-WATCH { color: var(--art-down); }
.report h3 { font: var(--label-02); color: var(--art-amber); margin: var(--sp-24) 0 var(--sp-8); }
.points { list-style: none; margin: 0; padding: 0; counter-reset: pt; }
.points li { position: relative; padding: var(--sp-10) 0 var(--sp-10) var(--sp-32); border-bottom: 1px solid var(--color-border); }
.points li::before {
  counter-increment: pt;
  content: counter(pt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--sp-10);
  font: var(--label-02);
  font-family: var(--art-num);
  color: var(--art-up);
}
.points--risk li::before { color: var(--art-down); content: "R" counter(pt); }
.points b { display: block; font: var(--body-03-strong); }
.points p { margin: var(--sp-2) 0 0; font: var(--body-03); color: var(--color-text-secondary); }
.sectors { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border); }
.sector { padding: var(--sp-10) var(--sp-8) var(--sp-10) 0; border-bottom: 1px solid var(--color-border); }
.sector:nth-child(2n) { padding-left: var(--sp-10); border-left: 1px solid var(--color-border); }
.sector__top { display: flex; justify-content: space-between; align-items: baseline; }
.sector__name { font: var(--label-02); }
.sector__v { font: var(--title-03); font-family: var(--art-num); }
.sector__d { font: var(--label-03); font-family: var(--art-num); }
.sector svg { margin-top: var(--sp-4); }
.sector__cap { font: var(--caption-01); font-family: var(--art-num); color: var(--color-text-tertiary); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--color-border); border-radius: var(--r-4); }
.pillar { padding: var(--sp-8) var(--sp-4); text-align: center; }
.pillar + .pillar { border-left: 1px solid var(--color-border); }
.pillar.is-day { background: var(--art-amber-soft); }
.pillar__k { font: var(--label-03); color: var(--color-text-tertiary); }
.pillar__h { font: var(--title-03); }
.pillar__ko { font: var(--caption-01); color: var(--color-text-secondary); }
.els { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); margin-top: var(--sp-12); }
.el__bar { height: 56px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--color-border-strong); }
.el__fill { width: 100%; background: var(--color-text-tertiary); }
.el.is-fav .el__fill { background: var(--art-up); }
.el.is-unfav .el__fill { background: var(--art-down); }
.el__k { font: var(--label-03); margin-top: var(--sp-4); }
.el__n { font: var(--caption-01); color: var(--color-text-tertiary); }
.legend { display: flex; gap: var(--sp-12); flex-wrap: wrap; margin-top: var(--sp-8); font: var(--caption-01); color: var(--color-text-secondary); }
.legend i { display: inline-block; width: 10px; height: 2px; margin-right: var(--sp-4); vertical-align: middle; }
.lg-up { background: var(--art-up); }
.lg-down { background: var(--art-down); }
.lg-neutral { background: var(--color-text-tertiary); }
.lg-amber { background: var(--art-amber); }
.note { margin: var(--sp-12) 0 0; font: var(--caption-01); color: var(--color-text-tertiary); }

/* ---------- 캘린더 ---------- */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.cal__title { font: var(--title-04); font-family: var(--art-num); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.cal__grid > * { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.cal__dow { text-align: center; font: var(--label-03); color: var(--color-text-tertiary); padding: var(--sp-4) 0; }
.cal__dow:first-child { color: var(--art-up); }
.cal__day {
  min-height: 58px;
  padding: var(--sp-4) var(--sp-2);
  border-top: 0;
  border-left: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  cursor: pointer;
  color: var(--color-text);
  text-align: left;
  border-radius: 0;
}
.cal__day:active { background: var(--color-surface-sunken); }
.cal__day.is-past { color: var(--color-text-disabled); }
.cal__day.is-son { background: var(--art-amber-soft); }
.cal__day.is-today { box-shadow: inset 0 0 0 2px var(--color-text); }
.cal__n { font: var(--label-02); font-family: var(--art-num); }
.cal__l { font: var(--caption-01); font-size: 10px; line-height: 12px; font-family: var(--art-num); color: var(--color-text-tertiary); }
.cal__day.is-son .cal__l { color: var(--art-amber); font-weight: 700; font-family: var(--font-sans); }
.cal__marks { display: flex; flex-wrap: wrap; gap: 1px; }
.tag {
  display: inline-grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-4);
  font: var(--label-03);
  font-size: 9px;
  line-height: 14px;
  color: var(--color-bg);
}
.tag--interview { background: var(--color-text); }
.tag--confess { background: var(--art-up); color: var(--brand-on); }
.tag--move { background: var(--art-amber); }
.tag--contract { background: var(--color-success); }
.cal__legend { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); margin-top: var(--sp-12); font: var(--caption-01); color: var(--color-text-secondary); align-items: center; }
.cal__legend .sw { display: inline-block; width: 12px; height: 12px; background: var(--art-amber-soft); border: 1px solid var(--art-amber); vertical-align: -2px; margin-right: var(--sp-4); }
.cal__picks { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--sp-12); border-top: 1px solid var(--color-border); }
.pick { padding: var(--sp-10) var(--sp-8) var(--sp-10) 0; border-bottom: 1px solid var(--color-border); font: var(--body-03); }
.pick:nth-child(2n) { padding-left: var(--sp-10); border-left: 1px solid var(--color-border); }
.pick b { font: var(--label-02); display: flex; gap: var(--sp-6); align-items: center; }
.pick span { color: var(--color-text-secondary); font-family: var(--art-num); }

.day-detail h2 { margin: 0; }
.day-detail .kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8) var(--sp-16); margin: var(--sp-16) 0; font: var(--body-03); }
.day-detail .kv dt { color: var(--color-text-tertiary); }
.day-detail .kv dd { margin: 0; }

/* ---------- M&A ---------- */
.ma__hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-4) 0 var(--sp-12); }
.ma__syn { font: var(--display-01); font-family: var(--art-num); letter-spacing: -0.05em; line-height: 1; }
.ma__label { font: var(--label-02); padding: var(--sp-4) var(--sp-8); border-radius: var(--r-4); }
.ma__label.is-up { background: var(--art-up-soft); color: var(--art-up); }
.ma__label.is-down { background: var(--art-down-soft); color: var(--art-down); }
.ma__label.is-flat { background: var(--art-amber-soft); color: var(--art-amber); }
.ma__why { list-style: none; padding: 0; margin: var(--sp-12) 0 0; font: var(--body-03); color: var(--color-text-secondary); }
.ma__why li { padding: var(--sp-8) 0; border-bottom: 1px solid var(--color-border); }
.ma__empty p { margin: 0 0 var(--sp-8); }

.share-panel h2 { margin-bottom: var(--sp-4); }
.share-panel p { margin: 0 0 var(--sp-16); }
.disclaimer { margin: var(--sp-8) 0 0; padding: var(--sp-12) 0; color: var(--color-text-tertiary); border-top: 1px solid var(--color-border); }
.cta-card p { margin: 0 0 var(--sp-8); }

/* ---------- 상장 세리머니 ---------- */
.ceremony {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  overflow: hidden;
}
.ceremony::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--art-scan) 0 1px, transparent 1px 3px);
}
.ceremony__confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ceremony__inner {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  padding: var(--sp-24) var(--gutter) calc(var(--sp-24) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.bell-bar { display: flex; align-items: center; justify-content: space-between; font: var(--label-03); font-family: var(--art-num); color: var(--art-amber); }
.bell-bar__dings { display: inline-flex; gap: var(--sp-6); }
.bell-bar__dings span { display: inline-block; padding: var(--sp-2) var(--sp-6); border: 1px solid var(--art-amber); border-radius: var(--r-4); animation: ding 520ms var(--art-pop) both; }
.bell-bar__dings span:nth-child(2) { animation-delay: 380ms; }
.bell-bar__dings span:nth-child(3) { animation-delay: 760ms; }
@keyframes ding {
  0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  40% { transform: scale(1.25) rotate(6deg); opacity: 1; background: var(--art-amber); color: var(--color-bg); }
  100% { transform: none; opacity: 1; }
}
.ceremony__head { font: var(--display-02); letter-spacing: -0.03em; margin: 0; }
.ticker-card {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-6);
  background: var(--color-surface);
  padding: var(--sp-16);
  animation: slam 640ms var(--art-spring) 200ms both;
}
@keyframes slam {
  0% { transform: translateY(60px) scale(0.94); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.ticker-card__top { display: flex; justify-content: space-between; align-items: center; font: var(--label-03); font-family: var(--art-num); color: var(--color-text-tertiary); }
.ticker-card__code .flap { font-size: 18px; }
.ticker-card__name { font: var(--display-02); letter-spacing: -0.03em; margin: var(--sp-12) 0 var(--sp-2); word-break: break-all; }
.ticker-card__sector { font: var(--body-03); color: var(--art-amber); margin: 0; }
.ticker-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6) var(--sp-16); margin: var(--sp-16) 0 0; padding-top: var(--sp-12); border-top: 1px dashed var(--color-border-strong); font: var(--body-03); }
.ticker-card dt { color: var(--color-text-tertiary); }
.ticker-card dd { margin: 0; text-align: right; font: var(--body-03-strong); }
.ticker-card__price { font: var(--title-01); color: var(--art-up); text-align: right; display: flex; justify-content: flex-end; }
.ceremony__msg { margin: 0; color: var(--color-text-secondary); font: var(--body-03); }
.ceremony .btn { animation: btn-in 560ms var(--art-pop) 1300ms both; }
@keyframes btn-in { 0% { transform: translateY(24px) scaleY(0.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ceremony .tape-wrap { margin: 0 calc(var(--gutter) * -1); border-top: 1px solid var(--color-border); }

/* =========================================================
 * 2차 개편 (§8): 속보 줄 캡션 · 매수 주문표 버튼 · 투자설명서 SEO 본문
 * ========================================================= */
.intro { padding-top: var(--sp-8); }

/* 속보 줄: 단말기 하단 뉴스 플래시 */
.term__flash {
  display: flex;
  align-items: stretch;
  min-height: 34px;
  border-top: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  overflow: hidden;
}
.term__flash > b {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0 var(--sp-10);
  background: var(--art-up);
  color: var(--brand-on);
  font: var(--label-03);
  letter-spacing: 0.08em;
}
.term__flash.is-in > b { animation: flash-tag 900ms steps(2, jump-none) 2; }
@keyframes flash-tag { 50% { background: var(--art-amber); color: var(--color-bg); } }
.term__flash-t {
  display: block;
  line-height: 34px !important;
  padding: 0 var(--sp-10);
  font: var(--label-02);
  font-family: var(--font-display);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
}
.term__flash.is-in .term__flash-t { animation: flash-wipe 420ms cubic-bezier(0.7, 0, 0.2, 1) both; }
@keyframes flash-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- 시작 버튼: 매수 주문표 (호가창 + 주문 측면) ---------- */
.intro__cta { gap: var(--sp-4); }
.order {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr 74px;
  align-items: stretch;
  width: 100%;
  min-height: 84px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-6);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--art-pop), border-color var(--dur-fast);
}
.order:active { transform: scale(0.97, 0.94); transition-duration: 60ms; border-color: var(--art-up); }
.order__book {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: var(--sp-6) var(--sp-6);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}
.ob { position: relative; display: block; height: 13px; font: 600 9.5px/13px var(--art-num); text-align: right; padding-right: var(--sp-2); }
.ob i { position: relative; z-index: 1; font-style: normal; }
.ob s { position: absolute; right: 0; top: 1px; bottom: 1px; width: var(--v); text-decoration: none; transform-origin: right; animation: ob-depth 2.4s var(--art-spring) infinite alternate; }
.ob:nth-child(2) s { animation-delay: 300ms; }
.ob:nth-child(4) s { animation-delay: 600ms; }
.ob:nth-child(5) s { animation-delay: 900ms; }
@keyframes ob-depth { from { transform: scaleX(0.55); } to { transform: none; } }
.ob--ask { color: var(--art-down); }
.ob--ask s { background: var(--art-down-soft); }
.ob--bid { color: var(--art-up); }
.ob--bid s { background: var(--art-up-soft); }
.ob--now { color: var(--color-text); outline: 1px solid var(--art-amber); outline-offset: -1px; }
.order__body { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); padding: 0 var(--sp-12); min-width: 0; }
.order__meta { font: var(--label-03); font-family: var(--art-num); color: var(--art-amber); letter-spacing: 0.02em; white-space: nowrap; }
.order__meta::after { content: " 10,000"; color: var(--color-text); }
.order__label { font: var(--title-03); font-family: var(--font-display); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order__side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--art-up);
  color: var(--brand-on);
  border-left: 2px dashed var(--color-surface);
}
.order__side b { font: var(--title-03); font-family: var(--font-display); letter-spacing: 0.04em; }
.order__side small { font: var(--label-03); font-family: var(--art-num); opacity: 0.85; }
.order:active .order__side { background: var(--brand-pressed); }
/* 체결 도장 */
.order::after {
  content: "체결";
  position: absolute;
  right: 86px;
  top: 50%;
  padding: var(--sp-2) var(--sp-8);
  border: 2px solid var(--art-up);
  border-radius: var(--r-4);
  color: var(--art-up);
  font: var(--label-01);
  font-family: var(--font-display);
  opacity: 0;
  transform: translateY(-50%) scale(2.2) rotate(-14deg);
  pointer-events: none;
}
.order.is-filled::after { animation: fill-stamp 320ms var(--art-pop) both; }
.order.is-filled .order__side { animation: fill-flash 320ms steps(2, jump-none); }
@keyframes fill-stamp { to { opacity: 1; transform: translateY(-50%) scale(1) rotate(-10deg); background: var(--color-surface); } }
@keyframes fill-flash { 50% { background: var(--art-amber); color: var(--color-bg); } }

/* 보조 링크: 기능 키 */
.fkey {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font: var(--label-02);
  cursor: pointer;
}
.fkey b { padding: 0 var(--sp-4); border-radius: var(--r-4); background: var(--art-amber); color: var(--color-bg); font: var(--label-03); font-family: var(--art-num); }
.fkey i { font-style: normal; color: var(--art-amber); }
.fkey:active { color: var(--color-text); }

/* ---------- SEO 본문: 투자설명서 ---------- */
.seo.filing { padding-top: var(--sp-40); color: var(--color-text); }
.filing__cover { padding: var(--sp-20) var(--sp-16); border: 1px solid var(--color-border-strong); border-top: 4px solid var(--art-amber); border-radius: var(--r-4); background: var(--color-surface); }
.filing__kind { display: flex; align-items: center; gap: var(--sp-8); margin: 0; font: var(--label-03); font-family: var(--art-num); color: var(--color-text-tertiary); }
.filing__kind b { padding: 0 var(--sp-6); border: 1px solid var(--art-amber); border-radius: var(--r-4); color: var(--art-amber); font-family: var(--font-display); }
.seo.filing h2 { margin: var(--sp-12) 0 var(--sp-16); font: var(--title-02); font-family: var(--font-display); letter-spacing: -0.02em; }
.filing__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 1px solid var(--color-border); }
.filing__meta div { padding: var(--sp-8) 0; border-bottom: 1px solid var(--color-border); }
.filing__meta div:nth-child(odd) { padding-right: var(--sp-8); border-right: 1px solid var(--color-border); }
.filing__meta div:nth-child(even) { padding-left: var(--sp-10); }
.filing__meta dt { font: var(--label-03); color: var(--color-text-tertiary); }
.filing__meta dd { margin: var(--sp-2) 0 0; font: var(--label-02); color: var(--color-text); }
.filing__warn { margin: var(--sp-12) 0 0; padding: var(--sp-8) var(--sp-10); border-left: 3px solid var(--art-up); background: var(--art-up-soft); font: var(--caption-01); color: var(--color-text-secondary); }
.filing__warn b { color: var(--art-up); margin-right: var(--sp-4); }
.filing__sec { margin-top: var(--sp-32); }
.seo.filing h3 { display: flex; align-items: baseline; gap: var(--sp-8); margin: 0 0 var(--sp-12); padding-bottom: var(--sp-8); border-bottom: 2px solid var(--color-text); font: var(--title-04); font-family: var(--font-display); }
.seo.filing h3 span { font: var(--label-03); font-family: var(--art-num); color: var(--art-amber); }
.filing__h4 { margin: var(--sp-20) 0 var(--sp-4); font: var(--label-01); font-family: var(--font-display); color: var(--art-amber); }
.filing__p { margin: 0 0 var(--sp-8); font: var(--body-03); color: var(--color-text-secondary); }
.filing__p b { color: var(--color-text); }
.filing__steps,
.filing__calc { margin: 0; padding: 0; list-style: none; counter-reset: f; }
.filing__steps li,
.filing__calc li { position: relative; padding: var(--sp-8) 0 var(--sp-8) var(--sp-32); border-bottom: 1px dashed var(--color-border); font: var(--body-03); color: var(--color-text-secondary); counter-increment: f; }
.filing__steps li::before,
.filing__calc li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: var(--sp-8); font: var(--label-03); font-family: var(--art-num); color: var(--art-amber); }
.filing__calc { margin-top: var(--sp-12); }
.filing__calc li::before { content: "식" counter(f); }
.filing__scroll { overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.filing__table { width: 100%; border-collapse: collapse; font: var(--label-02); font-variant-numeric: tabular-nums; }
.filing__table th,
.filing__table td { padding: var(--sp-8) var(--sp-4); border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.filing__table td { font-family: var(--art-num); font-size: 12px; letter-spacing: -0.02em; color: var(--color-text-secondary); }
.filing__table thead th { font: var(--label-03); color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-strong); background: var(--color-surface); }
.filing__table tbody th { font: var(--label-02); font-family: var(--font-display); color: var(--color-text); }
.filing__table tbody th small { display: block; font: var(--caption-01); font-size: 10px; color: var(--color-text-tertiary); }
.filing__table td:last-child { text-align: right; }
.filing__table td.up { color: var(--art-up); font-weight: 700; }
.filing__table td.down { color: var(--art-down); font-weight: 700; }
.filing__table--terms td:last-child,
.filing__table--son td:last-child { text-align: left; font-family: var(--font-sans); }
.filing__table--son .is-son th,
.filing__table--son .is-son td { color: var(--art-amber); background: var(--art-amber-soft); font-weight: 700; }
.filing__table--days td:last-child { color: var(--art-amber); }
.filing__table--days .is-today th { color: var(--art-up); }
.filing__note { margin: var(--sp-8) 0 0; font: var(--caption-01); color: var(--color-text-tertiary); }
@media (prefers-reduced-motion: reduce) {
  .ob s { animation: none; }
  .wl__cur, .wl .more-sites__item { animation: none !important; }
}
.filing__table thead th:last-child { text-align: right; }
.filing__table--terms thead th:last-child,
.filing__table--son thead th:last-child { text-align: left; }

/* ---------- 투자자 질의·회신 (FAQ): 감독원 질의회신 문서 형식 ---------- */
.qa__lead { margin: 0 0 var(--sp-12); }
.seo.filing .qa {
  margin-top: var(--sp-8);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-4);
  background: var(--color-surface);
  overflow: hidden;
}
.seo.filing .qa summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  min-height: var(--tap-min);
  padding: var(--sp-10) var(--sp-12);
  list-style: none;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.seo.filing .qa summary::-webkit-details-marker { display: none; }
.seo.filing .qa summary:active { background: var(--color-surface-raised); }
.qa__no { font: var(--label-03); font-family: var(--art-num); color: var(--color-text-tertiary); letter-spacing: 0.02em; }
.qa__cat { justify-self: start; padding: 0 var(--sp-6); border: 1px solid var(--color-border-strong); border-radius: var(--r-4); font: var(--label-03); color: var(--color-text-secondary); }
.qa__q { grid-column: 1 / 3; font: var(--body-03-strong); color: var(--color-text); }
.qa__q b { margin-right: var(--sp-4); font-weight: 700; color: var(--art-amber); }
.qa__state { grid-column: 3; grid-row: 1 / 3; align-self: center; padding: var(--sp-4) var(--sp-6); border-radius: var(--r-4); background: var(--art-amber-soft); font: var(--label-03); font-family: var(--art-num); color: var(--art-amber); white-space: nowrap; }
.qa__state::before { content: "미열람"; }
.qa[open] .qa__state { background: var(--color-surface-sunken); color: var(--color-text-tertiary); }
.qa[open] .qa__state::before { content: "열람"; }
.qa__a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  margin: 0 var(--sp-12) var(--sp-12);
  padding: var(--sp-12) var(--sp-48) var(--sp-12) 0;
  border-top: 1px dashed var(--color-border-strong);
  font: var(--body-03);
}
.qa__a > b { font-weight: 700; color: var(--art-up); white-space: nowrap; }
.qa__a p { margin: 0; color: var(--color-text-secondary); }
.qa__seal {
  position: absolute;
  right: 0;
  bottom: var(--sp-10);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--art-up);
  border-radius: var(--r-full);
  color: var(--art-up);
  font: var(--label-03);
  font-family: var(--font-display);
  transform: rotate(-14deg);
  opacity: 0.85;
}
.qa[open] .qa__seal { animation: qa-stamp 360ms var(--art-pop) 120ms both; }
@keyframes qa-stamp { from { opacity: 0; transform: rotate(-30deg) scale(2); } to { opacity: 0.85; transform: rotate(-14deg) scale(1); } }

/* ---------- 관련 종목 (다른 도구 링크): 관심종목 창 ---------- */
.more-sites.wl {
  margin-top: var(--sp-40);
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-6);
  background: var(--color-surface);
  overflow: hidden;
}
.wl .more-sites__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: var(--sp-10) var(--sp-12);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  opacity: 1;
}
.wl__t { display: inline-flex; align-items: center; gap: var(--sp-4); font: var(--title-04); font-family: var(--font-display); color: var(--color-text); }
.wl__cur { display: inline-block; width: 8px; height: 16px; background: var(--art-amber); animation: wl-blink 1s steps(2, jump-none) infinite; }
@keyframes wl-blink { 50% { opacity: 0; } }
.wl__head,
.wl .more-sites__item { display: grid; grid-template-columns: 44px 1fr 48px; align-items: center; gap: var(--sp-8); padding: 0 var(--sp-12); }
.wl__head { min-height: 26px; background: var(--color-surface-sunken); font: var(--label-03); font-family: var(--art-num); color: var(--color-text-tertiary); }
.wl__head span:last-child { text-align: center; }
.wl .more-sites__item {
  position: relative;
  min-height: 64px;
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-top: 1px solid var(--color-border);
  background-image: linear-gradient(90deg, var(--art-amber-soft), var(--art-amber-soft));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 220ms var(--art-pop), transform var(--dur-slow) var(--art-pop);
}
.wl .more-sites__item:first-of-type { border-top: 0; }
.wl .more-sites__item:active { background-size: 100% 100%; transform: scale(0.985, 0.96); transition-duration: 60ms; }
.wl__code { font: var(--label-02); font-family: var(--art-num); color: var(--art-amber); }
.wl__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.wl .more-sites__name { font: var(--body-02-strong); font-family: var(--font-display); color: var(--color-text); }
.wl .more-sites__desc { font: var(--caption-01); color: var(--color-text-tertiary); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl__go {
  display: grid;
  place-items: center;
  height: 32px;
  border-radius: var(--r-4);
  background: var(--art-up);
  color: var(--brand-on);
  font: var(--label-03);
  font-family: var(--art-num);
  letter-spacing: 0.06em;
  box-shadow: inset 0 -3px 0 var(--brand-pressed);
}
.wl .more-sites__item:active .wl__go { box-shadow: none; transform: translateY(2px); }
/* 화면에 들어오면 시세 줄이 한 줄씩 깜빡이며 찍힌다 */
.wl:not(.is-in) .more-sites__item { opacity: 0; }
.wl.is-in .more-sites__item { animation: wl-row 520ms var(--art-pop) calc(var(--i) * 110ms) both; }
@keyframes wl-row {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); background-size: 100% 100%; }
  45% { opacity: 1; clip-path: inset(0 0 0 0); background-size: 100% 100%; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); background-size: 0% 100%; }
}
.wl + .site-footer { padding-top: var(--sp-16); }