/* Scoped design tokens: hub defaults, no dependency on the host's stylesheet. */
.leeeo-feedback, .leeeo-feedback-trigger {
  --lf-s1: 4px;
  --lf-s2: 8px;
  --lf-s3: 12px;
  --lf-s4: 16px;
  --lf-s5: 20px;
  --lf-s6: 24px;
  --lf-s8: 32px;
  --lf-touch: 44px;
  --lf-border: 1px;
  --lf-focus: 3px;
  --lf-radius: 16px;
  --lf-input-radius: 8px;
  --lf-pill: 999px;
  --lf-width: 34rem;
  --lf-body: 1rem;
  --lf-small: 0.875rem;
  --lf-caption: 0.75rem;
  --lf-heading: 1.75rem;
  --lf-leading: 1.65;
  --lf-weight: 650;
  --lf-font: Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --lf-bg: #ffffff;
  --lf-soft: #edeee6;
  --lf-ink: #23271f;
  --lf-muted: #686e60;
  --lf-line: #dcdfd3;
  --lf-accent: #d6ef79;
  --lf-accent-ink: #303b16;
  --lf-success: #398156;
  --lf-error: #aa4238;
  --lf-warning: #8a681c;
  --lf-backdrop: #1c211b99;
  --lf-clear: transparent;
  color-scheme: light;
}
:root[data-theme="dark"] .leeeo-feedback,
:root[data-theme="dark"] .leeeo-feedback-trigger {
  --lf-bg: #242b22;
  --lf-soft: #30372b;
  --lf-ink: #edf0e5;
  --lf-muted: #a7b09c;
  --lf-line: #3b4435;
  --lf-success: #9ed4aa;
  --lf-error: #f0a298;
  --lf-warning: #e4c478;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leeeo-feedback,
  :root:not([data-theme="light"]) .leeeo-feedback-trigger {
    --lf-bg: #242b22;
    --lf-soft: #30372b;
    --lf-ink: #edf0e5;
    --lf-muted: #a7b09c;
    --lf-line: #3b4435;
    --lf-success: #9ed4aa;
    --lf-error: #f0a298;
    --lf-warning: #e4c478;
    color-scheme: dark;
  }
}
.leeeo-feedback-trigger {
  display: inline-flex;
  align-items: center;
  min-height: var(--lf-touch);
  padding: 0;
  border: 0;
  background: var(--lf-clear);
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: var(--lf-s1);
  cursor: pointer;
}
.leeeo-feedback {
  box-sizing: border-box;
  width: min(var(--lf-width), calc(100% - var(--lf-s4) * 2));
  max-width: none;
  max-height: calc(100dvh - var(--lf-s4) * 2);
  margin: auto;
  padding: var(--lf-s6);
  border: var(--lf-border) solid var(--lf-line);
  border-radius: var(--lf-radius);
  background: var(--lf-bg);
  color: var(--lf-ink);
  font: var(--lf-body)/var(--lf-leading) var(--lf-font);
  overflow: auto;
  overscroll-behavior: contain;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.leeeo-feedback::backdrop { background: var(--lf-backdrop); }
.leeeo-feedback *, .leeeo-feedback *::before, .leeeo-feedback *::after { box-sizing: border-box; }
.leeeo-feedback [hidden], .leeeo-feedback-trigger[hidden] { display: none !important; }
.leeeo-feedback p, .leeeo-feedback h2, .leeeo-feedback h3 { margin: 0; }
.leeeo-feedback .lf-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lf-s4); }
.leeeo-feedback h2, .leeeo-feedback h3 { font-size: var(--lf-heading); font-weight: var(--lf-weight); }
.leeeo-feedback .lf-eyebrow { color: var(--lf-muted); font-size: var(--lf-caption); margin-bottom: var(--lf-s1); }
.leeeo-feedback .lf-intro { color: var(--lf-muted); margin-top: var(--lf-s2); }
.leeeo-feedback .lf-form { display: grid; gap: var(--lf-s5); margin-top: var(--lf-s6); }
.leeeo-feedback .lf-field { display: grid; gap: var(--lf-s2); }
.leeeo-feedback label { font-weight: var(--lf-weight); }
.leeeo-feedback .lf-note { font-weight: normal; color: var(--lf-muted); font-size: var(--lf-small); }
.leeeo-feedback textarea {
  width: 100%;
  min-height: calc(var(--lf-touch) * 3);
  padding: var(--lf-s3);
  border: var(--lf-border) solid var(--lf-muted);
  border-radius: var(--lf-input-radius);
  background: var(--lf-bg);
  color: var(--lf-ink);
  font: inherit;
  resize: vertical;
}
.leeeo-feedback textarea::placeholder { color: var(--lf-muted); }
.leeeo-feedback textarea[aria-invalid="true"] { border-color: var(--lf-error); }
.leeeo-feedback .lf-field-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--lf-s2); color: var(--lf-muted); font-size: var(--lf-caption); }
.leeeo-feedback #leeeo-feedback-counter { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.leeeo-feedback .lf-context { display: flex; align-items: flex-start; gap: var(--lf-s3); padding: var(--lf-s3); border-radius: var(--lf-input-radius); background: var(--lf-soft); font-size: var(--lf-small); cursor: pointer; }
.leeeo-feedback input { width: var(--lf-s5); height: var(--lf-s5); margin: var(--lf-s1) 0 0; flex-shrink: 0; accent-color: var(--lf-success); }
.leeeo-feedback code { display: block; font: inherit; font-weight: normal; color: var(--lf-muted); }
.leeeo-feedback .lf-privacy { color: var(--lf-muted); font-size: var(--lf-caption); }
.leeeo-feedback .lf-privacy a { color: var(--lf-ink); text-decoration: underline; text-underline-offset: var(--lf-s1); }
.leeeo-feedback .lf-status { font-size: var(--lf-small); color: var(--lf-error); }
.leeeo-feedback[data-state="sending"] .lf-status { color: var(--lf-muted); }
.leeeo-feedback[data-state="limited"] .lf-status { color: var(--lf-warning); }
.leeeo-feedback .lf-actions { display: flex; justify-content: flex-end; }
.leeeo-feedback .lf-button { min-height: var(--lf-touch); padding: var(--lf-s2) var(--lf-s5); border: var(--lf-border) solid var(--lf-line); border-radius: var(--lf-pill); background: var(--lf-bg); color: var(--lf-ink); font: inherit; font-size: var(--lf-small); font-weight: var(--lf-weight); cursor: pointer; }
.leeeo-feedback .lf-submit, .leeeo-feedback .lf-done { background: var(--lf-accent); color: var(--lf-accent-ink); border-color: var(--lf-accent); min-width: calc(var(--lf-touch) * 2); }
.leeeo-feedback .lf-button:hover { border-color: var(--lf-muted); }
.leeeo-feedback .lf-button:disabled { cursor: wait; background: var(--lf-soft); color: var(--lf-muted); }
.leeeo-feedback .lf-success { display: grid; gap: var(--lf-s3); padding-top: var(--lf-s8); }
.leeeo-feedback .lf-success .lf-done { justify-self: end; margin-top: var(--lf-s3); }
.leeeo-feedback :focus-visible, .leeeo-feedback-trigger:focus-visible { outline: var(--lf-focus) solid var(--lf-success); outline-offset: var(--lf-s1); }
.leeeo-feedback .lf-sr-only, .leeeo-feedback .lf-status:empty { position: absolute; width: var(--lf-border); height: var(--lf-border); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
