@charset "utf-8";
/* 比較表選択デモ style.css
   区画: 1.ベース / 2.ページレイアウト / 3.表の基本枠 / DEMO ONLY / 4.選択UI /
         5.固定バー / 6.生成結果 / 7.ソース表示 / 8.トースト / 9.レスポンシブ */

/* ============ 1. ベース / リセット ============ */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: #f5f7fa;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

img { max-width: 100%; }

/* ============ 2. ページレイアウト ============ */
.page-head {
  padding: 18px 16px;
  background: #1c4f9c;
  color: #fff;
}
.page-head h1 { margin: 0; font-size: 1.25rem; }

.page-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.notice,
.howto {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
}
.notice h2,
.howto h2 { margin: 0 0 6px; font-size: 1rem; }
.notice ul { margin: 0; padding-left: 1.2em; }
.howto ol { margin: 0; padding-left: 1.3em; }
.notice li,
.howto li { font-size: 0.875rem; }
.notice code {
  padding: 1px 5px;
  background: #eef2f8;
  border-radius: 4px;
  font-size: 0.9em;
}

.cmp-section {
  margin: 0 0 28px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
}
.cmp-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cmp-section-head h2 { margin: 0; font-size: 1.05rem; }

.cmp-btn {
  font: inherit;
  line-height: 1.3;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.cmp-btn--primary { background: #1c4f9c; border-color: #1c4f9c; color: #fff; font-weight: 700; }
.cmp-btn--ghost   { background: #fff; border-color: #1c4f9c; color: #1c4f9c; }
.cmp-btn:hover    { opacity: 0.88; }
.cmp-btn:focus-visible { outline: 2px solid #f0464b; outline-offset: 2px; }

/* ============ 3. 表の基本枠 ============ */
figure.wp-block-table {
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
figure.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
figure.wp-block-table th,
figure.wp-block-table td {
  padding: 10px 8px;
  border: 1px solid #dcdcdc;
  font-size: 0.9rem;
  vertical-align: middle;
}

/* ===================== DEMO ONLY START =====================
   ここから下のDEMO ONLY区画は、SWELLテーマ本体のCSSからのコピーは一切していない自作の近似です。
   見た目をデモ用に似せるためだけのもので、本番のWordPress（SWELL）ではテーマ本体のCSSが
   当たるため、この区画は丸ごと削除してください。
   ========================================================== */
.has-fixed-layout { table-layout: fixed; width: 100%; }

.is-all-centered th,
.is-all-centered td { text-align: center; }

.wp-block-table thead th {
  background: #1c4f9c;
  color: #fff;
  font-weight: 700;
}

/* ◯✕アイコン。font-size:0 はセル内の空白文字を消すためで、
   大きさは自身のfont-sizeに影響されないrem指定にしている */
.swl-cell-bg {
  display: inline-block;
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: middle;
  font-size: 0;
}
.swl-cell-bg[data-icon-size="l"] { width: 1.9rem; height: 1.9rem; }

.swl-cell-bg[data-icon="circle"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #46b450;
  border-radius: 50%;
}
.swl-cell-bg[data-icon="close"]::before,
.swl-cell-bg[data-icon="close"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: #e0706b;
}
.swl-cell-bg[data-icon="close"]::before { transform: rotate(45deg); }
.swl-cell-bg[data-icon="close"]::after  { transform: rotate(-45deg); }

.swl-inline-btn a {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 6px;
  background: #f0464b;
  color: #fff;
  font-weight: 700;
  font-size: 0.85em;
  text-decoration: none;
}
/* ====================== DEMO ONLY END ====================== */

/* ============ 4. 選択UI ============ */
.cmp-check {
  display: flex;              /* 行頭テキストと連結させないためブロック化する */
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;            /* ②のボタンとの間隔 */
  font-size: 0.8rem;
  font-weight: 400;
  color: #444;
  cursor: pointer;
  user-select: none;
}
.cmp-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1c4f9c;
  cursor: pointer;
}
.cmp-check.is-disabled { opacity: 0.45; cursor: not-allowed; }
.cmp-check.is-disabled .cmp-check-input { cursor: not-allowed; }

/* ============ 5. 固定バー ============ */
.cmp-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #d6dbe3;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}
.cmp-bar p { margin: 0; font-size: 0.9rem; }
.cmp-bar-scope { font-weight: 700; color: #1c4f9c; }
.cmp-bar-n { font-size: 1.1rem; }
.cmp-bar-note { color: #c0392b; font-size: 0.8rem; }
.cmp-bar .cmp-btn { min-height: 44px; }
.cmp-bar .cmp-btn--primary { margin-left: auto; }

body.has-cmp-bar { padding-bottom: 110px; }

/* ============ 6. 生成結果 ============ */
.cmp-result-wrap {
  margin: 16px 0 4px;
  padding: 12px;
  background: #f1f5fc;
  border: 2px solid #1c4f9c;
  border-radius: 8px;
}
.cmp-result-wrap:focus { outline: none; }
.cmp-result-wrap:focus-visible { outline: 2px solid #f0464b; outline-offset: 2px; }
.cmp-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cmp-result-title {
  margin: 0;
  color: #1c4f9c;
  font-weight: 700;
  font-size: 0.95rem;
}

/* ============ 7. ソース表示 ============ */
.cmp-source { margin: 0 0 12px; }
.cmp-source pre {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 12px;
  background: #1e2430;
  border-radius: 6px;
}
.cmp-source code {
  color: #e6ebf3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}
.cmp-hl {
  padding: 0 3px;
  background: #ffe066;
  color: #1e2430;
  border-radius: 3px;
  font-weight: 700;
}

/* ============ 8. トースト ============ */
.cmp-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  transform: translateX(-50%);
  max-width: 90vw;
  padding: 10px 18px;
  background: rgba(30, 36, 48, 0.94);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font-size: 0.85rem;
  text-align: center;
}
body.has-cmp-bar .cmp-toast { bottom: 120px; }

/* ============ 9. レスポンシブ ============ */
@media (max-width: 600px) {
  .page-main { padding: 16px 12px 40px; }
  .cmp-section { padding: 12px; }
  .cmp-section-head h2 { font-size: 1rem; }

  figure.wp-block-table table { min-width: 560px; }

  /* 1列目を左固定。border-collapse:collapse のままだとSafariで罫線が消えるため
     separate + box-shadow で罫線を引く。
     セレクタは区画3の figure.wp-block-table 系より強くしておく（順序に依存させない） */
  figure.wp-block-table.cmp-result table {
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
  }
  figure.wp-block-table.cmp-result th,
  figure.wp-block-table.cmp-result td {
    border: 0;
    box-shadow: inset -1px -1px 0 #dcdcdc;
  }
  figure.wp-block-table.cmp-result th:first-child,
  figure.wp-block-table.cmp-result td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
  }
  figure.wp-block-table.cmp-result thead th:first-child {
    background: #1c4f9c;
    z-index: 3;
  }
  figure.wp-block-table.cmp-result img {
    width: auto !important;
    max-width: 110px;
    height: auto;
  }

  .cmp-bar { gap: 8px 10px; padding: 10px 12px; }
  .cmp-bar .cmp-btn { min-height: 44px; }
  body.has-cmp-bar { padding-bottom: 110px; }
}