/* 全体 */
.zone-diagnosis{
max-width: 720px;
margin: 0 auto;
padding: 8px 12px;
}

.zone-section{
margin: 18px 0 26px;
}

.zone-section-title{
font-weight: 700;
margin: 0 0 10px;
}

/* 質問 */
.zone-question{
margin: 14px 0 18px;
padding: 12px 12px 10px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 10px;
background: rgba(0,0,0,.02);
}

.zone-qtext{
margin: 0 0 10px;
line-height: 1.6;
}

/* スライダー */
.zone-slider-wrap{
width: 100%;
}

.zone-slider{
width: 100%;
max-width: 100%;
margin: 8px 0 8px;
height: 22px;
}

/* ラベル（5段階表示） */
.zone-scale{
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 12px;
line-height: 1.2;
opacity: .85;
}

.zone-scale span{
flex: 1;
text-align: center;
white-space: nowrap;
}

@media (max-width: 520px){
.zone-diagnosis{
max-width: 92vw;
}
.zone-scale{
font-size: 11px;
}
.zone-scale span{
white-space: normal;
}
}

/* ボタン */
.zone-actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 18px 0 10px;
}

.zone-btn{
appearance: none;
border: 1px solid rgba(0,0,0,.18);
background: rgba(0,0,0,.03);
color: #111; /* ← 赤くならない */
padding: 10px 14px;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
}

.zone-btn:disabled{
opacity: .5;
cursor: not-allowed;
}

/* 結果 */
.zone-result{
margin-top: 18px;
padding: 14px 12px 12px;
border: 1px solid rgba(0,0,0,.10);
border-radius: 12px;
background: rgba(0,0,0,.02);
}

.zone-result.is-hidden{
display: none;
}

.zone-result-top{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}

.zone-result-title{
margin: 0;
font-weight: 800;
}

.zone-result-scores{
font-size: 14px;
opacity: .9;
}

/* マップ（文字なしで点だけ） */
.zone-map{
margin-top: 12px;
width: 100%;
max-width: 420px;
}

.zone-map svg{
width: 100%;
height: auto;
display: block;
}

.zone-map .frame{
fill: transparent;
stroke: rgba(0,0,0,.18);
stroke-width: 1.2;
}

.zone-map .grid{
stroke: rgba(0,0,0,.10);
stroke-width: 1;
}

.zone-map .axis{
stroke: rgba(0,0,0,.22);
stroke-width: 1.4;
}

.zone-map .pointGlow{
fill: rgba(120, 110, 255, .18);
}

.zone-map .point{
fill: rgba(120, 110, 255, .9);
}

/* 境界コメント */
.zone-boundaryComment{
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(120, 110, 255, .08);
color: #111;
line-height: 1.6;
font-size: 14px;
}

.zone-boundaryComment.is-hidden{
display: none;
}

/* ================================
 Slider: 進捗色なし + 触ったらツマミだけ紫（完成版）
================================ */

.zone-diagnosis input.zone-slider{
 accent-color: #777; /* 保険（効く環境だけ） */
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 height: 22px;
 background: transparent;
 margin: 8px 0;
}

/* Track（Chrome/Edge/Safari） */
.zone-diagnosis input.zone-slider::-webkit-slider-runnable-track{
 height: 8px;
 border-radius: 999px;
 background: rgba(0,0,0,.18); /* 常に同じグレー */
}

/* Thumb（Chrome/Edge/Safari）触る前 */
.zone-diagnosis input.zone-slider::-webkit-slider-thumb{
 -webkit-appearance: none;
 appearance: none;
 width: 18px;
 height: 18px;
 border-radius: 999px;
 background: #9a9aa3; /* 触る前はグレー */
 border: 2px solid #fff;
 box-shadow: 0 1px 2px rgba(0,0,0,.18);
 margin-top: -5px; /* track(8px)中央合わせ */
}

/* Thumb（Chrome/Edge/Safari）触った後 */
.zone-diagnosis input.zone-slider.is-answered::-webkit-slider-thumb{
 background: #8a73ff !important; /* 薄い紫 */
}

/* Track（Firefox） */
.zone-diagnosis input.zone-slider::-moz-range-track{
 height: 8px;
 border-radius: 999px;
 background: rgba(0,0,0,.18);
}

/* Firefoxの進捗も同色固定（緑を殺す） */
.zone-diagnosis input.zone-slider::-moz-range-progress{
 height: 8px;
 border-radius: 999px;
 background: rgba(0,0,0,.18);
}

/* Thumb（Firefox）触る前 */
.zone-diagnosis input.zone-slider::-moz-range-thumb{
 width: 18px;
 height: 18px;
 border-radius: 999px;
 background: #9a9aa3;
 border: 2px solid #fff;
 box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* Thumb（Firefox）触った後 */
.zone-diagnosis input.zone-slider.is-answered::-moz-range-thumb{
 background: #8a73ff !important;
}

/* focusの青枠を控えめに */
.zone-diagnosis input.zone-slider:focus{
 outline: none;
}
.zone-diagnosis input.zone-slider:focus::-webkit-slider-thumb{
 box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}
.zone-diagnosis input.zone-slider:focus::-moz-range-thumb{
 box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}