:root {
  --red: #e60012;
  --red-dark: #b8000e;
  --text: #222222;
  --muted: #555555;
  --line: #d2d2d2;
  --page: #f2f2f2;
  --card: #ffffff;
  --note: #fff8e5;
  --note-line: #f0c36d;
  --ok: #0b6b2b;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Yu Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.8;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

header { background: var(--card); border-bottom: 2px solid var(--line); }
header .wrap { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
header img { display: block; width: 46px; height: 40px; flex: none; }
header .org { font-size: 15px; font-weight: bold; color: #333; line-height: 1.4; }

main .wrap { padding-top: 24px; padding-bottom: 32px; }
h1 { margin: 0 0 16px; font-size: 24px; line-height: 1.5; }
h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.5; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 24px; margin-bottom: 20px; }
.result { border-top: 6px solid var(--red); text-align: center; padding-top: 28px; padding-bottom: 28px; }
.result .lead { margin: 0 0 4px; font-size: 18px; }
.phrase { display: inline-block; }   /* 句の途中で折り返さない */

/* 番号。電話で読み上げやすいよう、いちばん大きくし、「.」の前後を空ける。
   一番長い 255.255.255.255（約10文字分の幅）でも枠に収まる大きさにする。
   それでも収まらない画面では、「.」の後ろ（<wbr>）でだけ折り返す */
.ip {
  margin: 0 0 20px;
  font-size: clamp(24px, calc((100vw - 70px) / 10.5), 60px);
  font-weight: bold;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: all;
  user-select: all;
}
.ip .dot { margin: 0 .1em; color: var(--red); }

.copy {
  display: inline-block;
  min-width: 260px;
  min-height: 56px;
  padding: 10px 28px;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-size: 19px;
  font-weight: bold;
  cursor: pointer;
}
.copy:hover { background: var(--red-dark); }
.copy:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; }
.status { min-height: 1.8em; margin: 10px 0 0; font-weight: bold; color: var(--ok); }
.time { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.error { margin: 0; font-size: 19px; font-weight: bold; }

.notes { background: var(--note); border-color: var(--note-line); }
.notes ul { margin: 0; padding-left: 1.3em; }
.notes li + li { margin-top: 6px; }

footer { color: var(--muted); font-size: 13px; text-align: center; padding: 0 16px 28px; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .card { padding: 20px 16px; }
  h1 { font-size: 21px; }
  .result .lead { font-size: 16px; }
  .copy { width: 100%; min-width: 0; }
}