/* GENERATED by scripts/build-legal.mjs — do not edit. Sources, in order:
   @ppomi/ui tokens.css (PpomiUi/src/tokens.css) · legal/footer.css · legal/page.css.
   The legal pages are static (no JS, no bundler), so the shared tokens are inlined here
   instead of @imported the way web.css does. Edit a source, then npm run build:legal. */

/* Shared neutral surfaces. Colour is reserved for focus, state and warnings. */
:root {
  color-scheme: light dark;
  --window: #f7f7f7;
  --card: #ffffff;
  --card-border: rgba(0, 0, 0, .055);
  --card-shadow: 0 0 0 1px rgba(0,0,0,.025), 0 2px 3px rgba(0,0,0,.025), 0 6px 16px rgba(0,0,0,.025);
  --separator: rgba(0, 0, 0, .07);
  --label: #242424;
  --label-secondary: #686868;
  --label-tertiary: #767676;
  --prose-ink: #525252;
  --control: #fff;
  --control-pressed: #eeeeee;
  --control-border: rgba(0,0,0,.09);
  --control-shadow: 0 1px 2px rgba(0,0,0,.04);
  --accent: #303030;
  --accent-text: #fff;
  --live: #337953;
  --alarm: #af4036;
  --alarm-surface: #af40360c;
  --notice-surface: #f2eee5;
  --notice-ink: #4e4737;
  --reason-surface: #faf0ea;
  --reason-ink: #875239;
  --detail-surface: #f2f2f2;
  --muted-surface: #ebebeb;
  --press: 120ms cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --window: #111111;
    --card: #191919;
    --card-border: rgba(255,255,255,.035);
    --card-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 0 0 1px rgba(0,0,0,.16), 0 2px 3px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.12);
    --separator: rgba(255,255,255,.065);
    --label: #e9e9e9;
    --label-secondary: #a0a0a0;
    --label-tertiary: #929292;
    --prose-ink: #c0c0c0;
    --control: #252525;
    --control-pressed: #303030;
    --control-border: rgba(255,255,255,.065);
    --control-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 3px #0003;
    --accent: #e0e0e0;
    --accent-text: #202020;
    --live: #90b89a;
    --alarm: #e1a295;
    --alarm-surface: #e1a2950e;
    --notice-surface: #2a2720;
    --notice-ink: #d7cbb0;
    --reason-surface: #2c2420;
    --reason-ink: #dbb39c;
    --detail-surface: #202020;
    --muted-surface: #272727;
  }
}
@media (prefers-contrast: more) {
  :root {
    --label-secondary: var(--label);
    --label-tertiary: var(--label);
    --prose-ink: var(--label);
    --card-border: currentColor;
    --control-border: currentColor;
  }
}

/* Operator footer skin (@ppomi/ui Footer → OperatorFooter): the 전자상거래법 disclosure under
   every page. One source for both hosts: web.css @imports it (Vite inlines) and
   scripts/build-legal.mjs concatenates it into the generated legal.css. Colours are tokens,
   so the block follows the page through light and dark. */

/* On the web the catalog Footer only ever wraps this block (the app uses it for the
   right-aligned logout row), so it is a plain block that spans the column. */
.footer {
  display: block;
}

footer.legal {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--separator);
  color: var(--label-tertiary);
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
}

/* Inline text links: undo anything a host gives anchors (web.css makes some button-shaped). */
footer.legal a {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
}

footer.legal small {
  display: block;
  margin-top: 0.4rem;
  color: var(--label-tertiary);
  font-size: 0.75rem;
}

footer.legal mark.todo {
  padding: 0 0.3em;
  border-radius: 0.3em;
  background: var(--notice-surface);
  color: var(--notice-ink);
  font-weight: 600;
}

/* Legal page skin for terms.html / privacy.html / refund.html. Source for the generated
   /legal.css (scripts/build-legal.mjs prepends @ppomi/ui tokens.css and legal/footer.css).
   Colours are tokens only, so the pages follow light/dark like the app and web.css.
   Markup comes from the @ppomi/ui registry: LegalSection → <section><hN>, Prose → .prose,
   Note → .note, Footer → .footer. Selectors are tag-based so nesting depth does not matter. */
:root {
  color: var(--label);
  background: var(--window);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body {
  margin: 0;
  padding: 3rem 0 4rem;
}

main {
  width: min(42rem, calc(100% - 3rem));
  margin: 0 auto;
}

h1 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.04em;
}

h1 .brand-mark {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}

p.meta {
  margin: 0;
  color: var(--label-tertiary);
}

p.meta + p.meta {
  margin-bottom: 2rem;
}

h2 {
  margin: 2.2rem 0 0.6rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

h3 {
  margin: 1.4rem 0 0.4rem;
  font-size: 1rem;
}

/* The Korean translation sits under an h2, so its own headings render one level deeper. */
section[lang="ko"] h3 {
  margin: 2.2rem 0 0.6rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

section[lang="ko"] h4 {
  margin: 1.4rem 0 0.4rem;
  font-size: 1rem;
}

p,
li {
  color: var(--prose-ink);
}

ul,
ol {
  padding-left: 1.3rem;
}

li {
  margin: 0.3rem 0;
}

code {
  padding: 0.05em 0.3em;
  border-radius: 0.3em;
  background: var(--muted-surface);
  font-size: 0.92em;
}

a {
  color: inherit;
}

.summary {
  padding: 1rem 1.2rem;
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--card-shadow);
}

.summary p:first-child {
  margin-top: 0;
}

.summary p:last-child {
  margin-bottom: 0;
}

dl.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 1rem 0;
}

dl.facts dt {
  color: var(--label-tertiary);
}

dl.facts dd {
  margin: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

th,
td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--separator);
  text-align: left;
  vertical-align: top;
  color: var(--prose-ink);
}

th {
  color: var(--label);
  font-weight: 600;
}

/* Operator placeholders. Remove every .todo before publishing. */
.todo {
  padding: 0.05em 0.35em;
  border-radius: 0.3em;
  background: var(--notice-surface);
  color: var(--notice-ink);
  font-weight: 600;
}

section[lang="ko"] {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--separator);
}

section[lang="ko"] .note {
  padding: 0.8rem 1rem;
  border-radius: 0.75rem;
  background: var(--muted-surface);
  color: var(--label-secondary);
  font-size: 0.95rem;
}