/* Container */
.sellscore-wrap{border: 1px solid #e5e7eb; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03)}
/* Title & subtitle */
.sellscore-title{font-size: clamp(20px,5.2vw,28px); line-height: 1.2; font-weight: 700; border: none; background: transparent; padding: 0; text-decoration: none; box-shadow: none; color: #111827; word-break: keep-all}
.sellscore-title.is-center{text-align: center}.sellscore-title.is-left{text-align: left}
.sellscore-subtitle{margin: 0 0 16px; color: #4b5563}.sellscore-subtitle.is-center{text-align: center}.sellscore-subtitle.is-left{text-align: left}
.sellscore-subtitle .l2{display: block}@media(min-width: 721px){.sellscore-subtitle .l1,.sellscore-subtitle .l2{display: inline}.sellscore-subtitle .l2:before{content: " "}}
/* Badges */
.sellscore-badges{display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center}
.sellscore-badges .badge{border: 1px solid rgba(0,0,0,.06); border-radius: 9999px; padding: 4px 10px; font-size: 12px}
/* Form */
.sellscore-form{margin-top: 8px}
.sellscore-form .row{margin-bottom: 12px}.sellscore-form .row.two{display: grid; grid-template-columns: 1fr 1fr; gap: 16px}@media(max-width: 720px){.sellscore-form .row.two{grid-template-columns: 1fr}}
.sellscore-form label{display: block; font-size: 12px; color: #4b5563; margin-bottom: 4px}.sellscore-form label .req{background: #fee2e2; color: #991b1b; border-radius: 9999px; padding: 2px 6px; margin-left: 6px; font-size: 11px}.sellscore-form label .opt{background: #e5e7eb; color: #374151; border-radius: 9999px; padding: 2px 6px; margin-left: 6px; font-size: 11px}
.sellscore-form input,.sellscore-form select{width: 100%; padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff}
.sellscore-form input: focus, .sellscore-form select: focus{border-color: var(--ss-primary,#2563EB); box-shadow: 0 0 0 2px rgba(37,99,235,.15); outline: 0}
/* Actions */
.sellscore-form .actions{display: flex; justify-content: center; gap: 10px; margin-top: 8px}
.ss-btn{appearance: none; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 16px; background: #f9fafb; color: #111827; cursor: pointer; min-height: 42px; font-size: var(--ss-btn-font-size,14px); line-height: 1}
.ss-btn.ss-primary{background: var(--ss-primary,#1E3A8A); color: var(--ss-primary-text,#fff); border-color: var(--ss-primary,#1E3A8A)}
.ss-btn: focus{outline: none}.ss-btn: focus-visible{outline: 2px solid var(--ss-primary,#2563EB); outline-offset: 2px}
/* Result container */
.sellscore-resultbox{display: none; background: #F5F7FA; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; margin-top: 16px}
@media(max-width: 720px){.sellscore-resultbox{margin-left: -24px; margin-right: -24px; border-radius: 0}}
.sellscore-result{margin-top: 0; text-align: center}
.result-head{font-weight: 700; font-size: clamp(18px,4.8vw,22px); white-space: nowrap; word-break: keep-all; overflow: hidden; margin: 0; padding: 0 0 25px; text-align: center}
.big-score{font-size: 40px; line-height: 1.1; margin: 0}.big-score .denom{font-size: 16px; margin-left: 6px; color: #6b7280}
.score-label{margin-top: 6px; text-align: center; font-weight: 600}
.band-msg{margin: 8px 0 0; color: #374151; font-size: var(--ss-result-text-size,15px); text-align: left}
.band-msg.is-center{text-align: center}.band-msg .i{margin-right: 6px}
.disclaimer-inline{font-size: 12px; color: #6b7280; margin: 8px 0 0}
/* bar width: mobile 95%, desktop var */
.bar{height: 10px; background: #fff; border-radius: 9999px; overflow: hidden; margin-top: 8px; width: 95%; margin-left: auto; margin-right: auto;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}
@media(min-width: 1024px){ .bar{ width: var(--ss-bar-pc, 60%)} }
.bar span{display: block; height: 10px; background: linear-gradient(90deg,#ef4444,#22c55e,#3b82f6)}
/* Post result */
.sellscore-postresult{display: none; margin-top: 20px; text-align: center}
.sellscore-postresult .cta-lead{font-size: var(--ss-result-text-size,15px)}
.sellscore-cta{display: flex; gap: 12px; justify-content: center; align-items: stretch; flex-wrap: nowrap; width: 100%; max-width: 520px; margin: 12px auto 0}
.sellscore-cta .button{flex: 1 1 0; width: 50%; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; font-size: clamp(12px,3.6vw,14px); padding: 10px 12px; border-radius: 12px; min-height: 42px; line-height: 1}
/* 条件を見る：上下20pxで完全対称 */
.cond-toggle{cursor: pointer; user-select: none; display: inline-block; margin: 20px 0; color: #374151; font-size: var(--ss-result-text-size,15px)}
.cond-chips{display: none; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start}
.chip{background: #fff; border: 1px solid #e5e7eb; color: #374151; border-radius: 9999px; padding: 6px 10px; font-size: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.02)}
.chip .k{color: #6b7280; margin-right: 4px}.chip .v{font-weight: 700; color: #111827}.chip .v.missing{opacity: .6; font-weight: 400}
/* Modal */
.sellscore-modal{position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 99999}
.sellscore-modal .box{background: #fff; border-radius: 12px; max-width: 420px; width: 90%; padding: 16px; border: 1px solid #e5e7eb; box-shadow: 0 10px 30px rgba(0,0,0,.15)}
.sellscore-modal .box h3{margin: 0 0 8px 0; font-size: 18px}.sellscore-modal .box p{margin: 0 0 8px 0}.sellscore-modal .box .ok{margin-top: 8px}
/* Colors via CSS variables (set from PHP inline style) */
.sellscore-wrap{--ss-primary: #1E3A8A; --ss-primary-text: #ffffff; --ss-result-text-size: 15px; --ss-btn-font-size: 14px; --ss-badge1-bg: #E0F2FE; --ss-badge1-text: #0369A1; --ss-badge2-bg: #DCFCE7; --ss-badge2-text: #166534; --ss-badge3-bg: #F3E8FF; --ss-badge3-text: #6B21A8}

.sellscore-result-heading { margin-bottom: 25px}

/* Force heading spacing */
.sellscore-title{}

/* Force uniform margin for 条件を見る */
.cond-toggle,
.cond-chips {
  margin-top: 20px; margin-bottom: 20px}

.cond-toggle,
.cond-chips {
  margin-top: 20px; margin-bottom: 20px}

/* ===== Spacing normalization around condition toggle ===== */
.sellscore-wrap .disclaimer-inline { margin-top: 0; margin-bottom: 0}
.sellscore-wrap .cond-toggle { margin-top: 20px; margin-bottom: 20px; padding-top: 0; padding-bottom: 0}
.sellscore-wrap .cond-chips { margin-top: 20px; margin-bottom: 20px}

/* === Condition toggle unified spacing (20/20) === */
.sellscore-wrap .cond-toggle{margin-top: 20px; margin-bottom: 20px; padding-top: 0; padding-bottom: 0}
.sellscore-wrap .cond-chips{margin-top: 20px; margin-bottom: 20px}
.sellscore-wrap .disclaimer-inline{margin-top: 0; margin-bottom: 0}

/* 1) Badges & title top spacing */
.sellscore-badges{ margin-top: 15px}
/* 2) Title & subtitle spacing */
.sellscore-title{ }
.sellscore-subtitle{ margin-bottom: 15px}
/* 3) Buttons (calc & reset) container spacing: top=20, bottom=20 */
.sellscore-cta{ margin: 20px auto 20px}
/* 4) Result heading spacing symmetric */
.sellscore-result-heading{ margin-top: 20px; margin-bottom: 20px}
/* 5) "条件を見る" spacing */
.sellscore-wrap .cond-toggle{ margin-top: 20px; margin-bottom: 20px}
.sellscore-wrap .cond-chips{ margin-top: 20px; margin-bottom: 20px}

/* Badges + Title top */
.sellscore-badges{ margin-top: 15px}
/* Title + Subtitle */
.sellscore-title{ }
.sellscore-subtitle{ margin-bottom: 15px}
/* Buttons row (calc + reset) */
.sellscore-cta{ margin: 20px auto 20px}
/* Result container gap below buttons */
.sellscore-resultbox{ margin-top: 20px}
/* Result heading ("売却予想スコア診断結果") spacing under the heading to '70/100' */
.result-head{ padding-bottom: 25px}
/* Condition toggle section */
.sellscore-wrap .cond-toggle{ margin-top:15px; margin-bottom:15px}
.sellscore-wrap .cond-chips{ margin-top:15px; margin-bottom:15px}

/* A) Badge ↔ Title = 15px */
.sellscore-badges{ margin-bottom: 15px}
/* B) Title ↔ Subtitle = 15px */
.sellscore-title{ }
.sellscore-subtitle{ margin-top: 0}
/* C) Buttons ↔ Result box = 20px (exact) */
.sellscore-cta{ margin-bottom: 0}
.sellscore-resultbox{ margin-top: 20px}

/* ===== Authoritative spacing rules (2025-08-20D) ===== */
/* A) Badge ↔ Title = 15px */
.sellscore-badges{ margin-bottom: 15px}

/* B) Title ↔ Subtitle = 15px */
.sellscore-title{ }
.sellscore-subtitle{ margin-top: 0; margin-bottom: 15px}

/* C) Buttons ↔ Result box = 20px */
.sellscore-cta{ margin-bottom: 0}
.sellscore-wrap .sellscore-resultbox{ margin-top: 20px}

/* D) Result heading (診断結果) ↔ 70/100 = 25px */
.sellscore-wrap .result-head{ padding-bottom: 25px}

/* E) 条件を見る（上下15px） */
.sellscore-wrap .cond-toggle{ margin-top:15px; margin-bottom:15px}
.sellscore-wrap .cond-chips{ margin-top:15px; margin-bottom:15px}

/* ===== Authoritative spacing rules (stable) ===== */
/* バッジ上の余白 20px、バッジ→タイトル間 15px */
.sellscore-badges{ margin-top: 20px; margin-bottom: 15px}
/* タイトル上下 15px */
.sellscore-title{ }
/* サブタイトル上は0、下15px */
.sellscore-subtitle{ margin-top: 0; margin-bottom: 15px}
/* ボタン行→結果枠の間 20px（CTAの下余白0 + 結果枠の上20） */
.sellscore-cta{ margin-bottom: 0}
.sellscore-wrap .sellscore-resultbox{ margin-top: 20px}
/* 診断結果見出し→スコアの間 25px */
.sellscore-wrap .result-head{ padding-bottom: 25px}
/* 「条件を見る」とチップの上下 15px */
.sellscore-wrap .cond-toggle{ margin-top:15px; margin-bottom:15px}
.sellscore-wrap .cond-chips{ margin-top:15px; margin-bottom:15px}

/* ===== FINAL LOCK: spacing (v0.9.29.15) ===== */
/* Container top padding must be 0 so badge top spacing is exact */
.sellscore-wrap{ padding-top: 0}
/* A) Badge (top=20) and badge->title (bottom=15) */
.sellscore-lite .sellscore-badges{ margin-top: 20px; margin-bottom: 15px}
/* B) Title top/bottom = 15 */
.sellscore-lite .sellscore-title{ }
/* C) Subtitle top=0 bottom=15 (title->subtitle=15) */
.sellscore-lite .sellscore-subtitle{ margin-top: 0; margin-bottom: 15px}
/* D) Button row -> result box = 20 (cta bottom 0 + result box top 20) */
.sellscore-wrap .sellscore-cta{ margin-bottom: 0}
.sellscore-wrap .sellscore-resultbox{ margin-top: 20px}
/* E) Result heading -> score(70/100) = 25 */
.sellscore-wrap .result-head{ padding-bottom: 25px}
/* F) "条件を見る"上下=15 */
.sellscore-wrap .cond-toggle{ margin-top:15px; margin-bottom:15px}
.sellscore-wrap .cond-chips{ margin-top:15px; margin-bottom:15px}

/* ===== FINAL LOCK (v0.9.29.20) ===== */
.sellscore-wrap{ padding-top: 0}
.sellscore-wrap .sellscore-badges{ margin-top: 20px; margin-bottom: 15px}
.sellscore-wrap .sellscore-title{ }
.sellscore-wrap .sellscore-subtitle{ margin-top: 0}
.sellscore-wrap .sellscore-result-heading{ margin-top: 20px; margin-bottom: 20px}
.sellscore-wrap .result-head{ padding-bottom: 25px}
.sellscore-wrap .sellscore-cta, .sellscore-wrap .sellscore-form .actions{ margin-bottom: 0}
.sellscore-wrap .sellscore-resultbox{ margin-top: 20px}
.sellscore-wrap .cond-toggle{ margin-top: 20px; margin-bottom: 20px}
.sellscore-wrap .cond-chips{  margin-top: 20px; margin-bottom: 20px}
.sellscore-wrap .button, .sellscore-wrap .button-primary{ min-height: 42px; padding: 10px 14px; line-height: 1}

/* ===== FINAL LOCK (0.9.29.22) ===== */
/* Guard against stray top spacing */
.sellscore-wrap .sellscore-header{ margin-top: 0; padding-top: 0}
/* Title: 15/15 */
.sellscore-wrap .sellscore-title{ }
/* Result heading: 20/20 */
.sellscore-wrap .sellscore-result-heading{ margin-top: 20px; margin-bottom: 20px}
/* Title ↔ 70/100: 25 via padding on .result-head (keep if applicable) */
.sellscore-wrap .result-head{ padding-bottom: 25px}
/* CTA (表示/リセット) → result box gap = 20 */
.sellscore-wrap .sellscore-cta, .sellscore-wrap .sellscore-form .actions{ margin-bottom: 0}
.sellscore-wrap .sellscore-resultbox{ margin-top: 20px}
/* 条件を見る: 上下 15 */
.sellscore-wrap .cond-toggle{ margin-top:15px; margin-bottom:15px}
.sellscore-wrap .cond-chips{  margin-top:15px; margin-bottom:15px}
/* LINE/WEB buttons spacing: top 20 / bottom 20 */
.sellscore-wrap .button, .sellscore-wrap .button-primary,
.sellscore-wrap .line-cta, .sellscore-wrap .btn-line, .sellscore-wrap .line-button,
.sellscore-wrap a[href*="line.me"], .sellscore-wrap a[href*="lin.ee"], .sellscore-wrap a[href*="line: //"]
{ margin-top: 20px; margin-bottom: 20px}
/* Optional: avoid overly tall buttons */
.sellscore-wrap .button, .sellscore-wrap .button-primary{ min-height: 42px; padding: 10px 14px; line-height: 1}

/* Title spacing fixed (overrides theme h2 rules without !important) */
.sellscore-wrap h2.sellscore-title { margin-top: 15px; margin-bottom: 15px; }


/* ===============================================
 * Scoped: Bottom CTA (LINE査定 / WEB査定フォーム) top gap -9px
 * =============================================== */
.sellscore-postresult .sellscore-cta{ margin-top: calc(20px - 28px) !important; } /* PC: 11px */
@media (max-width: 720px){
  .sellscore-postresult .sellscore-cta{ margin-top: calc(12px - 9px) !important; } /* SP: 3px */
}


/* ===============================================
 * Lead-under gap: reduce by an additional 9px
 * Effective by reducing the next block's top margin (margin-collapsing).
 * Desktop: 20 - 23 = -3px; Mobile: 12 - 23 = -11px
 * =============================================== */
.sellscore-postresult .sellscore-cta{ margin-top: calc(20px - 28px) !important; }
@media (max-width: 720px){ .sellscore-postresult .sellscore-cta{ margin-top: calc(12px - 28px) !important; } }

/* ===============================================
 * Restore vertical gap between wrapped condition chips (row 2+)
 * =============================================== */
.sellscore-wrap .cond-chips{ row-gap: 6px !important; }
.sellscore-wrap .cond-chips .chip,
.sellscore-wrap .cond-chips .badge,
.sellscore-wrap .cond-chips [class*="chip"],
.sellscore-wrap .cond-chips [class*="badge"]{ margin-bottom: 6px !important; }


/* Highlight result container briefly after calculation */
50%{ outline-color:#3b82f6; }
  100%{ outline-color:#93c5fd; }
}


/* Keep result below fixed header when using scrollIntoView */
.sellscore-postresult{ scroll-margin-top: var(--sellscore-header-offset, 80px); }