:root {
  --ink: #243040;
  --navy: #1f3a5f;
  --gold: #c4a46a;
  --cream: #f7f4ee;
  --line: #d5d0c6;
  --paper: #fffdf8;
}
body { background: var(--cream); color: var(--ink); }
.site-header { background: #FFFDF8; border-bottom: 2px solid var(--navy); }
/* .site-header { background: var(--navy); } */
.site-header a { color: var(--navy); }
.logo img { height: 40px; width: auto; }
h1 { color: var(--navy); font-size: 1.6rem; margin: 1rem 0 .4rem; }
.hint { color: #5c564c; }
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.toolbar label { font-size: .92rem; }
.toolbar select, .toolbar input {
  border: 1px solid var(--line); background: white; color: var(--ink);
  padding: .35rem .5rem; border-radius: 4px;
}
.btn, button.reload {
  background: var(--navy); color: white; border: 0; border-radius: 4px;
  padding: .4rem .7rem; cursor: pointer;
}
.status { color: #6b6256; font-size: .9rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); }
table.sake { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.sake th { background: var(--navy); color: white; text-align: left; padding: .45rem .5rem; }
table.sake td { border-top: 1px solid var(--line); padding: .45rem .5rem; vertical-align: top; }
table.sake tr.data { cursor: pointer; }
table.sake tr.data:hover { background: #f3efe4; }
table.sake tr.data.is-focus { background: #f3efe4; box-shadow: inset 0 0 0 2px #1f3a5f; }
table.sake tr.detail td { background: #f8f1de; border-top: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
.detail-grid > div { border: 1px solid #d5d0c6; background: #fffdf8; border-radius: 6px; padding: 8px 10px; }
.detail-grid dt { color: #6b6256; font-size: .78rem; margin: 0; }
.detail-grid dd { margin: 4px 0 0; }
.detail-grid .link-cell a, a.inline {
  color: #1f3a5f; font-weight: 700; text-decoration: none;
  display: inline-block; margin: 2px 6px 2px 0; padding: 4px 8px;
  border: 1px solid #1f3a5f; border-radius: 6px; background: #fff;
}
.detail-grid .link-cell a:hover, a.inline:hover { background: #e7eef5; }
a.action {
  display: inline-block; margin-top: 4px; padding: 6px 12px; border-radius: 999px;
  background: #1f3a5f; color: #fff; font-size: .8rem; font-weight: 700; text-decoration: none;
}
a.action.amazon { background: #232f3e; }
a.action.amazon:hover { background: #131921; }
.affiliate-note {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: #f3efe6; color: #6b5a32; font-size: .72rem; font-weight: 700;
}
.card.is-focus { outline: 2px solid #1f3a5f; outline-offset: 2px; background: #f8f1de; }
.card dl { display: grid; grid-template-columns: 7em 1fr; gap: 6px 8px; }
.card dt { color: #6b6256; }
.card dd { margin: 0; }
.cards { display: none; }
.card, .hub-card {
  border: 1px solid var(--line); background: var(--paper); border-radius: 8px;
  padding: 1rem; margin: .8rem 0;
}
.hub-grid { display: grid; gap: 1rem; }
.hub-card h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.hub-card a { color: var(--navy); font-weight: 700; }
.chip { display: inline-block; background: #e7eef5; color: var(--navy); border-radius: 99px; padding: .1rem .5rem; margin: 0 .25rem .25rem 0; font-size: .8rem; }
.chip.gold { background: #f3efe4; }
a.inline { color: var(--navy); }
.note { font-size: .85rem; color: #6b6256; }
.map-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; }
.map-box { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: .5rem; }
.map-box svg { width: 100%; height: auto; }
.map-panel { border: 1px solid #d5d0c6; background: #fffdf8; border-radius: 8px; padding: 12px; margin: 0 0 1rem; }
.map-stage { position: relative; max-width: 420px; margin: 0 auto; }
.map-stage img { width: 100%; height: auto; display: block; }
.map-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: #1f3a5f; color: #fff; font-weight: 700; font-size: .8rem;
}
.map-legend { font-size: .85rem; color: #5c564c; margin: .6rem 0 0; }
.map-jump {
  border: 1px solid #1f3a5f; background: #fff; color: #1f3a5f; border-radius: 999px;
  padding: 6px 12px; font-weight: 700; cursor: pointer;
}
.map-jump:hover { background: #e7eef5; }
.card h2 .no {
  display: inline-block; min-width: 1.4rem; margin-right: .4rem; color: #1f3a5f;
}
.footer-note { margin-top: 1.5rem; }
@media (max-width: 860px) {
  .table-wrap { display: none; }
  .cards { display: block; }
  .map-layout { grid-template-columns: 1fr; }
  .map-pin { width: 18px; height: 18px; font-size: .62rem; }
}

color-q {
  color: #8A5A12;
}

color-1 {
  color: #255E1F;
}

color-2 {
  color: #5E491F;
}

color-3 {
  color: #5E1F47;
}