/* Say Draw — guardian-facing site chrome shared by the legal/support/404 pages.
   These pages now use the SAME layout as the landing pages (/{ko,ja,en}/): the warm
   cream gradient, the colorful pill nav + wordmark, Fredoka/Nunito, and the dashed
   footer. The long-form document text sits in a readable white card on top of it.
   One shared stylesheet, no build step — works on any static host. The landing pages
   carry their own inline styles; this file is for everything else. */

/* Same web fonts the landing pages load. The woff2 only cover Latin / Latin-ext, so
   Hangul / Kana fall back to the system stack — matching the landing pages exactly. */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 700;font-display:swap;src:url("/fonts/fredoka-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 700;font-display:swap;src:url("/fonts/fredoka-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/nunito-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/nunito-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root {
  --line: #2E2C46;          /* navy outline (landing) */
  --ink: #4E3B30;           /* cocoa */
  --ink-soft: #7d6a5c;
  --ink-faint: #9C8979;
  --accent: #FF9270;        /* coral */
  --accent-ink: #EF6F4A;
  --card: #ffffff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 90% at 50% 0%, #FFF6E9 0%, #FFEBCF 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  line-height: 1.75;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }

/* The header is inline-styled per page (identical to the landing pill nav), so the
   chrome below covers only the document body and footer. */

/* ---- Document body: readable white card on the warm gradient ---- */
main.sd-doc { max-width: 880px; margin: 0 auto;
  padding: clamp(18px,3vw,30px) clamp(18px,4vw,40px) clamp(44px,6vw,72px); }
.sd-card { background: var(--card); border: 4px solid var(--line); border-radius: 32px;
  box-shadow: 0 24px 40px rgba(196,134,82,.18); padding: clamp(26px,4vw,46px); }

.sd-doc h1 { font-family: Fredoka, sans-serif; font-weight: 700;
  font-size: clamp(28px,4.5vw,40px); color: var(--ink); margin: 0 0 6px; line-height: 1.1; }
.sd-doc .updated { color: var(--ink-faint); font-weight: 700; font-size: 14px; margin: 0 0 28px; }
.sd-doc h2 { font-family: Fredoka, sans-serif; font-weight: 600;
  font-size: clamp(20px,2.6vw,24px); color: var(--ink); margin: 36px 0 10px; }
.sd-doc h3 { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 18px;
  color: var(--ink); margin: 24px 0 8px; }
.sd-doc p, .sd-doc li { color: #6b5b4f; font-weight: 500; }
.sd-doc strong { color: var(--ink); font-weight: 800; }
.sd-doc a { color: var(--accent-ink); font-weight: 700; }
.sd-doc ul { padding-left: 22px; }
.sd-doc li { margin: 6px 0; }

/* Support page callouts + placeholders */
.sd-doc .banner { background: #FFF4D6; border: 3px solid #F0D98A; color: #7a5d12;
  border-radius: 18px; padding: 14px 18px; font-size: 14.5px; font-weight: 600; margin: 0 0 28px; }
.sd-doc .todo { background: #FFE2E8; color: #d2546c; border-radius: 8px;
  padding: 0 6px; font-weight: 800; font-size: 0.92em; }

/* Markdown-rendered legal documents (LegalDocument#to_html injected into #legal-content):
   the markup has no helper classes, so map its bare tags to the document look. */
.sd-doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.sd-doc th, .sd-doc td { border: 2px solid #EADFCB; padding: 9px 11px;
  text-align: left; vertical-align: top; }
.sd-doc th { background: #FFF6E9; font-weight: 800; }
.sd-doc blockquote { background: #FFF4D6; border: 3px solid #F0D98A; color: #7a5d12;
  border-radius: 18px; padding: 14px 18px; font-size: 14.5px; margin: 0 0 24px; }
.sd-doc blockquote p { margin: 0; color: #7a5d12; }
.sd-doc code { background: #FFE2E8; color: #d2546c; border-radius: 8px;
  padding: 0 6px; font-weight: 700; font-size: 0.92em; }

/* ---- Footer: brand + copyright on the left, link column(s) on the right ---- */
.sd-foot { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px,4vw,40px) 48px; }
.sd-foot-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 32px; border-top: 3px dashed #D9C3A6; padding-top: 40px; }
.sd-foot-brand-block { display: flex; flex-direction: column; gap: 12px; }
.sd-foot-wordmark { font-family: Fredoka, sans-serif; font-weight: 700; font-size: 30px;
  letter-spacing: .4px; color: var(--ink); }
.sd-foot-copy { font-weight: 700; font-size: 13px; color: var(--ink-faint); }
.sd-foot-col { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.sd-foot-col-title { flex-basis: 100%; font-family: Fredoka, sans-serif; font-weight: 600;
  font-size: 16px; color: var(--ink); }
.sd-foot-col a { color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: 15px; }
.sd-foot-col a:hover { color: var(--accent-ink); }