/* leeeo chrome v1.0: shared shell only. App content keeps its own tokens. */
.leeeo-chrome {
  --lc-paper: #f7f7f2;
  --lc-surface: #ffffff;
  --lc-soft: #edeee6;
  --lc-ink: #23271f;
  --lc-muted: #686e60;
  --lc-line: #dcdfd3;
  --lc-focus-color: #398156;
  --lc-accent: #d6ef79;
  --lc-accent-ink: #303b16;
  --lc-font: Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --lc-caption: .75rem;
  --lc-small: .875rem;
  --lc-body: 1rem;
  --lc-title: 1.25rem;
  --lc-leading: 1.65;
  --lc-weight: 650;
  --lc-s1: .25rem;
  --lc-s2: .5rem;
  --lc-s3: .75rem;
  --lc-s4: 1rem;
  --lc-s6: 1.5rem;
  --lc-s8: 2rem;
  --lc-radius: .5rem;
  --lc-card-radius: 1rem;
  --lc-border: 1px;
  --lc-focus: 3px;
  --lc-touch: 2.75rem;
  --lc-icon: 2rem;
  --lc-motion: 180ms;
  box-sizing: border-box;
  color: var(--lc-ink);
  font: var(--lc-body)/var(--lc-leading) var(--lc-font);
  word-break: keep-all;
  overflow-wrap: anywhere;
  color-scheme: light;
}
:root[data-theme="dark"] .leeeo-chrome {
  --lc-paper: #1c211b;
  --lc-surface: #242b22;
  --lc-soft: #30372b;
  --lc-ink: #edf0e5;
  --lc-muted: #a7b09c;
  --lc-line: #3b4435;
  --lc-focus-color: #9ed4aa;
  color-scheme: dark;
}
.leeeo-chrome *, .leeeo-chrome *::before, .leeeo-chrome *::after {
  box-sizing: border-box;
}
.leeeo-chrome :is(a, button, select):focus-visible {
  outline: var(--lc-focus) solid var(--lc-focus-color);
  outline-offset: var(--lc-s1);
}
.leeeo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lc-s3) var(--lc-s4);
  padding-block: var(--lc-s4);
  border-bottom: var(--lc-border) solid var(--lc-line);
}
.leeeo-app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-s3);
  min-width: 0;
  min-height: var(--lc-touch);
  color: var(--lc-ink);
  font-size: var(--lc-title);
  font-weight: var(--lc-weight);
  text-decoration: none;
}
.leeeo-app-brand img, .leeeo-app-brand svg {
  width: var(--lc-icon);
  height: var(--lc-icon);
  flex: 0 0 var(--lc-icon);
  object-fit: contain;
}
.leeeo-theme {
  display: grid;
  gap: var(--lc-s1);
  margin: 0;
  color: var(--lc-muted);
  font-size: var(--lc-caption);
}
.leeeo-theme select {
  min-height: var(--lc-touch);
  padding: var(--lc-s2) var(--lc-s3);
  border: var(--lc-border) solid var(--lc-muted);
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  color: var(--lc-ink);
  font: inherit;
  font-size: var(--lc-body);
  cursor: pointer;
}
.leeeo-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--lc-s4);
  margin-top: var(--lc-s8);
  padding-block: var(--lc-s4);
  border-top: var(--lc-border) solid var(--lc-line);
  color: var(--lc-muted);
  font-size: var(--lc-small);
}
.leeeo-footer :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: var(--lc-touch);
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: var(--lc-s1);
  cursor: pointer;
}
.leeeo-footer a:hover, .leeeo-footer button:hover {
  color: var(--lc-ink);
}
@media (prefers-reduced-motion: reduce) {
  .leeeo-chrome, .leeeo-chrome * {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}
/* v1.2 highlight: a lime marker band behind the lower 58% of the line, for 1-3 key phrases per screen.
   Not a link: no underline, no pointer. Ink is fixed because muted text on lime is only 4.13:1.
   Light ink/band 11.93:1, dark ink/band 5.82:1 (WCAG AA). */
:root {
  --lc-hl-band: #d6ef79;
  --lc-hl-ink: #23271f;
}
:root[data-theme="dark"] {
  --lc-hl-band: #55661d;
  --lc-hl-ink: #f4f6ec;
}
mark.hl, .hl {
  padding-inline: .12em;
  border-radius: .15em;
  background: linear-gradient(180deg, transparent 42%, var(--lc-hl-band) 42%);
  color: var(--lc-hl-ink);
  text-decoration: none;
  cursor: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (forced-colors: active) {
  mark.hl, .hl {
    forced-color-adjust: none;
    background: Mark;
    color: MarkText;
  }
}