:root {
  color-scheme: light;
  --color-canvas: #f3f6f0;
  --color-surface: #ffffff;
  --color-forest: #173d35;
  --color-forest-soft: #245c4d;
  --color-lime: #d9ef68;
  --color-lime-soft: #eff7cf;
  --color-ink: #18211f;
  --color-muted: #64736e;
  --color-line: #dce5df;
  --color-danger: #a43f3f;
  --color-hero-start: #103f35;
  --color-hero-copy: #f2f7dc;
  --color-placeholder: #7c8985;
  --color-kicker: #537218;
  --color-status-line: #e4efba;
  --color-error-surface: #fff4f1;
  --color-error-line: #f1d4ce;
  --color-empty-surface: #f6f8f6;
  --color-result-copy: #4d5e59;
  --color-skeleton: #edf1ee;
  --color-skeleton-shine: #f8faf8;
  --color-canvas-glow: rgb(217 239 104 / 42%);
  --color-canvas-shade: rgb(36 92 77 / 14%);
  --color-hero-glow: rgb(217 239 104 / 20%);
  --font-size-kicker: 11px;
  --font-size-small: 12px;
  --font-size-label: 13px;
  --font-size-meta: 14px;
  --font-size-body-compact: 15px;
  --font-size-body: 16px;
  --font-size-result: 20px;
  --font-size-section: 28px;
  --font-size-section-mobile: 24px;
  --font-size-result-mobile: 18px;
  --font-size-hero: clamp(38px, 7vw, 52px);
  --line-height-body: 1.6;
  --line-height-copy: 1.65;
  --line-height-result: 1.35;
  --tracking-eyebrow: 0.16em;
  --tracking-hero: -0.055em;
  --tracking-heading: -0.025em;
  --tracking-result: -0.02em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 72px;
  --radius-control: 16px;
  --radius-hero: 24px;
  --radius-pill: 999px;
  --size-app-frame: 720px;
  --size-min-viewport: 320px;
  --size-copy: 30rem;
  --size-glow-small: 18rem;
  --size-glow-medium: 28rem;
  --size-glow-large: 32rem;
  --size-control: 56px;
  --size-touch: 48px;
  --size-status: 104px;
  --size-badge: 28px;
  --size-icon: 24px;
  --size-icon-small: 18px;
  --size-skeleton-title: 22px;
  --size-border: 1px;
  --size-focus: 3px;
  --size-focus-offset: 2px;
  --motion-lift: -2px;
  --duration-fast: 160ms;
  --duration-reduced: 0.01ms;
  --shadow-focus: 0 0 0 2px var(--color-forest);
  --shadow-frame: 0 24px 64px rgb(19 57 46 / 18%);
  --shadow-card: 0 14px 32px rgb(19 57 46 / 9%);
  --shadow-hero: 0 18px 42px rgb(23 61 53 / 18%);
  --shadow-input: 0 8px 22px rgb(11 45 37 / 16%);
  --shadow-action: 0 12px 28px rgb(23 61 53 / 22%);
  --shadow-action-hover: 0 15px 30px rgb(23 61 53 / 28%);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-canvas);
}

body {
  min-width: var(--size-min-viewport);
  min-height: 100vh;
  margin: 0;
  color: var(--color-ink);
  background:
    radial-gradient(
      circle at 12% 8%,
      var(--color-canvas-glow),
      transparent var(--size-glow-medium)
    ),
    radial-gradient(
      circle at 92% 92%,
      var(--color-canvas-shade),
      transparent var(--size-glow-large)
    ),
    var(--color-canvas);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

svg {
  display: block;
  width: var(--size-icon);
  height: var(--size-icon);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

:focus-visible {
  outline: var(--size-focus) solid var(--color-lime);
  outline-offset: var(--size-focus-offset);
  box-shadow: var(--shadow-focus);
}

.app-shell {
  width: min(100%, var(--size-app-frame));
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-frame);
}

.hero {
  margin: var(--space-6) var(--space-10) 0;
  padding: var(--space-9) var(--space-10);
  overflow: hidden;
  color: var(--color-surface);
  background:
    radial-gradient(
      circle at 100% 0%,
      var(--color-hero-glow),
      transparent var(--size-glow-small)
    ),
    linear-gradient(145deg, var(--color-hero-start), var(--color-forest-soft));
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-hero);
}

.eyebrow,
.section-kicker {
  margin: 0 0 var(--space-3);
  color: var(--color-lime);
  font-size: var(--font-size-small);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
}

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

.hero-copy,
.status-card,
.result-card h3,
.result-excerpt,
.page-footer p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1 {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-hero);
  font-weight: 600;
  letter-spacing: var(--tracking-hero);
  line-height: 1.06;
}

h1 strong {
  color: var(--color-lime);
  font-weight: inherit;
}

.hero-copy {
  max-width: var(--size-copy);
  margin-bottom: var(--space-7);
  color: var(--color-hero-copy);
  line-height: var(--line-height-copy);
}

.search-form label,
.showcase-section > label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-label);
  font-weight: 800;
}

.search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
}

input[type="search"] {
  width: 100%;
  min-height: var(--size-control);
  padding: 0 var(--space-5);
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--size-border) solid transparent;
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-input);
  appearance: none;
}

input[type="search"]::placeholder {
  color: var(--color-placeholder);
}

.primary-action {
  display: inline-flex;
  min-height: var(--size-control);
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  color: var(--color-forest);
  font-weight: 800;
  background: var(--color-lime);
  border: 0;
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-action);
  cursor: pointer;
  transition:
    transform var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    filter var(--duration-fast) ease;
}

.primary-action:hover {
  box-shadow: var(--shadow-action-hover);
  filter: brightness(1.03);
  transform: translateY(var(--motion-lift));
}

.primary-action:disabled {
  cursor: wait;
  filter: saturate(0.55);
  opacity: 0.72;
  transform: none;
}

.results-section,
.showcase-section {
  padding: var(--space-9) var(--space-10) var(--space-3);
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.section-kicker {
  margin-bottom: var(--space-1);
  color: var(--color-kicker);
  font-size: var(--font-size-kicker);
}

h2 {
  margin-bottom: 0;
  color: var(--color-forest);
  font-size: var(--font-size-section);
  letter-spacing: var(--tracking-heading);
  line-height: 1.25;
}

.count-badge,
.source-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-badge);
  padding: var(--space-1) var(--space-3);
  color: var(--color-forest);
  font-size: var(--font-size-small);
  font-weight: 800;
  background: var(--color-lime-soft);
  border-radius: var(--radius-pill);
}

.status-card {
  display: flex;
  min-height: var(--size-status);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  color: var(--color-forest);
  background: var(--color-lime-soft);
  border: var(--size-border) solid var(--color-status-line);
  border-radius: var(--radius-control);
}

.status-card[hidden] {
  display: none;
}

.status-card svg {
  flex: 0 0 auto;
}

.status-card strong {
  display: block;
  margin-bottom: calc(var(--space-1) / 2);
}

.status-card p {
  margin-bottom: 0;
  color: var(--color-muted);
  font-size: var(--font-size-meta);
}

.status-card.error {
  color: var(--color-danger);
  background: var(--color-error-surface);
  border-color: var(--color-error-line);
}

.status-card.empty {
  background: var(--color-empty-surface);
  border-color: var(--color-line);
}

.result-list {
  display: grid;
  gap: var(--space-4);
}

.result-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--size-border) solid var(--color-line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-card);
  animation: card-enter var(--duration-fast) ease both;
  transition:
    border-color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.result-meta time {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.result-card h3 {
  margin-bottom: var(--space-3);
  color: var(--color-forest);
  font-size: var(--font-size-result);
  letter-spacing: var(--tracking-result);
  line-height: var(--line-height-result);
}

.result-card h3 a {
  text-decoration-thickness: var(--size-border);
  text-decoration-color: transparent;
  text-underline-offset: var(--space-1);
}

.result-card h3 a:hover {
  text-decoration-color: currentColor;
}

.result-excerpt {
  margin-bottom: var(--space-5);
  color: var(--color-result-copy);
  font-size: var(--font-size-body-compact);
  line-height: var(--line-height-copy);
}

.source-link {
  display: inline-flex;
  min-height: var(--size-touch);
  align-items: center;
  gap: var(--space-2);
  color: var(--color-forest);
  font-size: var(--font-size-meta);
  font-weight: 800;
  text-decoration: none;
}

.source-link:hover {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.source-link svg {
  width: var(--size-icon-small);
  height: var(--size-icon-small);
}

.page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin: var(--space-8) var(--space-10) 0;
  padding: var(--space-5) 0 var(--space-7);
  color: var(--color-muted);
  border-top: var(--size-border) solid var(--color-line);
  font-size: var(--font-size-small);
}

.page-footer p {
  margin-bottom: 0;
}

.page-footer span {
  color: var(--color-forest);
  font-weight: 800;
  white-space: nowrap;
}

.skeleton {
  pointer-events: none;
}

.skeleton span,
.skeleton strong,
.skeleton p,
.skeleton i {
  display: block;
  height: var(--font-size-meta);
  margin-bottom: var(--space-3);
  background: linear-gradient(
    90deg,
    var(--color-skeleton) 25%,
    var(--color-skeleton-shine) 50%,
    var(--color-skeleton) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-pill);
  animation: skeleton-flow 1.3s linear infinite;
}

.skeleton span {
  width: 28%;
}

.skeleton strong {
  width: 74%;
  height: var(--size-skeleton-title);
}

.skeleton p {
  width: 96%;
}

.skeleton i {
  width: 20%;
  margin-bottom: 0;
}

.showcase-shell {
  padding-bottom: var(--space-9);
}

.showcase-hero {
  padding-bottom: var(--space-8);
}

.showcase-section {
  padding-top: var(--space-8);
}

.showcase-section h2 {
  margin-bottom: var(--space-5);
}

.showcase-section input[type="search"] {
  border-color: var(--color-line);
  box-shadow: none;
}

.state-grid {
  display: grid;
  gap: var(--space-3);
}

.status-card.compact {
  min-height: 0;
  display: block;
  padding: var(--space-4) var(--space-5);
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(var(--space-2)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-flow {
  to { background-position: -200% 0; }
}

@media (max-width: 767px) {
  .hero {
    margin: var(--space-5) var(--space-5) 0;
    padding: var(--space-8) var(--space-6);
  }

  .hero-copy {
    margin-bottom: var(--space-6);
    font-size: var(--font-size-body-compact);
  }

  .search-controls {
    grid-template-columns: 1fr;
  }

  .primary-action {
    width: 100%;
  }

  .results-section,
  .showcase-section {
    padding-right: var(--space-5);
    padding-left: var(--space-5);
  }

  h2 {
    font-size: var(--font-size-section-mobile);
  }

  .result-card {
    padding: var(--space-5);
  }

  .result-card h3 {
    font-size: var(--font-size-result-mobile);
  }

  .page-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
    margin-right: var(--space-5);
    margin-left: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: var(--duration-reduced) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--duration-reduced) !important;
  }
}