/* Knowledge Map Viewer styles. Scoped to .km-* classes. */
.km-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg, #FFF9F0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.km-viewer.hidden { display: none; }
.km-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 16px 48px;
  box-sizing: border-box;
}
.km-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  margin-bottom: 6px;
  background: linear-gradient(var(--bg, #FFF9F0) 78%, rgba(255, 249, 240, 0));
}
.km-head .km-title {
  flex: 1;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink, #4A4038);
  margin: 0;
}
.km-iconbtn {
  flex: 0 0 auto;
  border: 1px solid var(--border, #E9E2D8);
  background: #fff;
  color: var(--muted, #8A7F72);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}
.km-iconbtn:hover { background: #FCF6EC; }
.km-iconbtn:focus-visible,
.km-card:focus-visible,
.km-chip:focus-visible,
.km-solve:focus-visible,
.km-viewbtn:focus-visible,
.km-select:focus-visible,
.km-search:focus-visible {
  outline: 3px solid rgba(230, 143, 168, .55);
  outline-offset: 2px;
}
.km-crumbs {
  font-size: 0.82rem;
  color: var(--muted, #8A7F72);
  margin: 2px 2px 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.km-crumb {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-strong, #C56B86);
  cursor: pointer;
  font: inherit;
}
.km-crumb:hover { text-decoration: underline; }
.km-crumb[aria-current="page"] { color: var(--muted, #8A7F72); cursor: default; text-decoration: none; }
.km-crumb-sep { color: #C9BEAF; margin: 0 6px; }
.km-hidden-label {
  position: absolute;
  left: -9999px;
}
.km-search,
.km-select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  border: 1px solid var(--border, #E9E2D8);
  background: #fff;
  color: var(--ink, #4A4038);
}
.km-search {
  padding: 12px 14px;
  font-size: 1rem;
  border-radius: 8px;
}
.km-select {
  padding: 10px 12px;
  font-size: 0.95rem;
  border-radius: 8px;
}
.km-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 6px;
}
.km-field {
  flex: 1 1 46%;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.km-field label {
  font-size: 0.76rem;
  color: var(--muted, #8A7F72);
  font-weight: 700;
}
.km-count {
  font-size: 0.8rem;
  color: var(--muted, #8A7F72);
  margin: 10px 2px;
}
.km-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.km-card {
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--border, #E9E2D8);
  border-left: 5px solid #E9E2D8;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(120, 90, 60, .05);
}
.km-card:hover {
  border-color: var(--primary, #E68FA8);
  box-shadow: 0 4px 12px rgba(199, 150, 120, .12);
}
.km-card-name {
  font-weight: 800;
  color: var(--ink, #4A4038);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.km-card-short {
  color: var(--muted, #8A7F72);
  font-size: 0.86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.km-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.km-arrow {
  margin-left: auto;
  color: #C9BEAF;
  font-size: 1.1rem;
}
.km-badge {
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.km-mod-antibody { border-left-color: #EEA9BE; }
.km-mod-cytotoxic { border-left-color: #9FCBAE; }
.km-mod-small_molecule { border-left-color: #E7B583; }
.km-badge.km-mod-antibody { background: #FCEFF3; color: #B25778; }
.km-badge.km-mod-cytotoxic { background: #EAF5EE; color: #3F7C5B; }
.km-badge.km-mod-small_molecule { background: #FBEEE0; color: #B4703A; }
.km-badge.km-mod-integration { background: #EFE7F5; color: #7A5CA0; }
.km-prio {
  font-size: 0.72rem;
  color: var(--muted, #8A7F72);
}
.km-prio.high::before { content: "*** "; color: #D98BA6; }
.km-prio.medium::before { content: "** "; color: #E0B27E; }
.km-prio.low::before { content: "* "; color: #B9B0A2; }
.km-detail-head {
  background: #fff;
  border: 1px solid var(--border, #E9E2D8);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}
.km-detail-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink, #4A4038);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.km-detail-tags,
.km-chips,
.km-taglist,
.km-prob-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.km-detail-tags { margin-bottom: 10px; gap: 6px; }
.km-cat {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted, #8A7F72);
  background: #F4EEE4;
  border-radius: 999px;
  padding: 2px 9px;
}
.km-detail-short {
  color: var(--ink, #4A4038);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0;
}
.km-detail-body {
  color: var(--muted, #6E6559);
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0 2px 16px;
  overflow-wrap: anywhere;
}
.km-section { margin: 0 0 14px; }
.km-section > h3 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--accent-strong, #C56B86);
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.km-section .km-hint {
  font-size: 0.76rem;
  color: var(--muted, #8A7F72);
  font-weight: 600;
}
.km-chip {
  cursor: pointer;
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--ink, #4A4038);
  background: #fff;
  border: 1px solid var(--border, #E9E2D8);
  border-radius: 999px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.km-chip:hover { border-color: var(--primary, #E68FA8); background: #FCF3F6; }
.km-chip .km-chip-arrow { color: #C9A7B4; font-size: 0.9rem; }
.km-chip.km-next { background: #FBF1E7; border-color: #EED9BF; }
.km-more {
  background: none;
  border: none;
  color: var(--accent-strong, #C56B86);
  cursor: pointer;
  font: inherit;
  padding: 6px 2px;
}
.km-more:hover { text-decoration: underline; }
.km-empty {
  font-size: 0.85rem;
  color: var(--muted, #8A7F72);
}
details.km-fold,
.km-legend {
  background: #fff;
  border: 1px solid var(--border, #E9E2D8);
  border-radius: 8px;
  overflow: hidden;
}
details.km-fold { margin-bottom: 10px; }
details.km-fold > summary,
.km-legend > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 700;
  color: var(--ink, #4A4038);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
details.km-fold > summary { font-size: 0.9rem; }
.km-legend > summary { font-size: 0.85rem; }
details.km-fold > summary::-webkit-details-marker,
.km-legend > summary::-webkit-details-marker { display: none; }
details.km-fold > summary::after,
.km-legend > summary::after { content: "v"; color: var(--muted, #8A7F72); }
details.km-fold[open] > summary::after,
.km-legend[open] > summary::after { content: "^"; }
.km-fold-body { padding: 2px 14px 14px; }
.km-tag {
  font-size: 0.85rem;
  color: var(--ink, #4A4038);
  background: #F6F0E7;
  border-radius: 8px;
  padding: 6px 11px;
}
.km-tag.km-adverse { background: #FBEEE8; color: #A96A54; }
.km-prob {
  border: 1px solid var(--border, #E9E2D8);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #FEFCF9;
}
.km-prob-q {
  font-size: 0.88rem;
  color: var(--ink, #4A4038);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.km-prob-meta {
  align-items: center;
  margin-top: 8px;
}
.km-prob-id {
  font-size: 0.72rem;
  color: #B4A99B;
  font-family: ui-monospace, monospace;
}
.km-solve {
  margin-left: auto;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary, #E68FA8);
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
}
.km-solve:hover { background: var(--primary-dark, #D77A97); }
.km-trend {
  font-size: 0.88rem;
  color: var(--ink, #4A4038);
}
.km-trend-row { padding: 2px 0; }
.km-trend-row b { color: var(--accent-strong, #C56B86); font-weight: 800; }
.km-trend-note {
  font-size: 0.74rem;
  color: var(--muted, #8A7F72);
  margin: 8px 0 0;
  line-height: 1.55;
}
.km-viewtoggle {
  display: inline-flex;
  margin: 12px 0 2px;
  border: 1px solid var(--border, #E9E2D8);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  max-width: 100%;
}
.km-viewbtn {
  border: none;
  background: #fff;
  color: var(--muted, #8A7F72);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 8px 15px;
  cursor: pointer;
  min-width: 0;
}
.km-viewbtn + .km-viewbtn { border-left: 1px solid var(--border, #E9E2D8); }
.km-viewbtn:hover { background: #FCF6EC; }
.km-viewbtn.on {
  background: var(--pink-soft, #FDEEF3);
  color: var(--accent-strong, #C56B86);
  font-weight: 800;
}
.km-legend {
  margin: 8px 0 4px;
}
.km-legend.hidden { display: none; }
.km-legend-body {
  padding: 2px 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.km-legend-item {
  font-size: 0.76rem;
  color: var(--ink, #4A4038);
  padding: 3px 10px 3px 8px;
  border-radius: 8px;
  border-left: 5px solid #CFC7B8;
  background: #F4F1EB;
}
.km-legend-note {
  flex: 1 1 100%;
  font-size: 0.72rem;
  color: var(--muted, #8A7F72);
  margin: 6px 0 0;
  line-height: 1.55;
}
.km-card.km-progress-state--none { background: #F4F1EB; border-left-color: #CFC7B8; }
.km-card.km-progress-state--unanswered { background: #FBF8F2; border-left-color: #E0D8CB; }
.km-card.km-progress-state--clear { background: #EEF5EF; border-left-color: #9FC7AC; }
.km-card.km-progress-state--incorrect { background: #FCF2E4; border-left-color: #E3B277; }
.km-card.km-progress-state--review { background: #FBE9DC; border-left-color: #DF9060; }
.km-legend-item.km-progress-state--none { background: #F4F1EB; border-left-color: #CFC7B8; }
.km-legend-item.km-progress-state--unanswered { background: #FBF8F2; border-left-color: #E0D8CB; }
.km-legend-item.km-progress-state--clear { background: #EEF5EF; border-left-color: #9FC7AC; }
.km-legend-item.km-progress-state--incorrect { background: #FCF2E4; border-left-color: #E3B277; }
.km-legend-item.km-progress-state--review { background: #FBE9DC; border-left-color: #DF9060; }
.km-prog {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
}
.km-prog-state {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink, #4A4038);
}
.km-prog-count {
  font-size: 0.78rem;
  color: var(--muted, #8A7F72);
}
.km-prog-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.km-badge-int,
.km-badge-recent {
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.km-badge-int { background: #EFE7F5; color: #7A5CA0; }
.km-badge-recent { background: #E6F0EF; color: #4E7C79; }
.home-km { margin: 4px 0 22px; }
.home-km .hk-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted, #8A7F72);
  margin: 0 2px 8px;
}
.km-entry {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  background: #fff;
  border: 1px dashed #E3C9B4;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.km-entry:hover {
  border-color: var(--primary, #E68FA8);
  background: #FCF6EF;
}
.km-entry-title {
  font-weight: 700;
  color: var(--ink, #4A4038);
  font-size: 0.98rem;
}
.km-entry-sub {
  font-size: 0.8rem;
  color: var(--muted, #8A7F72);
}
@media (max-width: 560px) {
  .km-inner { padding: 10px 12px 40px; }
  .km-head { gap: 8px; }
  .km-head .km-title { font-size: 1.02rem; }
  .km-iconbtn { padding: 8px 9px; font-size: 0.86rem; }
  .km-field { flex: 1 1 100%; }
  .km-detail-name { font-size: 1.18rem; }
  .km-viewtoggle { width: 100%; }
  .km-viewbtn {
    flex: 1 1 50%;
    padding: 10px 8px;
    text-align: center;
    white-space: normal;
  }
  .km-prog { gap: 3px 8px; }
  .km-prob-meta { align-items: stretch; }
  .km-solve {
    margin-left: 0;
    width: 100%;
  }
}
@media (max-width: 380px) {
  .km-inner { padding-left: 10px; padding-right: 10px; }
  .km-card { padding: 11px 12px; }
  .km-viewbtn { font-size: 0.8rem; }
  .km-badge-int,
  .km-badge-recent { white-space: normal; }
}

/* Phase S1: PWA/スマホ全画面表示の安全領域とタップ操作補強 */
.km-viewer {
  overscroll-behavior: contain;
}

.km-iconbtn,
.km-card,
.km-chip,
.km-solve,
.km-viewbtn,
.km-search,
.km-select {
  touch-action: manipulation;
}

.km-iconbtn,
.km-card,
.km-chip,
.km-solve,
.km-viewbtn,
.km-search,
.km-select {
  min-height: 44px;
}

@supports (padding: max(0px)) {
  .km-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 28px));
  }
}

@media (max-width: 560px) {
  .km-head {
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .km-card-meta {
    align-items: flex-start;
  }

  .km-arrow {
    display: none;
  }

  .km-chip,
  .km-tag,
  .km-legend-item {
    overflow-wrap: anywhere;
  }
}