/* ---------- Design tokens ---------- */

:where(.denki-simulator) {
  /* Brand palette — derived from image2 / image3 mocks */
  --ds-color-primary: #5fb56c; /* green title accent */
  --ds-color-primary-dark: #3f8a4c;
  --ds-color-accent: #fe6a01; /* orange CTA */
  --ds-color-accent-hover: #e08e10;
  --ds-color-accent-soft: #fff4dc;
  --ds-color-text: #222;
  --ds-color-text-sub: #666;
  --ds-color-text-faint: #999;
  --ds-color-bg: #ffffff;
  --ds-color-bg-soft: #f7f8f9;
  --ds-color-bg-guide: #fffbe6;
  --ds-color-border: #e4e6ea;
  --ds-color-border-strong: #c9ccd1;
  --ds-color-error-bg: #fdecec;
  --ds-color-error-fg: #b32d2e;
  --ds-color-rank-top-bg: #fff8e6;

  /* Shape */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 16px;
  --ds-radius-pill: 999px;

  /* Spacing scale */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;

  /* Shadows */
  --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Typography */
  --ds-font-size-sm: 13px;
  --ds-font-size-md: 15px;
  --ds-font-size-lg: 18px;
  --ds-font-size-xl: 24px;
}

/* ---------- Outer wrap ----------
   Sits inside #main-contents and gives the simulator block some
   breathing room from the host theme's column edges. The wrap is
   100% wide; padding creates the gap so the inner block (which has
   its own box-shadow) doesn't appear flush against surrounding text
   or sibling sections. */

/* NOTE: this rule intentionally does NOT use :where(). The host theme
   (JIN, via main-contents.css) ships a `div { padding:0; margin:0 }`
   reset with specificity (0,0,1). Wrapping in :where() would drop our
   specificity to (0,0,0) and lose the cascade. A plain class selector
   is (0,1,0), which beats the type-selector reset. */
.denki-simulator-wrap {
  display: block;
  width: 100%;
  /* Vertical 24px / horizontal 8px breathing room. The custom-property
     tokens live on .denki-simulator and don't cascade up to here, so
     these values are intentionally literal. */
  padding: 24px 15px;
  box-sizing: border-box;
  container-type: inline-size;
  border: 10px solid #5fb56c;
}

/* Ranking page has no outer green frame. The class selector (0,2,0)
   outranks the base .denki-simulator-wrap rule (0,1,0). Only the
   [denki_ranking] shortcode emits this modifier, so the [denki_simulator]
   form keeps its border. border-style:none also neutralizes the mobile
   `border-width: 4px` override below (width without a style renders nothing). */
.denki-simulator-wrap--ranking {
  border: none;
  /* No outer breathing room on the ranking page. (0,2,0) also overrides
     the mobile `.denki-simulator-wrap { padding: 12px 8px }` rule (0,1,0). */
  padding: 0;
}

/* ---------- Block container ----------
   Padding is intentionally lighter than the original 32px because the
   block lives inside a narrow #main-contents column on PC. */

:where(.denki-simulator) {
  display: block;
  background: var(--ds-color-bg);
  border: 1px solid var(--ds-color-border);
  border-radius: 16px;
  padding: var(--ds-space-5);
  color: var(--ds-color-text);
  font-size: var(--ds-font-size-md);
  line-height: 1.6;
}

/* Local box-sizing reset so the plugin works correctly even when the
   host theme has not applied a global `* { box-sizing: border-box }`. */
:where(.denki-simulator),
:where(.denki-simulator) *,
:where(.denki-simulator) *::before,
:where(.denki-simulator) *::after {
  box-sizing: border-box;
}

/* Neutralize the host theme's content-image margin. JIN ships
   `.cps-post-main img { margin-bottom: 20px }` (specificity 0,1,1), which
   would add 20px under every logo / icon / bulb / medal and break our
   flex/grid alignment. This compound class selector (0,2,1) outranks it
   without !important; spacing inside the block is handled by flex/grid gaps,
   never by image margins, so zeroing them is safe. */
.denki-simulator-wrap .denki-simulator img {
  margin: 0;
}

/* ---------- Header (title + brand logo) ---------- */

:where(.denki-simulator) .denki-simulator__header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-2);
  position: relative;
}

:where(.denki-simulator) .denki-simulator__title {
  font-size: max(20px, 3.4cqi);
  font-weight: 700;
  margin: 0;
  color: var(--ds-color-text);
  letter-spacing: 0.1cqi;
}

:where(.denki-simulator) .denki-simulator__brand-wrap {
  position: absolute;
  right: 0;
}

:where(.denki-simulator) .denki-simulator__brand-wrap .denki-simulator__brand {
  display: block;
  height: 4cqi;
  width: auto;
}

:where(.denki-simulator) .denki-simulator__lead {
  display: flex;
  justify-content: center;
  color: var(--ds-color-text-sub);
  margin: 0 0 var(--ds-space-4);
  font-size: max(12px, 1.4cqi);
  font-weight: bold;
}

/* ---------- Flow indicator (3 steps row) ----------
   Compact horizontal strip; arrows shrink, labels do not wrap. */

:where(.denki-simulator) .denki-simulator__flow-wrap {
  margin: 0 0 var(--ds-space-5);
}

:where(.denki-simulator) .denki-simulator__flow-prefix {
  display: inline-block;
  padding: 0.3cqi 0.7cqi;
  background: var(--ds-color-primary);
  color: #fff;
  border-radius: 8px;
  font-weight: bold;
  font-size: max(11px, 1.2cqi);
  letter-spacing: 0.2cqi;
}

:where(.denki-simulator) .denki-simulator__flow {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  font-size: max(12px, 1.4cqi);
  font-weight: bold;
  padding: 12px 6cqi;
  justify-content: center;
}

:where(.denki-simulator) .denki-simulator__flow-step {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-width: 0;
}

/* Designer icons are standalone colored PNGs (no circle background),
   so the icon slot is now just a sized, transparent box. */
:where(.denki-simulator) .denki-simulator__flow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3cqi;
  height: 3cqi;
}

:where(.denki-simulator) .denki-simulator__flow-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:where(.denki-simulator) .denki-simulator__flow-label {
  line-height: 1.3;
  color: var(--ds-color-text);
  font-weight: 500;
  /* allow truncation in tight columns rather than overflowing */
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.denki-simulator) .denki-simulator__flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-text-faint);
  flex-shrink: 0;
}

:where(.denki-simulator) .denki-simulator__flow-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Form skeleton ---------- */

:where(.denki-simulator) .denki-simulator__form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
}

/* STEP1 / STEP2 sit side by side (image2). STEP1 (location) is the
   narrower left column, STEP2 (usage) the wider right column.
   Flex layout: the two .denki-simulator__step children carry the
   5 : 6 width ratio via flex-grow (see rule below). min-width: 0 on
   the children lets them shrink so the inner grids never overflow. */
:where(.denki-simulator) .denki-simulator__steps {
  display: flex;
  gap: var(--ds-space-3);
  justify-content: space-between;
  align-items: stretch;
}

/* Width ratio between STEP1 (left, narrower) and STEP2 (right, wider).
   flex-basis: 0 makes flex-grow act as a pure proportion (5 : 6). */
:where(.denki-simulator)
  .denki-simulator__steps
  > .denki-simulator__step:nth-child(1) {
  width: 35%;
}
:where(.denki-simulator)
  .denki-simulator__steps
  > .denki-simulator__step:nth-child(2) {
  width: 60%;
}

/* Each step is now a bordered card box (was a borderless block). */
:where(.denki-simulator) .denki-simulator__step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-bg);
  margin: 0;
}

:where(.denki-simulator) .denki-simulator__step-legend {
  display: flex;
  align-items: center;
  font-weight: 700;
  margin-bottom: var(--ds-space-3);
  padding: 0;
}

:where(.denki-simulator) .denki-simulator__step-badge {
  display: inline-block;
  background: var(--ds-color-primary);
  color: #fff;
  font-weight: 700;
  font-size: max(12px, 1.5cqi);
  padding: 0.4cqi 1cqi;
  border-radius: 8px;
  white-space: nowrap;
}

:where(.denki-simulator) .denki-simulator__step-info {
  display: inline-block;
  font-weight: 700;
  font-size: max(10px, 1.2cqi);
  padding: 0.4cqi 1cqi;
  border-radius: 8px;
}

/* ---------- Tabs (address vs prefecture) ---------- */

:where(.denki-simulator) .denki-simulator__tabs {
  display: flex;
  margin-bottom: var(--ds-space-2);
  justify-content: space-between;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

:where(.denki-simulator) .denki-simulator__tab {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: max(10px, 1.3cqi);
  padding: 1cqi 1cqi;
  background: #f1f1f1;
  border: 2px solid var(--ds-color-border);
  font-weight: 500;
  color: var(--ds-color-text-sub);
  cursor: pointer;
  transition: all 0.15s ease;
  width: 50%;
}

:where(.denki-simulator) .denki-simulator__tab-left {
  border-top-left-radius: 10px;
}

:where(.denki-simulator) .denki-simulator__tab-right {
  border-top-right-radius: 10px;
}

:where(.denki-simulator) .denki-simulator__tab--active {
  background: var(--ds-color-primary);
  border-color: var(--ds-color-primary);
  color: #fff;
}

:where(.denki-simulator) .denki-simulator__tab--active:hover {
  background: var(--ds-color-primary-dark);
  border-color: var(--ds-color-primary-dark);
  color: #fff;
}

:where(.denki-simulator) .denki-simulator__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3cqi;
  height: 3cqi;
}

:where(.denki-simulator) .denki-simulator__tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Form fields ---------- */

:where(.denki-simulator) .denki-simulator__tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

/* The HTML `hidden` attribute sets display:none by default, but any
   explicit `display` value (like our flex above) overrides it.
   This rule restores the expected behavior. */
:where(.denki-simulator) .denki-simulator__tab-panel[hidden] {
  display: none;
}

:where(.denki-simulator) .denki-simulator__input,
:where(.denki-simulator) .denki-simulator__select {
  width: 100%;
  padding: 1cqi 1.2cqi;
  background: var(--ds-color-bg);
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-md);
  font-size: max(13px, 1.4cqi);
  font-family: inherit;
  color: var(--ds-color-text);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

/* Address field: gray pin icon inside the left edge (icon-input-pin.png). */
:where(.denki-simulator) .denki-simulator__input {
  padding-left: 4cqi;
  background-image: url(../images/icon-input-pin.png);
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 3cqi 3cqi;
}

/* Prefecture select: hide the native arrow and draw our own chevron
   (icon-chevron-down.png) inside the right edge. */
:where(.denki-simulator) .denki-simulator__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3.8cqi;
  background-image: url(../images/icon-chevron-down.png);
  background-repeat: no-repeat;
  background-position: right 1.2cqi center;
  background-size: 2.5cqi 2.5cqi;
}

:where(.denki-simulator) .denki-simulator__input::placeholder {
  color: var(--ds-color-text-faint);
}

:where(.denki-simulator) .denki-simulator__input:focus,
:where(.denki-simulator) .denki-simulator__select:focus {
  outline: none;
  border-color: var(--ds-color-primary);
  box-shadow: 0 0 0 3px rgba(95, 181, 108, 0.18);
}

:where(.denki-simulator) .denki-simulator__hint {
  font-size: max(11px, 1.4cqi);
  color: var(--ds-color-text-faint);
  margin: 0;
  transition: color 0.15s;
}

/* Prefecture locked mode (shortcode attr prefecture="…") — shown
   instead of the tabs/inputs when the prefecture is fixed. */
:where(.denki-simulator) .denki-simulator__locked-area {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 14px 24px;
  background: var(--ds-color-accent-soft);
  border: 2px solid var(--ds-color-accent);
  border-radius: var(--ds-radius-md);
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-color-text);
}

:where(.denki-simulator) .denki-simulator__locked-area svg {
  width: 20px;
  height: 20px;
  color: var(--ds-color-accent);
  flex-shrink: 0;
}

/* Success state: a valid prefecture was parsed from the address */
:where(.denki-simulator) .denki-simulator__hint--success {
  color: var(--ds-color-primary-dark);
  font-weight: 600;
}

/* Warning state: address text present but no prefecture name matched */
:where(.denki-simulator) .denki-simulator__hint--warning {
  color: var(--ds-color-accent-hover);
  font-weight: 500;
}

/* ---------- STEP 2: usage cards + sidebar layout ----------
   The right-hand guide column is narrower than before so the
   usage cards keep enough horizontal space inside #main-contents. */
/* ---------- STEP 2: usage cards + sidebar layout ---------- */
:where(.denki-simulator) .denki-simulator__step.denki-simulator__step--usage {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "legend guide"
    "grid guide";
  gap: var(--ds-space-3);
  align-items: stretch;
}

:where(.denki-simulator)
  .denki-simulator__step--usage
  > .denki-simulator__step-legend {
  grid-area: legend;
  margin-bottom: 0; /* 底部间距由网格的 gap 接管 */
}

:where(.denki-simulator)
  .denki-simulator__step--usage
  > .denki-simulator__usage-grid {
  grid-area: grid;
}

:where(.denki-simulator)
  .denki-simulator__step--usage
  > .denki-simulator__usage-guide {
  grid-area: guide;
}

:where(.denki-simulator) .denki-simulator__usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5cqi;
}

:where(.denki-simulator) .denki-simulator__usage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: var(--ds-space-3) var(--ds-space-2);
  background: var(--ds-color-bg);
  border: 2px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

:where(.denki-simulator) .denki-simulator__usage-card:hover {
  border-color: var(--ds-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

:where(.denki-simulator) .denki-simulator__usage-card--checked {
  border-color: var(--ds-color-accent);
  background: var(--ds-color-accent-soft);
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.15);
}

/* Tiny checkmark badge inside the active card, top-right */
:where(.denki-simulator) .denki-simulator__usage-card--checked::after {
  content: "✓";
  position: absolute;
  top: 0.6cqi;
  right: 0.6cqi;
  width: 1.8cqi;
  height: 1.8cqi;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-accent);
  color: #fff;
  border-radius: 50%;
  font-size: max(10px, 1.1cqi);
  font-weight: 700;
  line-height: 1;
}

/* Visually hide the native radio button but keep it accessible */
:where(.denki-simulator) .denki-simulator__usage-radio {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

:where(.denki-simulator) .denki-simulator__usage-bulb {
  width: 5cqi;
  height: 5cqi;
  object-fit: contain;
}

:where(.denki-simulator) .denki-simulator__usage-amount {
  display: inline-block;
  font-size: max(18px, 2.5cqi);
  font-weight: 700;
  color: var(--ds-color-text);
  line-height: 1;
}

:where(.denki-simulator) .denki-simulator__usage-amount-unit {
  display: inline-block;
  font-size: max(11px, 1.5cqi);
  font-weight: 600;
   margin-left: 0.2cqi;
}

:where(.denki-simulator) .denki-simulator__usage-desc {
  font-size: max(10px, 1.1cqi);
  color: var(--ds-color-text-sub);
  line-height: 1.3;
}

:where(.denki-simulator) .denki-simulator__usage-guide {
  background: var(--ds-color-bg-guide);
  border: 1px solid #f1e6a8;
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3);
}

:where(.denki-simulator) .denki-simulator__usage-guide-title {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-weight: 700;
  margin: 0 0 var(--ds-space-2);
  color: var(--ds-color-text);
  font-size: max(11px, 1.2cqi);
}

:where(.denki-simulator) .denki-simulator__usage-guide-icon {
  width: 3cqi;
  height: 3cqi;
  object-fit: contain;
  flex-shrink: 0;
}

:where(.denki-simulator) .denki-simulator__usage-guide-list {
  margin: 0;
  font-size: max(12px, 1.6cqi);
  line-height: 1.5;
}

:where(.denki-simulator) .denki-simulator__usage-guide-list-row {
  margin-bottom: var(--ds-space-2);
}

:where(.denki-simulator) .denki-simulator__usage-guide-list-row:last-child {
  margin-bottom: 0;
}

:where(.denki-simulator) .denki-simulator__usage-guide-list-term {
  font-weight: 700;
  font-size: max(12px, 1.5cqi);
  color: var(--ds-color-accent);
}

:where(.denki-simulator) .denki-simulator__usage-guide-list-desc {
  font-size: max(11px, 1.3cqi);
  font-weight: 700;
  color: var(--ds-color-text-sub);
}

/* ---------- CTA submit button ---------- */

:where(.denki-simulator) .denki-simulator__submit-wrap {
  text-align: center;
  margin-top: var(--ds-space-1);
}

:where(.denki-simulator) .denki-simulator__submit {
  display: inline-block;
  max-width: 100%;
  padding: 2.1cqi 9cqi;
  background: var(--ds-color-accent);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: max(16px, 4cqi);
  letter-spacing: 0.2cqi;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--ds-color-accent-hover);
  transition:
    transform 0.05s,
    box-shadow 0.05s,
    background 0.15s;
}

:where(.denki-simulator) .denki-simulator__submit:hover {
  background: var(--ds-color-accent-hover);
}

:where(.denki-simulator) .denki-simulator__submit:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--ds-color-accent-hover);
}

/* ---------- Re-test button (ranking page → back to form) ---------- */

:where(.denki-simulator) .denki-simulator__retest-wrap {
  text-align: center;
  margin-top: var(--ds-space-4);
}

:where(.denki-simulator) .denki-simulator__retest {
  display: inline-block;
  max-width: 100%;
  padding: 2.1cqi 9cqi;
  background: var(--ds-color-bg);
  border: 2px solid var(--ds-color-accent);
  border-radius: 20px;
  color: var(--ds-color-accent);
  font-size: max(15px, 3.6cqi);
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}

:where(.denki-simulator) .denki-simulator__retest:hover {
  background: var(--ds-color-accent);
  color: #fff;
}

/* ---------- Inline error (client-side validation) ---------- */

:where(.denki-simulator) .denki-simulator__error {
  margin-top: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-color-error-bg);
  color: var(--ds-color-error-fg);
  border-radius: var(--ds-radius-md);
  font-size: max(12px, 1.3cqi);
  font-weight: 500;
}

/* ---------- Footer notice block ---------- */

:where(.denki-simulator) .denki-simulator__notice {
  margin-top: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-color-bg-soft);
  border-radius: var(--ds-radius-md);
  font-size: max(12px, 1.3cqi);
  color: var(--ds-color-text-sub);
  line-height: 1.55;
}

:where(.denki-simulator) .denki-simulator__notice-title {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: 0 0 var(--ds-space-2);
  font-weight: 700;
  color: var(--ds-color-text);
}

:where(.denki-simulator) .denki-simulator__notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8cqi; 
  height: 1.8cqi;
  color: var(--ds-color-primary);
  flex-shrink: 0;
}

:where(.denki-simulator) .denki-simulator__notice-icon svg {
  width: 100%;
  height: 100%;
}

:where(.denki-simulator) .denki-simulator__notice-list {
  margin: 0;
  font-size: max(12px, 1.3cqi);
}

:where(.denki-simulator) .denki-simulator__notice-list-item {
  position: relative;
  padding-left: 2cqi;
}

:where(.denki-simulator)
  .denki-simulator__notice-list-item
  + .denki-simulator__notice-list-item {
  margin-top: 0.4cqi;
}

/* =================================================================
   Ranking results section
   ================================================================= */

:where(.denki-simulator) .denki-simulator__results {
  margin-top: var(--ds-space-5);
  padding-top: var(--ds-space-5);
  border-top: 1px solid var(--ds-color-border);
}

/* Ranking-only variant ([denki_ranking] on its own page): the results
   block is the first content inside the container — there is no form
   above it, so the divider that separates "form → results" disappears.
   Higher specificity (0,2,0) than the base rule above (0,1,0) so this
   wins the cascade without !important. */
.denki-simulator--ranking .denki-simulator__results {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

:where(.denki-simulator) .denki-simulator__results-title {
  margin: 0 0 var(--ds-space-3);
  font-size: max(20px, 3.4cqi);
  font-weight: 700;
  color: var(--ds-color-text);
  line-height: 1.35;
}

:where(.denki-simulator) .denki-simulator__results-meta {
  display: inline-block;
  margin-left: 0.4cqi;
  font-size: max(13px, 1.4cqi);
  color: var(--ds-color-text-sub);
  font-weight: 500;
}

/* ---------- Diagnosis criteria block (地域 / 月間使用量) ----------
   Shown directly under the results title on the ranking/result page.
   These classes are ranking-only; the form page ([denki_simulator])
   never renders them, so adding them here does not affect simulator.html. */

:where(.denki-simulator) .denki-simulator__criteria {
  margin-bottom: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-color-bg-soft);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
}

:where(.denki-simulator) .denki-simulator__criteria-title {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--ds-space-2);
  padding: 0.2cqi 1.1cqi;
  background: var(--ds-color-primary);
  color: #fff;
  border-radius: var(--ds-radius-sm);
  font-size: max(12px, 1.3cqi);
  font-weight: 700;
}

:where(.denki-simulator) .denki-simulator__criteria-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) 2.6cqi;
  margin: 0;
}

:where(.denki-simulator) .denki-simulator__criteria-row {
  display: flex;
  align-items: baseline;
  gap: 0.9cqi;
}

:where(.denki-simulator) .denki-simulator__criteria-term {
  position: relative;
  margin: 0;
  padding-left: 1.5cqi;
  font-size: max(12px, 1.3cqi);
  font-weight: 700;
  color: var(--ds-color-text-faint);
  white-space: nowrap;
}

/* small accent dot before each term */
:where(.denki-simulator) .denki-simulator__criteria-term::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-primary);
}

:where(.denki-simulator) .denki-simulator__criteria-value {
  margin: 0;
  font-size: max(14px, 1.5cqi);
  font-weight: 700;
  color: var(--ds-color-text);
}

:where(.denki-simulator) .denki-simulator__results-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9cqi;
  margin-bottom: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-color-bg-soft);
  border-radius: var(--ds-radius-md);
  font-size: max(13px, 1.4cqi);
}

:where(.denki-simulator) .denki-simulator__results-count-num {
  font-size: max(22px, 3.1cqi);
  font-weight: 800;
  color: var(--ds-color-text);
  line-height: 1;
}

/* Unit ("件") next to the count — smaller than the number, same black */
:where(.denki-simulator) .denki-simulator__results-count-unit {
  margin-left: 0.2cqi;
  font-size: max(13px, 1.4cqi);
  font-weight: 700;
  color: var(--ds-color-text);
}

:where(.denki-simulator) .denki-simulator__results-best {
  color: var(--ds-color-text-sub);
  /* Thin light-gray divider on the left edge, sitting next to the
     "best saving" figure to separate it from the plan count. */
  padding-left: var(--ds-space-4);
  border-left: 1px solid var(--ds-color-border);
}

:where(.denki-simulator) .denki-simulator__results-best-amount {
  font-size: max(18px, 2.5cqi);
  font-weight: 700;
  color: var(--ds-color-accent);
  margin: 0 0.2cqi;
}

/* ---------- Card list ----------
   Card layout: 4-column grid tuned for narrow #main-contents widths.
   Columns are rank / logo / body / actions; all rows are baseline-
   aligned at the top so multi-line bodies don't push siblings down. */

:where(.denki-simulator) .denki-simulator__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

:where(.denki-simulator) .denki-simulator__card {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(0, 7fr) 3fr;
  align-items: center;
  gap: var(--ds-space-3) 1.3cqi;
  padding: var(--ds-space-3) var(--ds-space-3);
  background: var(--ds-color-bg);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  transition: box-shadow 0.15s;
}

:where(.denki-simulator) .denki-simulator__card:hover {
  box-shadow: var(--ds-shadow-md);
}

:where(.denki-simulator) .denki-simulator__card--top {
  position: relative;
  background: var(--ds-color-rank-top-bg);
  border-color: var(--ds-color-accent);
  border-width: 2px;
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.18);
}

/* Rank badge (left column) */
:where(.denki-simulator) .denki-simulator__rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-text-faint);
  line-height: 1;
}

:where(.denki-simulator) .denki-simulator__rank-num {
  font-size: max(28px, 3.9cqi);
  font-weight: 800;
  color: var(--ds-color-text);
}

:where(.denki-simulator) .denki-simulator__rank-suffix {
  font-size: max(11px, 1.2cqi);
  margin-top: 0.2cqi;
  color: var(--ds-color-text-sub);
}

:where(.denki-simulator)
  .denki-simulator__card--top
  .denki-simulator__rank-num {
  color: var(--ds-color-accent);
}

/* Rank medal image (top 3 cards). The crown-topped badge already
   carries the "1位/2位/3位" label, so it replaces the text rank-num
   in cards 1–3. Lower ranks keep the plain text badge above. The
   90×140 source fills the 40px rank column (≈62px tall). */
:where(.denki-simulator) .denki-simulator__rank-medal {
  display: block;
  width: 100%;
  max-width: 40px;
  height: auto;
}

/* Logo column */
:where(.denki-simulator) .denki-simulator__card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.denki-simulator) .denki-simulator__card-logo .denki-simulator__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 84px;
  max-height: 52px;
  margin: 0;
  object-fit: contain;
}

:where(.denki-simulator) .denki-simulator__logo-placeholder {
  width: 100%;
  max-width: 84px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-bg-soft);
  border: 1px dashed var(--ds-color-border-strong);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-text-faint);
  font-size: max(11px, 1.2cqi);
  font-weight: 600;
  letter-spacing: 1px;
}

/* Card body column — split into a left main block (company / plan /
   meta) and a right saving block, sitting side by side. */
:where(.denki-simulator) .denki-simulator__card-body {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.8cqi;
  /* Light-gray vertical rules on both edges, separating the body from
     the logo column (left) and the actions column (right). */
  border-left: 1px solid var(--ds-color-border);
  border-right: 1px solid var(--ds-color-border);
  padding: 0 1.8cqi;
}

/* Left column: company name, plan name, meta rows stacked */
:where(.denki-simulator) .denki-simulator__card-main {
  flex: 1 1 auto;
  min-width: 0;
}

:where(.denki-simulator) .denki-simulator__company {
  font-size: max(15px, 1.6cqi);
  font-weight: 700;
  margin-bottom: 0.1cqi;
  line-height: 1.35;
}

:where(.denki-simulator) .denki-simulator__plan {
  font-size: max(12px, 1.3cqi);
  color: var(--ds-color-text-sub);
  margin-bottom: 0.7cqi;
  line-height: 1.4;
}

/* Right column: saving block — label on top, amount below (vertical). */
:where(.denki-simulator) .denki-simulator__saving {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  font-size: max(12px, 1.3cqi);
  color: var(--ds-color-text-sub);
}

:where(.denki-simulator) .denki-simulator__saving-label {
  font-size: max(12px, 1.3cqi);
  color: var(--ds-color-text-sub);
  line-height: 1.2;
  white-space: nowrap;
}

:where(.denki-simulator) .denki-simulator__saving-amount {
  font-size: max(22px, 3.1cqi);
  font-weight: 800;
  color: var(--ds-color-accent);
  line-height: 1;
  white-space: nowrap;
}

:where(.denki-simulator) .denki-simulator__saving-amount-unit {
  font-size: max(12px, 1.3cqi);
  font-weight: 600;
  margin-left: 0.2cqi;
}

:where(.denki-simulator) .denki-simulator__meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: max(12px, 1.3cqi);
  line-height: 1.4;
}

:where(.denki-simulator) .denki-simulator__meta-row {
  display: flex;
  gap: 0.9cqi;
}

:where(.denki-simulator) .denki-simulator__meta-term {
  color: var(--ds-color-text-faint);
  white-space: nowrap;
  min-width: 68px;
}

:where(.denki-simulator) .denki-simulator__meta-value {
  color: var(--ds-color-text);
  word-break: break-word;
}

/* Actions column — buttons stack vertically and fill the column */
:where(.denki-simulator) .denki-simulator__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

:where(.denki-simulator) .denki-simulator__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 1.3cqi;
  border-radius: var(--ds-radius-md);
  font-size: max(12px, 1.3cqi);
  font-weight: 700;
  text-decoration: none;
  transition:
    opacity 0.15s,
    transform 0.05s,
    background 0.15s;
  white-space: nowrap;
}

:where(.denki-simulator) .denki-simulator__btn:hover {
  opacity: 0.9;
}

:where(.denki-simulator) .denki-simulator__btn:active {
  transform: translateY(1px);
}

/* Chain both classes (.__btn.__btn--detail) so this rule's specificity is
   (0,2,0), one class higher than the base .__btn (0,1,0). That lets the
   font-size below win the cascade without relying on source order or
   !important. The element always carries both classes in the markup. */
:where(.denki-simulator) .denki-simulator__btn.denki-simulator__btn--detail {
  position: relative;
  background: var(--ds-color-bg);
  border: 1px solid var(--ds-color-border-strong);
  color: var(--ds-color-text);
  white-space: normal;
  line-height: 1.3;
  text-align: center;
  font-size: max(12px, 1.5cqi);
  /* extra right padding reserves room for the absolutely-positioned chevron
     so the centered label never runs underneath it */
  padding-right: 3cqi;
}

/* Chain both classes (.__btn.__btn--apply) → specificity (0,2,0), matching
   the --detail rule above so the font-size wins over the base .__btn (0,1,0)
   without !important. */
:where(.denki-simulator) .denki-simulator__btn.denki-simulator__btn--apply {
  position: relative;
  background: var(--ds-color-accent);
  color: #fff;
  border: 1px solid var(--ds-color-accent);
  font-size: max(12px, 1.5cqi);
  /* extra right padding reserves room for the absolutely-positioned chevron */
  padding-right: 3cqi;
}

:where(.denki-simulator) .denki-simulator__btn--apply:hover {
  background: var(--ds-color-accent-hover);
  border-color: var(--ds-color-accent-hover);
}

/* Trailing chevron pinned to the right edge of both action buttons (per
   design). Added via ::after and absolutely positioned so it sits flush
   against the right edge WITHOUT pushing the label off-center — the label
   stays centered via the button's justify-content:center / text-align:center,
   and the chevron overlays the reserved right padding. */
:where(.denki-simulator) .denki-simulator__btn--detail::after,
:where(.denki-simulator) .denki-simulator__btn--apply::after {
  content: "❯";
  position: absolute;
  right: 1.3cqi;
  top: 50%;
  transform: translateY(-50%);
}

/* =================================================================
   Narrow container (<= 670px)
   No dedicated mobile mockup exists; the goal here is purely to keep
   both pages from breaking when the container gets narrow:
   side-by-side blocks stack vertically, multi-column grids collapse,
   and a few cqi-based paddings fall back to fixed px so they don't
   shrink to nothing. Font sizes already have px floors via max(),
   so they're left alone.
   Keyed off the .denki-simulator-wrap inline-size container (not the
   viewport), so the layout reflows based on the actual space the
   simulator occupies rather than the device width.
   ================================================================= */
@container (max-width: 670px) {

  /* ---- Shared: tighter outer chrome to reclaim horizontal space ---- */
  .denki-simulator-wrap {
    padding: 12px 8px;
    border-width: 4px;
  }

  :where(.denki-simulator) {
    padding: var(--ds-space-3);
  }

  /* ---- simulator.html: header stacks (brand below the title) ---- */
  :where(.denki-simulator) .denki-simulator__header {
    flex-direction: column;
    gap: var(--ds-space-1);
  }

  :where(.denki-simulator) .denki-simulator__brand-wrap {
    position: static;
  }

  :where(.denki-simulator) .denki-simulator__brand-wrap .denki-simulator__brand {
    height: 22px;
  }

  /* ---- simulator.html: flow indicator becomes a vertical list ----
     The right-pointing arrow PNGs are rotated 90deg to point down. */
  :where(.denki-simulator) .denki-simulator__flow {
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 12px;
  }

  :where(.denki-simulator) .denki-simulator__flow-arrow img {
    transform: rotate(90deg);
  }

  :where(.denki-simulator) .denki-simulator__flow-label {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  /* ---- simulator.html: STEP1 / STEP2 stack vertically ----
     The base 35% / 60% widths use a (0,3,0) selector, so the override
     must repeat the same selector to win the cascade. */
  :where(.denki-simulator) .denki-simulator__steps {
    flex-direction: column;
  }

  :where(.denki-simulator)
    .denki-simulator__steps
    > .denki-simulator__step:nth-child(1),
  :where(.denki-simulator)
    .denki-simulator__steps
    > .denki-simulator__step:nth-child(2) {
    width: 100%;
  }

  /* STEP2's inner grid (cards + guide sidebar) collapses to one column.
     Two-class selector to match the (0,2,0) base rule. The child
     grid-area names (legend / grid / guide) are reused, so the guide
     simply drops below the usage cards. */
  :where(.denki-simulator) .denki-simulator__step.denki-simulator__step--usage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "legend"
      "grid"
      "guide";
  }

  /* Keep the three usage cards in a row but give the bulb a fixed size
     so it doesn't collapse with the now-tiny cqi. */
  :where(.denki-simulator) .denki-simulator__usage-bulb {
    width: 28px;
    height: 28px;
  }

  /* ---- simulator.html: full-width submit for a comfortable tap target ---- */
  :where(.denki-simulator) .denki-simulator__submit {
    display: block;
    width: 100%;
    padding: 12px 16px;
  }

  /* ---- ranking.html: stats strip stacks; drop the dangling divider ---- */
  :where(.denki-simulator) .denki-simulator__results-stats {
    flex-direction: column;
    align-items: flex-start;
  }

  :where(.denki-simulator) .denki-simulator__results-best {
    padding-left: 0;
    border-left: none;
  }

  /* ---- ranking.html: card reflows to a stacked layout ----
     Row 1: rank + logo. Row 2: body (info + saving). Row 3: actions. */
  :where(.denki-simulator) .denki-simulator__card {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "rank logo"
      "body body"
      "actions actions";
    column-gap: var(--ds-space-3);
    row-gap: var(--ds-space-2);
    align-items: center;
  }

  :where(.denki-simulator) .denki-simulator__rank {
    grid-area: rank;
  }

  :where(.denki-simulator) .denki-simulator__card-logo {
    grid-area: logo;
    justify-self: start;
  }

  /* Body spans the full width; the left/right separator rules only make
     sense in the desktop 4-column layout, so swap them for a top divider. */
  :where(.denki-simulator) .denki-simulator__card-body {
    grid-area: body;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--ds-color-border);
    padding: var(--ds-space-2) 0 0;
  }

  /* Actions go side by side, each button taking half the width. */
  :where(.denki-simulator) .denki-simulator__actions {
    grid-area: actions;
    flex-direction: row;
  }

  :where(.denki-simulator) .denki-simulator__actions .denki-simulator__btn {
    flex: 1 1 0;
  }
}

/* ---------- Area links ([denki_area_links]) ---------- */

/* No outer green frame — this block is meant for the TOP page / articles,
   not the simulator itself. Same rationale as the ranking wrap. */
.denki-simulator-wrap--areas {
  border: 0;
  padding: 15px 0;
}

:where(.denki-simulator) .denki-simulator__area-title {
  font-size: max(17px, 4.2cqi);
  font-weight: 700;
  color: var(--ds-color-text);
  margin-bottom: var(--ds-space-4);
  text-align: center;
}

:where(.denki-simulator) .denki-simulator__area-links {
  /* --denki-area-cols is set inline when the shortcode's `columns` attr > 0;
     otherwise fall back to responsive auto-fill. */
  display: grid;
  grid-template-columns: repeat(var(--denki-area-cols, auto-fill), minmax(96px, 1fr));
  gap: var(--ds-space-2);
}

:where(.denki-simulator) .denki-simulator__area-link {
  display: block;
  padding: 2cqi 3cqi;
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ds-color-bg-soft);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-text);
  font-size: max(14px, 3.4cqi);
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

:where(.denki-simulator) .denki-simulator__area-link:hover {
  background: var(--ds-color-primary);
  border-color: var(--ds-color-primary);
  color: #fff;
}