/**
 * ドメイン診断（固定ページ /tools/domain/。parts/page/domain.php の中身）。
 * アーティファクト「IVRESSMAN ドメイン診断」を組み込んだもの。
 * すべての指定は .pg-domain の中だけに効かせてある（.wrap や .hero など、
 * サイト側と名前がぶつかりやすい class を素のまま使っているため）。
 * 本体は js/domain.js、見本と記録のデータは js/domain-data.js。
 */
/* Layout: hero = the question + the IVRESSMAN-style dotted globe; below, what we traced, what it means now, what to do.
   Single dark world by choice, matching ivressman.com's night-sky visuals. */
.pg-domain {
  --void: #03050a; --deep: #060a13; --panel: #0a1120; --panel2: #0e1729; --line: #172234; --line2: #22324a;
  --ink: #eaf0f9; --mute: #96a4bb; --faint: #5f6d86;
  --cyan: #5cd3ff; --blue: #3d7bff; --red: #ff4d5e; --amber: #ffc24d; --green: #4fe0a4;
  --f-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
.pg-domain { background: var(--void); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
.pg-domain * { box-sizing: border-box; }
.pg-domain button, .pg-domain input { font: inherit; color: inherit; }
.pg-domain a { color: var(--cyan); text-underline-offset: 3px; }
.pg-domain :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.pg-domain .wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.pg-domain .mono { font-family: var(--f-mono); letter-spacing: .14em; }


/* hero */
.pg-domain .hero { padding-block: 26px 10px; }
.pg-domain .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; }
.pg-domain .eyebrow { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .3em; color: var(--cyan); }
/* サイトの中に置くと元のアーティファクトより横が狭い。文節で折り返し（auto-phrase）、
   対応していないブラウザでも語の途中で切れないよう、上限を少し下げてある */
.pg-domain h1 { font-weight: 900; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.36; margin: 12px 0 14px; text-wrap: balance; word-break: auto-phrase; letter-spacing: .02em; }
.pg-domain h1 em { font-style: normal; color: var(--cyan); }
.pg-domain .lead { color: var(--mute); max-width: 34em; margin: 0 0 20px; }
.pg-domain form.scan { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel); max-width: 560px; }
.pg-domain form.scan input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 10px 12px; font-size: 16px; font-family: var(--f-mono); letter-spacing: .02em; }
.pg-domain form.scan input::placeholder { color: var(--faint); font-family: var(--f-body); letter-spacing: 0; }
.pg-domain form.scan button { border: 0; border-radius: 10px; padding: 10px 18px; background: var(--cyan); color: #021019; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pg-domain form.scan button:disabled { opacity: .5; cursor: progress; }
.pg-domain .samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--faint); }
.pg-domain .samples button { border: 1px solid var(--line2); background: var(--deep); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-family: var(--f-mono); font-size: 12px; color: var(--mute); }
.pg-domain .samples button:hover, .pg-domain .samples button[aria-pressed="true"] { border-color: var(--cyan); color: var(--ink); }
.pg-domain .privacy { margin-top: 14px; font-size: 12px; color: var(--faint); max-width: 40em; }
.pg-domain .status { margin-top: 12px; min-height: 1.6em; font-size: 13px; color: var(--mute); }
.pg-domain .status.err { color: var(--amber); }

.pg-domain .globe { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; margin: 0 auto; touch-action: none; cursor: grab; }
.pg-domain .globe:active { cursor: grabbing; }
.pg-domain .globe canvas { width: 100%; height: 100%; display: block; }
.pg-domain .corner { position: absolute; width: 22px; height: 22px; border-color: var(--line2); border-style: solid; }
.pg-domain .corner.tl { left: 0; top: 0; border-width: 1px 0 0 1px; } .corner.tr { right: 0; top: 0; border-width: 1px 1px 0 0; }
.pg-domain .corner.bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .corner.br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.pg-domain .ghud { position: absolute; left: 14px; top: 12px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--mute); line-height: 1.7; }
.pg-domain .ghud b { color: var(--ink); font-weight: 500; }
.pg-domain .gfoot { position: absolute; right: 14px; bottom: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--faint); text-align: right; }

/* sections */
.pg-domain section.blk { padding-block: 26px; border-top: 1px solid var(--line); }
.pg-domain .shead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pg-domain .shead h2 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: .02em; }
.pg-domain .shead .mono { font-size: 11px; color: var(--faint); letter-spacing: .26em; }
.pg-domain .trace { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pg-domain .tcard { border: 1px solid var(--line2); border-radius: 12px; padding: 14px; background: var(--deep); min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pg-domain .tcard .k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .24em; color: var(--cyan); }
.pg-domain .tcard .q { font-size: 12px; color: var(--faint); }
.pg-domain .tcard .v { font-weight: 700; font-size: 16.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pg-domain .tcard .s { font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.pg-domain .tcard .raw { font-family: var(--f-mono); font-size: 11px; color: var(--faint); overflow-wrap: anywhere; letter-spacing: .02em; }
.pg-domain .score { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pg-domain .pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line2); }
.pg-domain .pill b { font-family: var(--f-mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pg-domain .pill.act { border-color: rgba(255,77,94,.6); } .pill.act b { color: var(--red); }
.pg-domain .pill.chk { border-color: rgba(255,194,77,.5); } .pill.chk b { color: var(--amber); }
.pg-domain .pill.ok { border-color: rgba(79,224,164,.45); } .pill.ok b { color: var(--green); }
.pg-domain .issues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pg-domain .issue { border: 1px solid var(--line2); border-left-width: 3px; border-radius: 12px; padding: 14px 16px; background: var(--deep); min-width: 0; }
.pg-domain .issues.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-domain .issue.neu { border-left-color: var(--blue); } .issue.neu .lv { color: var(--mute); }
.pg-domain .issue.act { border-left-color: var(--red); } .issue.chk { border-left-color: var(--amber); } .issue.ok { border-left-color: var(--green); } .issue.live { border-left-color: var(--red); background: linear-gradient(90deg, rgba(255,77,94,.07), var(--deep) 40%); }
.pg-domain .issue .lv { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; }
.pg-domain .issue.act .lv, .pg-domain .issue.live .lv { color: var(--red); } .issue.chk .lv { color: var(--amber); } .issue.ok .lv { color: var(--green); }
.pg-domain .issue h3 { margin: 4px 0 6px; font-size: 16px; line-height: 1.5; }
.pg-domain .issue .seen { font-family: var(--f-mono); font-size: 11.5px; color: var(--faint); overflow-wrap: anywhere; margin-bottom: 8px; letter-spacing: .02em; }
.pg-domain .issue p { margin: 0 0 8px; font-size: 14px; color: var(--mute); }
.pg-domain .issue p b { color: var(--ink); font-weight: 700; }
.pg-domain .todo { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--panel2); font-size: 13.5px; }
.pg-domain .todo .who { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--cyan); display: block; margin-bottom: 2px; }
.pg-domain .rec { margin-top: 10px; font-size: 12.5px; color: var(--mute); display: grid; gap: 2px; }
.pg-domain .rec .rt { color: var(--ink); }
.pg-domain .rec .rd { font-family: var(--f-mono); font-size: 11px; color: var(--red); letter-spacing: .1em; }
.pg-domain .oklist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pg-domain .oklist span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(79,224,164,.35); color: var(--mute); }
.pg-domain .oklist span::before { content: "✓ "; color: var(--green); }
.pg-domain .limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; font-size: 13.5px; color: var(--mute); }
.pg-domain .limits h3 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.pg-domain .limits ul { margin: 0; padding-left: 1.2em; }
.pg-domain .cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border: 1px solid var(--line2); border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, rgba(61,123,255,.18), transparent 60%), var(--deep); }
.pg-domain .cta b { font-size: 17px; }
.pg-domain .cta a { padding: 10px 18px; border-radius: 10px; background: var(--cyan); color: #021019; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pg-domain .note { font-size: 12px; color: var(--faint); }


/* network walkthrough */
.pg-domain .netlead { color: var(--mute); margin: 0 0 14px; max-width: 46em; }
.pg-domain .ntabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pg-domain .ntab { border: 1px solid var(--line2); background: var(--deep); border-radius: 999px; padding: 7px 16px; cursor: pointer; font-size: 13.5px; color: var(--mute); }
.pg-domain .ntab[aria-selected="true"] { border-color: var(--cyan); color: var(--ink); background: rgba(92,211,255,.08); }
.pg-domain .nstage { border: 1px solid var(--line2); border-radius: 14px; background: radial-gradient(90% 120% at 50% 0%, rgba(61,123,255,.10), transparent 70%), var(--deep); padding: 14px; }
.pg-domain .nsvg svg { display: block; width: 100%; height: auto; max-height: 420px; margin: 0 auto; }
.pg-domain .nsvg svg.narrow { max-width: 380px; max-height: none; }
.pg-domain .nedge { stroke: #24344d; stroke-width: 1.4; }
.pg-domain .nedge.dash { stroke-dasharray: 5 5; }
.pg-domain .nedge.on { stroke: var(--cyan); stroke-width: 2.2; }
.pg-domain .nedge.bad { stroke: rgba(255,77,94,.35); }
.pg-domain .nedge.bad.on { stroke: var(--red); }
.pg-domain .nnode rect { fill: #0a1222; stroke: #24344d; stroke-width: 1.2; transition: stroke .3s, fill .3s; }
.pg-domain .nnode.on rect { stroke: var(--cyan); fill: rgba(92,211,255,.09); stroke-width: 1.8; }
.pg-domain .nnode.bad rect { stroke: rgba(255,77,94,.45); }
.pg-domain .nnode.bad.on rect { stroke: var(--red); fill: rgba(255,77,94,.10); }
.pg-domain .nt1 { font: 700 14px var(--f-body); fill: var(--mute); }
.pg-domain .nt2 { font: 500 12px var(--f-body); fill: var(--faint); }
.pg-domain .nnode.on .nt1 { fill: var(--ink); } .nnode.on .nt2 { fill: var(--cyan); }
.pg-domain .nnode.bad.on .nt2 { fill: #ff9aa4; }
.pg-domain .nlabbg { fill: #021019; stroke: var(--cyan); }
.pg-domain .nlab { font: 500 12px var(--f-mono); fill: var(--cyan); }
.pg-domain .nbadge rect { stroke-width: 1.2; }
.pg-domain .nbadge text { font: 700 12px var(--f-body); }
.pg-domain .nbadge.act rect, .pg-domain .nbadge.live rect { fill: rgba(255,77,94,.16); stroke: var(--red); } .nbadge.act text, .nbadge.live text { fill: #ffb3ba; }
.pg-domain .nbadge.chk rect { fill: rgba(255,194,77,.14); stroke: var(--amber); } .nbadge.chk text { fill: #ffd98a; }
.pg-domain .nbadge.ok rect { fill: rgba(79,224,164,.12); stroke: var(--green); } .nbadge.ok text { fill: #9ff0cc; }
.pg-domain .nbadge.info rect { fill: rgba(150,164,187,.12); stroke: var(--mute); } .nbadge.info text { fill: var(--mute); }
.pg-domain .nblock circle { fill: rgba(79,224,164,.15); stroke: var(--green); stroke-width: 1.5; } .nblock path { stroke: var(--green); stroke-width: 2.2; fill: none; }
.pg-domain .npkt { fill: #eaf9ff; } .npkt.halo { fill: var(--cyan); opacity: .7; } .npkt.bad { fill: #ffd0d5; } .npkt.halo.bad { fill: var(--red); }
.pg-domain .ncap { margin-top: 10px; padding: 12px 14px; border-top: 1px solid var(--line); min-height: 150px; }
.pg-domain .nstep { font-size: 10.5px; color: var(--cyan); letter-spacing: .26em; }
.pg-domain .ncap h3 { margin: 4px 0 6px; font-size: 17px; line-height: 1.5; text-wrap: balance; }
.pg-domain .ncap h3.bad { color: #ff9aa4; }
.pg-domain .ncap p { margin: 0 0 6px; color: var(--mute); font-size: 14px; max-width: 52em; }
.pg-domain .ncap .nfoot { color: var(--faint); font-size: 12.5px; }
.pg-domain .njump { border: 0; background: none; color: var(--cyan); padding: 0; cursor: pointer; font-size: 13px; }
.pg-domain .nctr { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pg-domain .nbtn { border: 1px solid var(--line2); background: var(--deep); border-radius: 10px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.pg-domain .nbtn:hover { border-color: var(--cyan); }
.pg-domain .nbtn.play[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.pg-domain .ndots { display: flex; gap: 6px; }
.pg-domain .ndot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line2); background: none; padding: 0; cursor: pointer; }
.pg-domain .ndot[aria-current="true"] { background: var(--cyan); border-color: var(--cyan); }
.pg-domain .snip { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line2); position: relative; }
.pg-domain .snip .who { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--mute); display: block; margin-bottom: 4px; }
.pg-domain .snip pre { margin: 0; font: 12px/1.6 var(--f-mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 76px; }
.pg-domain .copy { position: absolute; right: 10px; top: 10px; border: 1px solid var(--line2); background: var(--panel2); border-radius: 8px; font-size: 11.5px; padding: 3px 9px; cursor: pointer; }
.pg-domain .issue.flash { box-shadow: 0 0 0 2px var(--cyan); transition: box-shadow .3s; }
@media (max-width: 980px) {
  .pg-domain .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .pg-domain .hero .globe { order: -1; max-width: 460px; }
  .pg-domain .trace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-domain .issues, .pg-domain .issues.three, .pg-domain .limits { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pg-domain .trace { grid-template-columns: minmax(0, 1fr); }
  .pg-domain form.scan button { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-domain * { transition: none !important; }
}