* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
.toon-a {
  --ink: #232936; --line: #272a32; --lw: 3px; --r: 3px;
  --paper: #f3f2ee; --pri: #ffdf6b; --muted: #535c69;
  --font-d: "Black Han Sans", "Gothic A1", "Malgun Gothic", sans-serif;
  --font-b: "Gothic A1", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  background: radial-gradient(circle, #dedcd2 1.1px, transparent 1.6px) 0 0 / 11px 11px, var(--paper);
  color: var(--ink); font-family: var(--font-b); line-height: 1.45;
  word-break: keep-all; overflow-wrap: anywhere;
}
h1, p, figure { margin: 0; }
.sv { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; font-size: 16px; max-width: 540px; margin: auto; }
.ph-top { height: 44px; flex: none; display: flex; align-items: center; justify-content: flex-end; padding: 0 24px; font-size: 13px; font-weight: 900; background: var(--pri); border-bottom: var(--lw) solid var(--line); }
.sv-main { flex: 1; padding: 10px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.say { position: relative; align-self: flex-start; background: #fff; border: var(--lw) solid var(--line); border-radius: 22px; padding: 12px 18px 14px; box-shadow: 4px 4px 0 #dcdbd3; margin-bottom: 10px; max-width: 100%; }
.say::before, .say::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.say::before { bottom: -18px; border-width: 18px 4px 0 16px; left: 30px; border-color: var(--line) transparent transparent transparent; }
.say::after { bottom: -12px; border-width: 13px 3px 0 11px; left: 33px; border-color: #fff transparent transparent transparent; }
.say h1 { font-size: 25px; font-weight: 900; letter-spacing: -.03em; line-height: 1.25; }
.say p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.result { display: flex; flex-direction: column; gap: 12px; }
.sv-art { background: #fff; border: var(--lw) solid var(--line); box-shadow: 5px 5px 0 var(--line); }
.sv-art img { display: block; width: 100%; height: auto; min-height: 160px; }
.sv-art figcaption { border-top: 2px solid var(--line); font-size: 14px; font-weight: 800; padding: 8px 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 58px; padding: 10px 18px; font-size: 18px; font-weight: 800; color: var(--ink); text-decoration: none; background: var(--pri); border: var(--lw) solid var(--line); border-radius: var(--r); box-shadow: 5px 5px 0 var(--line); }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
.btn:focus-visible { outline: 3px solid #245893; outline-offset: 3px; }
[hidden] { display: none !important; }
.sv-guide { font-size: 15px; margin-top: 4px; }
.sv-note { font-size: 12px; color: var(--muted); }
.sv-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.sv-center .say { align-self: center; }
.sv-center .say::before { left: calc(50% - 10px); }
.sv-center .say::after { left: calc(50% - 7px); }
.sv-ico { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 900; background: var(--pri); border: var(--lw) solid var(--line); border-radius: 50%; box-shadow: 5px 5px 0 var(--line); }
[data-state="expired"] .sv-ico { background: #fff; }