@import url("tokens.css");

/* Runiel's care flow and component geometry, in the Forcejet brand. */
:root {
  --bg: var(--fj-white);
  --bg-alt: var(--fj-paper);
  --ink-strong: var(--fj-black);
  --ink: var(--fj-text);
  --ink-2: var(--fj-graphite);
  --ink-3: var(--fj-muted);
  --ink-4: #727272;
  --ink-disable: #b4b4b4;
  --line: var(--fj-line);
  --line-subtle: #ededed;
  --primary: var(--fj-black);
  --primary-press: var(--fj-black);
  --primary-soft: var(--fj-yellow-50);
  --action: var(--fj-black);
  --action-press: var(--fj-graphite);
  --positive: var(--fj-success);
  --negative: var(--fj-error);
  --caution: #715600;
  --caution-bg: var(--fj-yellow-50);
  --app-max: 480px;
}
html { background: #222426; }
body { background: #222426; }
.app { border: 0; }
.appbar { height: 68px; background: var(--fj-black); border: 0; }
.appbar .icon-btn { width: 44px; height: 44px; color: var(--fj-white); }
.appbar .icon-btn:active, .appbar-title-link:active { background: #333; }
.appbar .brand-title { display: flex; align-items: center; gap: 8px; }
.flow-brand { width: 128px; height: auto; display: block; filter: brightness(0) invert(1); }
.appbar-title-link:focus-visible { outline: 3px solid var(--fj-yellow-500); outline-offset: 2px; }
.flow-preview { margin: 16px 20px 0; padding: 12px 14px; color: #615017; background: var(--fj-yellow-50); border-radius: 8px; font-size: 12px; line-height: 1.6; }
.flow-preview b { color: #51420d; }
.flow-skip { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); z-index: 100; background: var(--fj-yellow-500); color: var(--fj-black); padding: 12px 20px; }
.flow-skip:focus { top: 8px; }
.btn.primary { background: var(--fj-yellow-500); color: var(--fj-black); font-weight: 700; }
.btn.primary:hover, .btn.primary:active { background: var(--fj-yellow-600); }
.btn[disabled] { background: #e8e8e8; color: #777; }
.stepper .fill { background: var(--fj-yellow-500); }
.service-choice-card>input:checked+.service-choice-body, .coupang-type-choice.selected { box-shadow: none; }
.service-choice-card>input:focus-visible+.service-choice-body { outline-color: var(--fj-black); }
.service-choice-body { border-width: 2px; }
.trial-return-guide h3 .accent { color: var(--fj-black); }
.trial-example-figure img { max-height: 240px; object-fit: contain; }
.trial-policy-confirm { font-size: 14px; line-height: 1.6; }
.trial-example-note, .trial-package-list span { color: var(--fj-muted); }
.trial-package-list b { color: var(--fj-graphite); }
.stepper .step-count, .stepper .step-name { font-variant-numeric: tabular-nums; }
.success-mark { background: var(--fj-yellow-500); color: var(--fj-black); }
.result-head b, .result-meta { overflow-wrap: anywhere; }
.result-head b { max-width: 100%; font-variant-numeric: tabular-nums; }
.receipt-no span { word-break: normal; overflow-wrap: anywhere; }
.flow-guide-note { padding: 16px; border-radius: 12px; background: var(--fj-paper); color: var(--fj-graphite); font-size: 14px; line-height: 1.6; }
.footer a { display: inline-block; padding-block: 12px; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--fj-info); outline-offset: 3px; }
.step-panel .section:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}