/* 32-guide_v7.css
   A(正規化スコア)を面積に使う + 全体平均で密度(スケール)を変える
   既存: 10-theme-light.css / 20-base.css / 31-quadrant.css を前提
*/

:root{
  --map-gap: 8px;
  --map-min-h: 420px;
  --ink: rgba(12,18,32,.88);
  --line2: rgba(0,6,71,.10);
  --soft: rgba(255,255,255,.6);
}

/* --- Question UI --- */
.qList{ display:grid; gap:12px; }

.qItem{
  padding: 16px;
  border: 1px solid var(--line2);
  background: var(--soft);
  border-radius: 16px;
}

.qHead{ display:flex; gap:10px; align-items:flex-start; }
.qNum{
  width:28px; height:28px;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,6,71,.18);
  background:#fff;
  font-weight:900;
  color: rgba(15,23,42,.86);
  flex:0 0 auto;
}
.qText{ margin:0; font-weight:800; letter-spacing:-.01em; color: var(--ink); }

.scale{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
}

.opt{
  position: relative;
  border:1px solid rgba(0,6,71,.16);
  background:#fff;
  border-radius:14px;
  padding:10px 8px;
  text-align:center;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease, outline-color .15s ease;
  user-select:none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.opt:hover{ background: rgba(0,6,71,.03); border-color: rgba(0,6,71,.26); }

.opt input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.opt strong{
  display:block;
  font-size:14px;
  font-weight:900;
  margin-bottom:6px;
  color: rgba(15,23,42,.92);
}
.opt span{
  display:block;
  font-size:12px;
  font-weight:750;
  color: rgba(15,23,42,.72);
  line-height:1.25;
}

.opt[data-checked="true"]{
  background: linear-gradient(135deg, rgba(0,6,71,.08), rgba(0,91,150,.06));
  border-color: rgba(0,91,150,.35);
  box-shadow: 0 14px 22px rgba(0,91,150,.12);
  outline-color: rgba(0,91,150,.28);
  transform: translateY(-1px);
}

.errBox{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid rgba(220, 38, 38, .25);
  background: rgba(220, 38, 38, .06);
  color: rgba(127, 29, 29, .92);
  font-weight:800;
}

.guideActions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }

/* --- Map --- */
.mapFrame{
  border: 1px solid rgba(0,6,71,.16);
  background: rgba(0,6,71,.015);
  padding: var(--map-gap);
  min-height: var(--map-min-h);
  position: relative;
  overflow: hidden;
}

/* mapStage: full-size canvas. When mapInner scales down, remaining area becomes visible as darker gray. */

.mapInner{
  position: relative;
  width: 100%;
  height: calc(var(--map-min-h) - (var(--map-gap) * 2));
}

/* Quadrants (cell + inner) */
.quad{
  position:absolute;
  padding: 0;                 /* inner側でpaddingを持つ */
  border-radius: 0;
  overflow: hidden;
  background: rgba(15,23,42,.08);        /* base (stageに近い灰) */
  border: 1px solid rgba(0,6,71,.14);
  transition: background .22s ease, border-color .22s ease;
  min-height: 140px;
}

.quadInner{
  height: 100%;
  box-sizing: border-box;
  padding: 14px 14px 12px;   /* ← 四象限内部の余白 */
  background: #fff;
}

/* tierは「中身（inner）」の薄い色味で表現（ラベルは出さない） */
.quad[data-tier="high"]{ border-color: rgba(0,91,150,.22); }
.quad[data-tier="mid"] { border-color: rgba(0,6,71,.16); }
.quad[data-tier="low"] { border-color: rgba(0,6,71,.22); }

.quad[data-tier="high"] .quadInner{ background: rgba(0,91,150,.06); }
.quad[data-tier="mid"]  .quadInner{ background: rgba(0,6,71,.03); }
.quad[data-tier="low"]  .quadInner{ background: rgba(0,6,71,.05); }

/* dotted outline = "もとの大きさ" のガイド */
.quad::after{
  content:"";
  position:absolute;
  inset: 0;
  border: 1px dashed rgba(0,6,71,.18);
  pointer-events:none;
  opacity: .55;
}

/* tierは「中身（inner）」の薄い色味で表現（ラベルは出さない） */

.quadHead{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.quadTitle{ font-weight:900; letter-spacing:.01em; color: rgba(0,6,71,.92); }
.quadAxis{ font-weight:800; color: rgba(15,23,42,.68); font-size: 12px; }

.quadSub{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
  color: rgba(0,6,71,.72);
  margin-bottom: 8px;
}

.quadList{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,.78);
  font-weight: 750;
  line-height: 1.75;
  font-size: 13px;
}
.quadList li{ margin: 6px 0; }

/* --- Values cards (aboutus) --- */
.valuesCards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:18px;
}
.valuesCards .card{
  padding:24px 20px;
  border-radius:16px;
  border:1px solid rgba(0,6,71,.08);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(4px);
}
.valuesCards .card strong{
  display:block;
  margin-bottom:4px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
}
.valuesCards .card em{
  display:block;
  font-style:italic;
  font-size:13px;
  color: rgba(15,23,42,.55);
  margin-bottom:10px;
}
.valuesCards .card p{ margin:0; color:var(--muted); font-size:14px; }

/* Responsive */
@media (max-width: 920px){
  :root{ --map-min-h: 520px; }
  .scale{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .valuesCards{ grid-template-columns: 1fr; }
}

@media (max-width: 540px){
  :root{ --map-min-h: 640px; }
    .quadList{ font-size: 12.5px; }
}