/*
 * WordPress 改ざんチェッカーの画面。デザイン基準: DADS(トークン 2.x)。
 * DADS の部品は dads.css(dads-*)、このファイルは配置とこのツール独自の部品(kc-*)。色・余白・角丸は DADS のトークンだけを使う。
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-800);
  font-family: var(--font-family-sans);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

p, ul, ol, dl, dd { margin: 0; }

[hidden] { display: none !important; }

.kc-container {
  max-width: calc(960 / 16 * 1rem);
  margin: 0 auto;
  padding: 0 calc(16 / 16 * 1rem);
}

@media (min-width: 48rem) {
  .kc-container { padding: 0 calc(32 / 16 * 1rem); }
}

.kc-skip {
  position: absolute;
  left: calc(8 / 16 * 1rem);
  top: calc(-64 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
  background: var(--color-neutral-white);
  color: var(--color-primitive-blue-1000);
  border-radius: calc(8 / 16 * 1rem);
  z-index: 10;
}
.kc-skip:focus { top: calc(8 / 16 * 1rem); }

/* ヘッダー・フッター */
.kc-header {
  border-bottom: 1px solid var(--color-neutral-solid-gray-420);
}
.kc-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(4 / 16 * 1rem) calc(16 / 16 * 1rem);
  padding-top: calc(12 / 16 * 1rem);
  padding-bottom: calc(12 / 16 * 1rem);
}
.kc-header__name {
  color: var(--color-neutral-solid-gray-900);
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
}
.kc-header__by { font-size: calc(14 / 16 * 1rem); }

.kc-footer {
  margin-top: calc(64 / 16 * 1rem);
  padding: calc(24 / 16 * 1rem) 0 calc(40 / 16 * 1rem);
  border-top: 1px solid var(--color-neutral-solid-gray-420);
  font-size: calc(14 / 16 * 1rem);
}
.kc-footer p + p { margin-top: calc(8 / 16 * 1rem); }

/* 見出し(DADS のスタイル Std-32B-150 / Std-24B-150 / Std-18B-160 の目安) */
.kc-h1 {
  margin: 0;
  color: var(--color-neutral-solid-gray-900);
  font-size: calc(28 / 16 * 1rem);
  line-height: 1.5;
}
@media (min-width: 48rem) {
  .kc-h1 { font-size: calc(32 / 16 * 1rem); }
}
.kc-h2 {
  margin: 0 0 calc(16 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-size: calc(22 / 16 * 1rem);
  line-height: 1.5;
}
@media (min-width: 48rem) {
  .kc-h2 { font-size: calc(24 / 16 * 1rem); }
}
.kc-h3 {
  margin: calc(24 / 16 * 1rem) 0 calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-size: calc(18 / 16 * 1rem);
  line-height: 1.6;
}

.kc-lead { margin-top: calc(16 / 16 * 1rem); }

.kc-note {
  margin-top: calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(14 / 16 * 1rem);
}

.kc-list { padding-left: 1.5em; }
.kc-list li + li { margin-top: calc(8 / 16 * 1rem); }

/* 入力フォーム */
.kc-hero { padding: calc(32 / 16 * 1rem) 0 calc(24 / 16 * 1rem); }
.kc-form { margin-top: calc(24 / 16 * 1rem); }
.kc-form__row {
  display: flex;
  flex-direction: column;
  gap: calc(12 / 16 * 1rem);
}
.kc-form__row .dads-input-text { flex: 1 1 auto; }
.kc-form__input { width: 100%; }
.kc-form__submit { width: 100%; }
@media (min-width: 48rem) {
  .kc-form__row { flex-direction: row; align-items: flex-start; }
  .kc-form__submit { width: auto; flex: 0 0 auto; }
}
.dads-form-control-label__support-text { color: var(--color-neutral-solid-gray-700); }

/* 処理中・エラーの表示 */
.kc-status:not(:empty) {
  margin: calc(8 / 16 * 1rem) 0 calc(24 / 16 * 1rem);
}
.kc-progress {
  display: flex;
  align-items: center;
  gap: calc(12 / 16 * 1rem);
  padding: calc(16 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  background: var(--color-neutral-solid-gray-50);
}
.kc-progress__spinner {
  flex: 0 0 auto;
  width: calc(24 / 16 * 1rem);
  height: calc(24 / 16 * 1rem);
  border: 3px solid var(--color-neutral-solid-gray-300);
  border-top-color: var(--color-key-900);
  border-radius: 50%;
  animation: kc-spin 1s linear infinite;
}
@keyframes kc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kc-progress__spinner { animation: none; }
}

/* 結果 */
.kc-result { padding-top: calc(16 / 16 * 1rem); }
.kc-result:focus { outline: none; }
.kc-scope {
  margin-top: calc(16 / 16 * 1rem);
  padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
  border-left: calc(4 / 16 * 1rem) solid var(--color-neutral-solid-gray-536);
  background: var(--color-neutral-solid-gray-50);
}
.kc-meta {
  margin-top: calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(14 / 16 * 1rem);
  overflow-wrap: anywhere;
}
.kc-explain { margin-top: calc(8 / 16 * 1rem); }

.kc-evidence { margin-top: calc(40 / 16 * 1rem); }
.kc-findings li { overflow-wrap: anywhere; }
.kc-strong-mark {
  display: inline-block;
  margin-right: calc(8 / 16 * 1rem);
  padding: 0 calc(8 / 16 * 1rem);
  border: 1px solid var(--color-semantic-error-1);
  border-radius: calc(4 / 16 * 1rem);
  color: var(--color-semantic-error-1);
  font-size: calc(14 / 16 * 1rem);
  font-weight: bold;
  line-height: 1.7;
}

.kc-views {
  display: grid;
  gap: calc(16 / 16 * 1rem);
  margin-top: calc(16 / 16 * 1rem);
}
@media (min-width: 64rem) {
  .kc-views { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kc-view {
  padding: calc(16 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(8 / 16 * 1rem);
}
.kc-view[data-differs="true"] {
  border: 2px solid var(--color-semantic-error-1);
}
.kc-view__title {
  margin: 0 0 calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-size: calc(17 / 16 * 1rem);
  line-height: 1.6;
}
.kc-view__badge {
  display: inline-block;
  margin-bottom: calc(8 / 16 * 1rem);
  font-size: calc(14 / 16 * 1rem);
  font-weight: bold;
}
.kc-view__badge[data-differs="true"] { color: var(--color-semantic-error-1); }

.kc-dl dt {
  margin-top: calc(12 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-weight: bold;
}
.kc-dl dt:first-child { margin-top: 0; }
.kc-dl dd { overflow-wrap: anywhere; }
.kc-view .kc-dl dt { font-size: calc(14 / 16 * 1rem); }
.kc-view .kc-dl dd { font-size: calc(16 / 16 * 1rem); }

.kc-code {
  display: block;
  margin-top: calc(4 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  background: var(--color-neutral-solid-gray-50);
  font-family: var(--font-family-mono);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 相談の窓口 */
.kc-cta {
  margin-top: calc(40 / 16 * 1rem);
  padding: calc(24 / 16 * 1rem) calc(16 / 16 * 1rem);
  border-radius: calc(12 / 16 * 1rem);
  background: var(--color-key-50);
}
@media (min-width: 48rem) {
  .kc-cta { padding: calc(32 / 16 * 1rem); }
}
.kc-cta__grid {
  display: grid;
  gap: calc(16 / 16 * 1rem);
}
@media (min-width: 48rem) {
  .kc-cta__grid { grid-template-columns: 1fr 1fr; }
}
.kc-cta__item {
  display: flex;
  flex-direction: column;
  gap: calc(12 / 16 * 1rem);
  padding: calc(16 / 16 * 1rem) calc(16 / 16 * 1rem) calc(24 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  background: var(--color-neutral-white);
}
.kc-cta__item .kc-h3 { margin: 0; }
.kc-cta__item .dads-button { margin-top: auto; }

/* 説明 */
.kc-about { margin-top: calc(64 / 16 * 1rem); }
.kc-about > p + .kc-dl { margin-top: calc(16 / 16 * 1rem); }

/* 通知バナーの中の段落 */
.dads-notification-banner { margin-top: calc(8 / 16 * 1rem); }
.dads-notification-banner__body p { overflow-wrap: anywhere; }