/* ==========================================================================
   Design tokens
   Source: Taste analysis of gm-meme.com (structure) + finance-trust tone-down
   ========================================================================== */

:root {
  /* color -- see DESIGN.md for the 3-group rule (brand / up-down / base) */
  --color-bg: #faf5ec;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f1ea;
  --color-text: #2e2620;
  --color-text-muted: #6b6055;
  --color-border: #e5ddd0;
  --color-accent: #d97757;
  /* warm charcoal, not white: white-on-#d97757 is ~3.1:1 (fails WCAG AA
     text), warm-charcoal-on-#d97757 is ~4.8:1 */
  --color-accent-contrast: var(--color-text);
  --color-accent-soft: #f7e4dc;
  /* deeper terracotta reserved for solid-fill + white-text contexts (the
     LIVE badge): --color-accent itself is only ~3.1:1 with white, this is
     ~5.2:1 */
  --color-accent-deep: #b3512d;
  --color-accent-deep-contrast: #ffffff;
  /* card/divider border: opaque dark terracotta, not a translucent one --
     needed the extra contrast against the cream page background to read as
     "clearly visible" rather than a faint tint */
  --color-card-border: #a8583a;
  --color-warn: #ebd22f;

  /* theme: always light, matching the reference site (no dark mode) */
  color-scheme: light;

  /* type: display (headings/logo/buttons) = Pretendard, weight varies by
     use (see DESIGN.md -- .hero h1 and .logo are Black/900, rest still 700
     pending a full type-scale pass) */
  --font-display: "Pretendard", sans-serif;
  /* body (paragraphs, lists, small text) = Pretendard for readability */
  --font-body: "Pretendard", sans-serif;
  --fs-h1: clamp(2.25rem, 5vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 1rem, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  /* spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 5rem;
  --space-12: 7rem;

  /* shape */
  --radius-card: 0.75rem;
  --radius-pill: 100px;

  /* layout */
  --container-max: 80rem;

  /* semantic status colors -- finance convention, never reused elsewhere */
  --color-up: #1a7f37;
  --color-down: #d1242f;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Component rules like .hero{display:flex} outrank the UA [hidden] rule by
   cascade origin, not just specificity -- force hidden elements to stay
   collapsed regardless of what display value their own class sets. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: var(--space-1) var(--space-2);
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Card border: solid, opaque dark terracotta -- deliberately not a faint
   hairline, needs to read clearly against the cream page background. Corner
   radius is intentionally modest ("slightly rounded", not pill-like). */
.card {
  position: relative;
  background: var(--color-surface);
  border: 1.5px solid var(--color-card-border);
  border-radius: var(--radius-card);
  transition: border-color 0.15s ease;
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--color-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

/* small terracotta accent bar next to every main-section heading -- the
   brand color's reach was widened past buttons/links per DESIGN.md */
main h2 {
  position: relative;
  padding-left: 1rem;
}

main h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: var(--color-accent);
}

h3 {
  font-family: var(--font-body);
  font-weight: 700;
}

p {
  font-weight: 400;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
}

.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.02rem;
}

.nav-list {
  display: flex;
  gap: var(--space-4);
}

.nav-list a {
  display: inline-block;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .nav-list a {
    transition: none;
  }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  margin: 4px 0;
}

/* ==========================================================================
   Hero / Cover screen (shown first; hidden once "시작하기" reveals the main screen)
   ========================================================================== */
.hero {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden auto;
  display: flex;
  align-items: center;
  padding-block: var(--space-8) var(--space-8);
  background: var(--color-bg);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hero.is-hiding {
  opacity: 0;
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    transition: none;
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: 56rem;
}

.hero-illustration {
  width: clamp(140px, 22vw, 220px);
  height: auto;
  flex-shrink: 0;
}

.hero-copy {
  display: grid;
  gap: var(--space-4);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.02rem;
}

.hero p {
  color: var(--color-text-muted);
  font-size: 1.125rem;
  max-width: 42ch;
}

.hero .cta-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

@media (hover: hover) {
  .btn-primary:hover {
    filter: brightness(0.92);
  }

  .btn-secondary:hover {
    background: var(--color-surface-alt);
  }

  .nav-list a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }

  .footer-links a:hover {
    color: var(--color-accent);
  }
}

/* ==========================================================================
   Big Events (same card material as .realtime-stat: .card in the Reset
   section supplies the terracotta border/radius/hover)
   ========================================================================== */
.big-events {
  position: relative;
  padding-block: var(--space-8);
}

.big-events h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-4);
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.event-card {
  padding: var(--space-4);
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* expanded: centered fixed-position lightbox (not a grid-column expand --
   that would need the grid to auto-size around it, a circular-sizing
   headache in Chromium worked through in an earlier pass; fixed
   positioning removes the card from grid track sizing entirely). */
.event-card.is-expanded {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 31;
  width: min(90vw, 34rem);
  max-height: 85vh;
  overflow-y: auto;
}

.event-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.event-lightbox-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.event-org {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.event-decision {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  text-wrap: balance;
}

.event-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.event-zoom {
  display: flex;
  padding: 0.35rem;
  margin: -0.35rem;
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  touch-action: manipulation;
}

.event-zoom-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.event-date {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.event-detail-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.event-detail-wrap.is-open {
  max-height: 40rem;
}

.event-detail-content {
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.event-block-label {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .event-detail-wrap,
  .event-lightbox-backdrop {
    transition: none;
  }
}

/* ==========================================================================
   Features
   ========================================================================== */
.features {
  position: relative;
  padding-block: var(--space-8);
}

.features h2 {
  font-size: var(--fs-h2);
  max-width: 28ch;
  margin-bottom: var(--space-6);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.feature-card {
  padding: var(--space-4);
}

.feature-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-1);
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ==========================================================================
   Search & Filter
   ========================================================================== */
.search-filter {
  position: relative;
  padding-block: var(--space-8);
}

.search-filter h2 {
  font-size: var(--fs-h2);
  max-width: 28ch;
  margin-bottom: var(--space-4);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.search-field {
  flex: 1 1 16rem;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.filter-field label {
  font-size: var(--fs-small);
}

input[type="search"],
input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"],
select {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.65rem 0.85rem;
  width: 100%;
  touch-action: manipulation;
}

/* ==========================================================================
   Realtime
   ========================================================================== */
.realtime {
  position: relative;
  padding-block: var(--space-8);
}

/* left-align this section only -- .container itself stays centered
   site-wide, this override just drops the right auto-margin here so extra
   space collects on the right instead */
.realtime .container {
  margin-inline: var(--space-6) auto;
}

.section-heading-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.section-heading-row h2 {
  font-size: var(--fs-h2);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--fs-small);
}

/* solid-fill variant for a single strong callout (the realtime "LIVE" badge)
   -- --color-accent-soft's pale tint reads fine for the tag-chip use above,
   but a badge this small needs the deeper shade for white text to stay
   readable (see --color-accent-deep's contrast note in the tokens). */
.badge--live {
  background: var(--color-accent-deep);
  color: var(--color-accent-deep-contrast);
  font-weight: 700;
}

/* Single left-aligned column, stacked top to bottom: kospi (large) ->
   nasdaq+kosdaq pair -> s&p500 (large, same size as kospi) -> usd/krw+wti
   pair. max-width caps the column narrower than the section container so
   the whitespace stays on the right, matching the large cards' width so
   each paired row (split in two, minus the gap) lines up under them. */
.realtime-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  max-width: 38rem;
}

.realtime-row {
  display: flex;
  gap: var(--space-2);
}

.realtime-row .realtime-stat {
  flex: 1;
  min-width: 0;
}

.realtime-stat {
  padding: var(--space-2);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 5rem;
}

.realtime-stat-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}

.realtime-stat-label {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  font-weight: 700;
}

.realtime-stat--lg {
  min-height: 10rem;
  padding: var(--space-4);
}

.realtime-stat--lg .realtime-value {
  font-size: 2em;
}

.realtime-value {
  font-variant-numeric: tabular-nums;
  font-size: 1.15em;
}

/* 실제 차트 라이브러리 연동 예정 자리 -- 사선 해치 패턴으로 표시만 해두는
   placeholder. 실제 데이터로 교체할 때는 이 클래스를 가진 요소를 찾아
   차트 라이브러리의 canvas/svg로 바꿔 끼우면 됨. */
.realtime-stat-chart {
  flex-shrink: 0;
  width: 4rem;
  height: 3rem;
  border: 1.5px solid var(--color-card-border);
  border-radius: var(--radius-card);
  transition: border-color 0.15s ease;
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--color-card-border) 30%, transparent),
    color-mix(in srgb, var(--color-card-border) 30%, transparent) 4px,
    transparent 4px,
    transparent 8px
  );
}

@media (hover: hover) {
  .card:hover .realtime-stat-chart {
    border-color: var(--color-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .realtime-stat-chart {
    transition: none;
  }
}

.realtime-stat-chart--lg {
  width: 9rem;
  height: 7rem;
}

.realtime-change.up {
  color: var(--color-up);
}

.realtime-change.down {
  color: var(--color-down);
}

/* ==========================================================================
   Hot Ranking
   ========================================================================== */
.hot-ranking {
  position: relative;
  padding-block: var(--space-8);
}

.hot-ranking h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-4);
}

.table-scroll {
  position: relative;
  overflow-x: auto;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ranking-table th,
.ranking-table td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.ranking-table th {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.ranking-table .up {
  color: var(--color-up);
  font-size: 1.1em;
}

.ranking-table .down {
  color: var(--color-down);
  font-size: 1.1em;
}

/* ==========================================================================
   Account link (Toss integration placeholder)
   ========================================================================== */
.account-link {
  position: relative;
  padding-block: var(--space-8);
}

.account-link h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2);
}

.account-link > .container > p {
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: var(--space-3);
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.account-card {
  padding: var(--space-4);
}

.account-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-1);
}

.account-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  padding-block: var(--space-4);
  margin-top: var(--space-8);
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.footer-links {
  display: flex;
  gap: var(--space-3);
}

/* 약관을 안 읽어도 눈에 띄게, 투자 자문이 아니라는 점을 사이트 전체
   푸터에서 한 번 더 강조한다(이용약관 제9조 면책조항과 별개 위치). */
.footer-disclaimer {
  max-width: var(--container-max);
  margin: var(--space-2) auto 0;
  padding-inline: var(--space-3);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--fs-small);
}

.ai-credit {
  max-width: var(--container-max);
  margin: var(--space-2) auto 0;
  padding-inline: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  opacity: 0.75;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .nav-list {
    position: absolute;
    top: 4.5rem;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3);
    gap: var(--space-2);
    display: none;
  }

  .nav-list.is-open {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-block: var(--space-6);
  }

  .hero-inner {
    flex-direction: column;
    text-align: center;
  }

  .hero-illustration {
    width: 140px;
  }

  .hero p {
    max-width: none;
  }

  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    flex-direction: column;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }

  .event-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}