/* ==== Feature: Meridian Map ==== */
.page.feature { padding: 28px 0; }

.feature-hero {
  background: radial-gradient(800px 300px at 50% -120px, #eef6ff 0%, #fffdf9 60%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.kicker { display:inline-block; font-size:12px; letter-spacing:.04em; padding:6px 10px; border-radius:999px; background:var(--pop); border:1px solid #ffd8a8; color:#7c4a03; font-weight:700; }
.feature-title { margin: 8px 0 6px; font-size: clamp(20px,4.5vw,32px); }
.lead { color: var(--muted); }

.toolbox { display:flex; justify-content:space-between; align-items:center; gap:12px; margin: 12px 0 8px; }
.chipbar { display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:#f1f5f9; border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; }
.chip.is-active { border-color: var(--accent); }
.legend .badge { font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); }
.badge.b-yin { background:#eef2ff; }
.badge.b-yang { background:#fff7ed; }
.badge.b-focus { background:#e0f2fe; }

/* Map */
.map-wrap { margin-top: 8px; }
.map { position: relative; aspect-ratio: 3/4; border:1px solid var(--line); border-radius:16px; background: linear-gradient(#fcfcfc, #fff); overflow:hidden; }
.map::after { /* ざっくり人体シルエット（抽象） */
  content:""; position:absolute; inset:12px; border-radius:30px 30px 40px 40px; border:1px dashed #e5e7eb;
}

/* 経絡アイコン（抽象的な“路線点”） */
.line {
  position:absolute; width:44px; height:44px; border-radius:50%;
  transform: translate(-50%, -50%);
  border:2px solid var(--line); background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  cursor: pointer; font-weight:700;
}
.line[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(14,165,233,.12); }
.line.yin { color:#1d4ed8; }
.line.yang { color:#b45309; }
.line.mid { color:#0891b2; }

/* 位置（概念的配置） */
.line[data-id="lu"] { left: 60%; top: 18%; }
.line[data-id="pc"] { left: 55%; top: 22%; }
.line[data-id="ht"] { left: 50%; top: 26%; }

.line[data-id="li"] { left: 70%; top: 20%; }
.line[data-id="sj"] { left: 66%; top: 24%; }
.line[data-id="si"] { left: 62%; top: 28%; }

.line[data-id="sp"] { left: 45%; top: 60%; }
.line[data-id="lv"] { left: 48%; top: 66%; }
.line[data-id="ki"] { left: 52%; top: 72%; }

.line[data-id="st"] { left: 58%; top: 60%; }
.line[data-id="gb"] { left: 62%; top: 66%; }
.line[data-id="bl"] { left: 66%; top: 72%; }

.line[data-id="ren"] { left: 50%; top: 44%; }
.line[data-id="du"]  { left: 50%; top: 10%; }

/* リスト */
.list-wrap { margin-top: 16px; }
.section-title { font-size: clamp(16px,3vw,20px); margin: 0 0 12px; }
.list { grid-template-columns: repeat(12,1fr); gap: 8px; }
.item {
  grid-column: span 6; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:8px 12px;
  background:#fff; cursor:pointer; text-align:left;
}
.item:hover, .item:focus { border-color: var(--accent); outline:none; }
.tag { font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); }
.tag.yin { background:#eef2ff; }
.tag.yang { background:#fff7ed; }
.tag.mid { background:#e0f2fe; }

/* 免責・導線 */
.disclaimer { margin-top: 18px; font-size: 14px; color: var(--ink2); }
.more { margin-top: 18px; }
.btn { display:inline-block; padding:10px 14px; border:1px solid var(--line); border-radius:12px; text-decoration:none; }
.btn:hover { border-color: var(--accent); }

/* 小さい画面調整 */
@media (max-width: 820px){
  .item { grid-column: span 12; }
}