/* SEO 체커 — public styles. Deliberately plain, 2010-web minimal:
   one centered column, white background, thin borders, generous spacing.
   Loaded from /assets/css/public.css; CSP style-src 'self'. */

:root {
  --fg: #222222;
  --fg-soft: #666666;
  --bg: #ffffff;
  --line: #dddddd;
  --brand: #0066cc;
  --good: #1a7f37;
  --good-bg: #eef7f0;
  --warn: #9a6700;
  --warn-bg: #fdf6e4;
  --crit: #b42318;
  --crit-bg: #fdefee;
  --neutral: #57606a;
  --neutral-bg: #f2f4f6;
  --wrap: 560px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.7;
  font-size: 16px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--brand); color: #fff; padding: 8px 12px; z-index: 10; }

a { color: var(--brand); }

main { padding: 72px 0 80px; }

h1 { font-size: 30px; line-height: 1.3; margin: 0 0 16px; font-weight: 700; }
h2 { font-size: 19px; margin: 40px 0 12px; }
h3 { font-size: 16px; margin: 28px 0 8px; }
.lede { font-size: 17px; color: var(--fg-soft); margin: 0; }

.hero { text-align: center; margin: 40px 0 48px; }

.form-hint { color: var(--fg-soft); font-size: 14px; margin: 16px 0 0; text-align: center; }

.btn {
  display: inline-block; padding: 13px 28px; font-size: 16px; font-weight: 600;
  border: 1px solid var(--brand); border-radius: 3px; cursor: pointer;
  text-decoration: none;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: #0052a3; }
.btn:disabled { opacity: 0.6; cursor: default; }

.hp { position: absolute; left: -9999px; }

/* Stage tone colors (status page) */
.tone--good { background: var(--good-bg); color: var(--good); }
.tone--warn { background: var(--warn-bg); color: var(--warn); }
.tone--neutral { background: var(--neutral-bg); color: var(--neutral); }

/* Request form: one plain bordered box, roomy fields, centered submit. */
.detailed { margin: 0 0 24px; border: 1px solid var(--line); border-radius: 3px; padding: 32px 28px; }
.detailed__form { margin: 0; }
.field { margin: 0 0 24px; }
.field label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 15px; }
.field input[type="email"],
.field input[type="url"] { width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid var(--line); border-radius: 3px; }
.field input[type="email"]:focus,
.field input[type="url"]:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.field--check { display: flex; gap: 10px; align-items: start; margin: 28px 0; }
.field--check label { font-weight: 400; font-size: 13px; color: var(--fg-soft); line-height: 1.6; margin: 0; }
.detailed .btn { display: block; width: 100%; text-align: center; }

/* Status page: centered, plain, 2010-simple. */
.status { text-align: center; margin: 40px 0; }
.status__domain { font-size: 16px; margin: 0 0 16px; }
.status__domain a { color: var(--brand); }
.status__stage {
  font-size: 27px; line-height: 1.35; font-weight: 700;
  margin: 0 0 20px; display: inline-block; padding: 8px 22px; border-radius: 3px;
}
.status__delayed { font-size: 16px; color: var(--warn); }
.status__message { max-width: 440px; margin: 0 auto; color: var(--fg-soft); font-size: 16px; line-height: 1.7; }
.status__result { text-align: center; margin: 40px 0; }
.status__result .btn { padding: 13px 32px; font-size: 16px; }
.status__summary { color: var(--fg-soft); margin: 0 0 24px; }
.status__times { color: var(--fg-soft); font-size: 14px; margin: 0 0 24px; }
.status__note { text-align: center; color: #999; font-size: 13px; margin-top: 72px; }

/* Notice (error) + legal (privacy): plain readable text pages. */
.notice { text-align: center; margin: 64px 0; }
.notice h1 { font-size: 24px; }
.notice p { color: var(--fg-soft); }
.legal { margin: 16px 0; }
.legal h1 { font-size: 24px; }
.legal p { color: var(--fg-soft); }

/* Floating contact widget (status page) */
.contact { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.contact__fab {
  min-height: 48px; padding: 12px 22px;
  border: 1px solid var(--brand); border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
}
.contact__fab:hover { background: #0052a3; }
.contact__panel {
  width: min(340px, calc(100vw - 40px));
  padding: 16px;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--bg);
  box-shadow: 0 4px 18px rgb(0 0 0 / 15%);
  text-align: left;
}
.contact__hint { margin: 0 0 10px; color: var(--fg-soft); font-size: 13px; line-height: 1.6; }
.contact__panel textarea {
  width: 100%; padding: 10px 12px; margin: 0 0 12px;
  border: 1px solid var(--line); border-radius: 3px;
  font: inherit; font-size: 15px; line-height: 1.6; resize: vertical;
}
.contact__panel textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.contact__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.contact__actions .btn { padding: 10px 18px; font-size: 14px; }
.contact__status { font-size: 13px; color: var(--fg-soft); }
.contact__status.is-ok { color: var(--good); font-weight: 600; }
.contact__status.is-err { color: var(--crit); font-weight: 600; }

.site-footer { padding: 32px 0 48px; color: var(--fg-soft); font-size: 13px; text-align: center; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; }
.site-footer a { color: var(--fg-soft); }