/*
 * Compare panels — 2枚並べて対比する図をCSSで組む。
 * 画像で描いていた説明図の置き換え。文字が選べて、暗色モードにも縦画面にも追従する。
 * front: lib/nettoge/inc/assets/styles-front.php（本文に .c-nettogeCompare があるときだけ）
 * editor: lib/nettoge/inc/editor/styles.php の content style map
 */

.c-nettogeCompare {
  margin: 2em 0;
  font-size: 15px;
}

.c-nettogeCompare__title {
  margin: 0 0 0.6em;
  padding: 0 0 0.35em;
  border-bottom: 2px solid var(--ntg-brass, #b8892e);
  color: var(--ntg-ink, #1a1c1e);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.c-nettogeCompare__panels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0 14px;
}

.c-nettogeCompare__panels.is-single {
  grid-template-columns: 1fr;
}

.c-nettogeCompare__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--ntg-steel, #6b6f76);
  background: var(--ntg-surface-1, #fff);
}

.c-nettogeCompare__head {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ntg-steel, #6b6f76);
  background: var(--ntg-surface-3, #e8e9ea);
  color: var(--ntg-ink, #1a1c1e);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.c-nettogeCompare__rows {
  margin: 0;
  padding: 12px 12px 13px;
  list-style: none;
  display: grid;
  gap: 6px;
}

.c-nettogeCompare__rows > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-nettogeCompare__row {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--ntg-steel, #6b6f76) 45%, transparent);
  background: var(--ntg-surface-2, #f4f4f5);
  color: var(--ntg-ink, #1a1c1e);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.c-nettogeCompare__row.is-file {
  font-family: var(--font-code, ui-monospace, "SFMono-Regular", Consolas, "Noto Sans Mono", monospace);
  font-size: 12.5px;
}

.c-nettogeCompare__row.is-warn {
  border-color: color-mix(in srgb, var(--ntg-crimson, #b84335) 55%, transparent);
  background: color-mix(in srgb, var(--ntg-crimson, #b84335) 10%, var(--ntg-surface-1, #fff));
  color: color-mix(in srgb, var(--ntg-crimson, #b84335) 85%, var(--ntg-ink, #1a1c1e));
  font-weight: 700;
}

.c-nettogeCompare__row.is-off {
  color: var(--ntg-muted, #5c6168);
}

/* チェックボックス（MO2の左ペイン用） */
.c-nettogeCompare__row.is-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-nettogeCompare__box {
  flex: 0 0 auto;
  position: relative;
  width: 13px;
  height: 13px;
  border: 1px solid var(--ntg-steel, #6b6f76);
  background: var(--ntg-surface-1, #fff);
}

.c-nettogeCompare__box.is-on {
  border-color: var(--ntg-teal, #2f7a72);
  background: var(--ntg-teal, #2f7a72);
}

.c-nettogeCompare__box.is-on::after {
  position: absolute;
  top: 1px;
  left: 4px;
  width: 3px;
  height: 7px;
  border: solid var(--ntg-on-band, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: "";
}

/* 行の下に付ける注記 */
.c-nettogeCompare__note {
  margin: 2px 0 0;
  color: var(--ntg-muted, #5c6168);
  font-size: 12px;
  line-height: 1.6;
}

.c-nettogeCompare__foot {
  margin: auto 0 0;
  padding: 10px 12px 12px;
  border-top: 1px dashed color-mix(in srgb, var(--ntg-steel, #6b6f76) 45%, transparent);
  color: var(--ntg-muted, #5c6168);
  font-size: 12px;
  line-height: 1.65;
}

.c-nettogeCompare__mark {
  align-self: center;
  margin: 0;
  color: var(--ntg-crimson, #b84335);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.c-nettogeCompare__mark.is-equal {
  color: var(--ntg-brass-text, #8a6520);
}

.c-nettogeCompare__mark.is-cross {
  font-size: 26px;
}

.c-nettogeCompare__banner {
  margin: 18px 0 0;
  padding: 13px 15px 14px;
  border: 1px solid color-mix(in srgb, var(--ntg-crimson, #b84335) 55%, transparent);
  background: color-mix(in srgb, var(--ntg-crimson, #b84335) 8%, var(--ntg-surface-1, #fff));
  color: var(--ntg-ink, #1a1c1e);
  font-size: 13px;
  line-height: 1.7;
}

.c-nettogeCompare__banner.is-ok {
  border-color: color-mix(in srgb, var(--ntg-success, #2f7d4a) 55%, transparent);
  background: color-mix(in srgb, var(--ntg-success, #2f7d4a) 8%, var(--ntg-surface-1, #fff));
}

.c-nettogeCompare__banner b {
  display: block;
  margin-bottom: 3px;
  font-weight: 700;
}

/* 縦画面では上下に積む。矢印は下向きにする */
@media (width < 600px) {
  .c-nettogeCompare__panels {
    grid-template-columns: 1fr;
    gap: 10px 0;
  }

  .c-nettogeCompare__mark {
    justify-self: center;
    font-size: 20px;
  }

  .c-nettogeCompare__mark.is-arrow {
    transform: rotate(90deg);
  }
}