/* ========= 高配当株管理 styles.css ========= */
:root {
  /* 背景・面 */
  --bg:       #fbf6ee;
  --surface:  #ffffff;
  --surface2: #f3ece0;

  /* インク */
  --ink:   #1a1410;
  --ink2:  #5a4a3a;
  --ink3:  #7d6b53;

  /* 線 */
  --border: #ebe2d2;

  /* アクセント */
  --peach:    #e8744f;
  --peach-lt: #fde6dc;
  --rose:     #c93f5e;
  --cool:     #3a5e8a;
  --cool-lt:  #dde6f0;
  --ok:       #5a7a4a;
  --ok-lt:    #d6edd8;

  /* レイアウト */
  --nav-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 2px 16px -6px rgba(60,30,10,.14);
  --shadow-sm: 0 1px 6px rgba(60,30,10,.07);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
body { display: flex; min-height: 100vh; }
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { display: none; }

/* ===== PC サイドバー ===== */
.pc-sidebar { display: none; }
.pc-topbar  { display: none; }

@media (min-width: 900px) {
  .pc-sidebar {
    display: flex;
    flex-direction: column;
    width: 220px;
    background: var(--surface);
    border-right: .5px solid var(--border);
    padding: 20px 14px;
    position: sticky; top: 0; height: 100vh;
  }
  .pc-sb-logo-row {
    display: flex; align-items: center;
    padding: 6px 8px 22px;
    border-bottom: .5px solid var(--border);
    margin-bottom: 16px;
  }
  .pc-sb-logo-row .logo-name {
    font-family: 'Fraunces', serif; font-size: 18px; letter-spacing: -.02em;
    color: var(--ink); font-weight: 600;
    white-space: nowrap;
  }
  .pc-sb-nav { display: flex; flex-direction: column; gap: 2px; }
  .pc-nav-btn {
    display: flex; align-items: center; gap: 10px;
    background: transparent; border: none; color: var(--ink2);
    padding: 10px 12px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; text-align: left;
    transition: all .15s;
  }
  .pc-nav-btn:hover { background: var(--surface2); color: var(--ink); }
  .pc-nav-btn.active { background: var(--peach-lt); color: var(--peach); font-weight: 600; }
  .pc-nav-btn svg { flex: 0 0 18px; width: 18px; height: 18px; }

  .pc-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 36px 14px;
    border-bottom: .5px solid var(--border);
    background: rgba(251,246,238,.85);
    backdrop-filter: saturate(120%) blur(8px);
    position: sticky; top: 0; z-index: 10;
  }
  .pc-tb-eyebrow {
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink3); margin-bottom: 4px;
  }
  .pc-tb-title {
    font-family: 'Fraunces', serif; font-size: 22px;
    letter-spacing: -.02em; font-weight: 600; color: var(--ink);
  }
  .pc-tb-meta { font-size: 12px; color: var(--ink3); }
}

/* ===== #app コンテナ ===== */
#app {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}
@media (min-width: 900px) {
  #app { max-width: none; flex: 1; margin: 0; }
}

.main-content {
  flex: 1;
  padding: 16px 0 calc(var(--nav-h) + 16px + var(--safe-bottom));
}
@media (min-width: 900px) {
  .main-content { padding: 24px 36px 40px; }
}
@media (min-width: 1400px) {
  .main-content { padding-left: 56px; padding-right: 56px; }
}

/* ===== カード基本形 ===== */
.card {
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin: 0 16px 12px;
}
@media (min-width: 900px) {
  .card { margin: 0 0 16px; padding: 22px; }
}
.card-title {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink3); margin-bottom: 12px; font-weight: 600;
}

/* ===== ヒーロー（朝焼け） ===== */
.hero {
  position: relative;
  margin: 0 16px 16px;
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  color: #fff;
  background: linear-gradient(180deg,
    #2c4368 0%, #5e6d92 22%, #b08aa0 46%,
    #f0bfa0 68%, #ffd9a8 86%, #ffe6c4 100%);
  overflow: hidden;
  box-shadow: var(--shadow);
}
@media (min-width: 900px) { .hero { margin: 0 0 16px; padding: 32px 28px; } }
.hero .eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.hero h1 {
  margin: 0 0 14px;
  font-family: 'Fraunces', serif;
  font-size: 14px; font-weight: 400;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.hero-value {
  font-family: 'Fraunces', serif;
  font-size: 38px; line-height: 1.05; font-weight: 600;
  letter-spacing: -.03em;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.hero-value .unit {
  font-size: 18px; margin-left: 4px; font-weight: 500; opacity: .9;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 6px rgba(0,0,0,.18);
}
.hero-meta div { display: flex; flex-direction: column; }
.hero-meta .k {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.78); margin-bottom: 3px;
}
.hero-meta .v { font-weight: 600; font-size: 16px; }

/* ===== 集計サブカード ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 16px 12px;
}
@media (min-width: 900px) {
  .kpi-grid { margin: 0 0 16px; grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
.kpi {
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.kpi .k {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink3); margin-bottom: 6px; font-weight: 600;
}
.kpi .v {
  font-family: 'Fraunces', serif;
  font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink);
}
.kpi .v .unit { font-size: 12px; margin-left: 2px; font-weight: 500; color: var(--ink2); }
.kpi .sub { font-size: 12px; color: var(--ink3); margin-top: 3px; }

.pos { color: var(--peach); }
.neg { color: var(--rose); }

/* ===== 銘柄リスト ===== */
.list-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 10px;
}
@media (min-width: 900px) { .list-bar { padding: 0 0 14px; } }
.list-bar .count {
  font-size: 12px; color: var(--ink3); margin-left: auto;
}

.seg-control {
  display: inline-flex;
  background: var(--surface2);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  border: none; background: transparent;
  font-size: 12px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px;
  color: var(--ink2);
  transition: all .15s;
}
.seg-btn.active {
  background: var(--surface); color: var(--peach);
  box-shadow: 0 1px 4px rgba(60,30,10,.08);
}

.holding-list { padding: 0 16px; }
@media (min-width: 900px) {
  .holding-list { padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (min-width: 1200px) {
  .holding-list { grid-template-columns: repeat(3, 1fr); }
}

.holding-card {
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
@media (min-width: 900px) { .holding-card { margin-bottom: 0; } }
.holding-card:active { transform: scale(.99); }
.holding-card:hover { box-shadow: var(--shadow); }

.h-top {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
}
.h-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600; color: var(--ink3);
}
.h-sector {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--surface2); color: var(--ink2);
  margin-left: auto;
}
.h-name {
  font-family: 'Fraunces', serif;
  font-size: 16px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em; margin-bottom: 10px;
}
.h-mid {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px;
}
.h-mid .value {
  font-family: 'Fraunces', serif;
  font-size: 22px; font-weight: 600; letter-spacing: -.02em;
}
.h-mid .value .unit { font-size: 12px; font-weight: 500; color: var(--ink2); margin-left: 2px; }
.h-mid .pl-badge {
  margin-left: auto;
  font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
.h-mid .pl-badge.pos { background: var(--peach-lt); color: var(--peach); }
.h-mid .pl-badge.neg { background: #fdd6df; color: var(--rose); }

.h-stats {
  display: flex; gap: 14px; font-size: 12px; color: var(--ink3);
}
.h-stats span strong { color: var(--ink2); font-weight: 600; margin-left: 3px; }

/* 業種別 */
.sector-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: .5px solid var(--border);
}
.sector-row:last-child { border-bottom: none; }
.sector-row .name { font-size: 13px; font-weight: 500; color: var(--ink); flex: 1; }
.sector-row .val { font-family: 'Fraunces', serif; font-size: 14px; font-weight: 600; }
.sector-row .pct { font-size: 12px; color: var(--ink3); margin-left: 6px; min-width: 42px; text-align: right; }
.sector-bar {
  height: 4px; background: var(--surface2); border-radius: 999px; overflow: hidden;
  margin-top: 6px;
}
.sector-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--peach), var(--rose));
  border-radius: 999px;
}

/* ===== 詳細画面 ===== */
.detail-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 12px;
}
@media (min-width: 900px) { .detail-header { padding: 8px 0 16px; } }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: .5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink2);
  box-shadow: var(--shadow-sm);
}
.icon-btn svg { width: 18px; height: 18px; }

.detail-hero {
  margin: 0 16px 12px;
  padding: 22px 22px 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff5ed, #fde6dc 60%, #fbcbb6);
  border: .5px solid var(--border);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) { .detail-hero { margin: 0 0 16px; } }
.detail-hero .code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .14em; color: var(--ink3);
  margin-bottom: 4px;
}
.detail-hero h2 {
  margin: 0 0 6px;
  font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
}
.detail-hero .sector {
  display: inline-block;
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.7); color: var(--ink2);
  margin-bottom: 14px;
}
.detail-hero .price-row {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 4px;
}
.detail-hero .price {
  font-family: 'Fraunces', serif; font-size: 32px; font-weight: 600;
  letter-spacing: -.02em;
}
.detail-hero .price .unit { font-size: 14px; margin-left: 2px; color: var(--ink2); }
.detail-hero .pl-badge {
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}
.detail-hero .pl-badge.pos { background: var(--peach); color: #fff; }
.detail-hero .pl-badge.neg { background: var(--rose); color: #fff; }

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: .5px solid var(--border);
  margin-top: 14px;
  padding-top: 14px;
}
.detail-stats .item {
  padding: 8px 0;
}
.detail-stats .k {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3); margin-bottom: 4px;
}
.detail-stats .v {
  font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600;
  color: var(--ink);
}
.detail-stats .v .unit { font-size: 12px; font-weight: 500; color: var(--ink2); margin-left: 2px; }

.ext-links {
  display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap;
}
@media (min-width: 900px) { .ext-links { padding: 0 0 16px; } }
.ext-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface); color: var(--ink2);
  border: .5px solid var(--border);
  text-decoration: none; font-size: 12px; font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.ext-link svg { width: 14px; height: 14px; }

/* ===== ボトムナビ（モバイル） ===== */
.bottom-nav {
  position: sticky; bottom: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: .5px solid var(--border);
  display: flex; justify-content: space-around;
  padding: 8px 8px calc(8px + var(--safe-bottom));
  z-index: 100;
}
@media (min-width: 900px) { .bottom-nav { display: none; } }
.nav-btn {
  flex: 1; min-height: 56px;
  border: none; background: transparent;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; color: var(--ink3);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
  padding: 0 2px;
}
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn.active { color: var(--peach); }
.nav-btn span { font-size: 11px; }

/* ===== グラフ用 ===== */
.donut-wrap {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .donut-wrap { flex-direction: column; align-items: stretch; gap: 14px; }
  .donut-svg { align-self: center; }
}
.donut-svg { flex: 0 0 auto; }
.donut-legend {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
}
.donut-legend .row {
  display: flex; align-items: center; gap: 8px;
}
.donut-legend .sw {
  width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px;
}
.donut-legend .lbl { color: var(--ink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.donut-legend .v { color: var(--ink2); font-weight: 600; font-variant-numeric: tabular-nums; }
.donut-legend .pct { color: var(--ink3); font-size: 12px; min-width: 38px; text-align: right; }

.bars-wrap {
  display: grid; grid-template-columns: 1fr;
  gap: 6px; margin-top: 8px;
}
.bar-row {
  display: grid; grid-template-columns: 56px 1fr 40px;
  align-items: center; gap: 8px;
  font-size: 12px;
}
.bar-row .lbl { color: var(--ink3); }
.bar-row .v   { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bar-row .bar {
  height: 16px; background: var(--surface2); border-radius: 4px; overflow: hidden;
  position: relative;
}
.bar-row .bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--peach), var(--rose));
  border-radius: 4px;
}
.bar-row.empty .bar > i { background: var(--surface2); }

/* 月別配当の縦棒 */
.month-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  align-items: end;
  height: 140px;
  margin: 8px 0 4px;
  position: relative;
}
.month-grid .col {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; height: 100%;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.month-grid .bar {
  width: 100%; min-height: 2px;
  background: linear-gradient(180deg, var(--peach), var(--rose));
  border-radius: 4px 4px 0 0;
  align-self: stretch;
  margin-top: auto;
  transition: filter .15s, transform .15s;
}
.month-grid .bar.zero { background: var(--surface2); }
.month-grid .col:hover .bar,
.month-grid .col.active .bar {
  filter: brightness(1.15);
  transform: scaleY(1.02);
  transform-origin: bottom;
}
.month-grid .col.active .bar.zero,
.month-grid .col:hover .bar.zero {
  background: #d9cdb6;
}
.month-grid .lbl {
  font-size: 11px; color: var(--ink3);
  font-family: 'JetBrains Mono', monospace;
}
.month-grid .col.active .lbl,
.month-grid .col:hover .lbl {
  color: var(--peach); font-weight: 700;
}

/* 月別吹き出し（バーの上に出る） */
.month-grid .col .tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(60,30,10,.25);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.month-grid .col .tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.month-grid .col:hover .tip,
.month-grid .col.active .tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* 端のバーは吹き出しがはみ出ないよう寄せる */
.month-grid .col:first-child .tip { left: 0; transform: translateY(4px); }
.month-grid .col:first-child:hover .tip,
.month-grid .col:first-child.active .tip { transform: translateY(0); }
.month-grid .col:first-child .tip::after { left: 16px; }
.month-grid .col:last-child .tip { left: auto; right: 0; transform: translateY(4px); }
.month-grid .col:last-child:hover .tip,
.month-grid .col:last-child.active .tip { transform: translateY(0); }
.month-grid .col:last-child .tip::after { left: auto; right: 16px; transform: none; }

/* グラフ上のラベル領域確保（ツールチップが切れないように） */
.month-grid-card .month-grid {
  margin-top: 30px;
}

.rank-table {
  display: grid;
  grid-template-columns: 28px 56px 1fr auto;
  gap: 0;
}
.rank-table .h {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3); font-weight: 600;
  padding: 6px 8px; border-bottom: .5px solid var(--border);
}
.rank-table .c {
  padding: 10px 8px; border-bottom: .5px solid var(--border);
  font-size: 13px; color: var(--ink);
  display: flex; align-items: center;
}
.rank-table .c.no { color: var(--ink3); font-weight: 600; font-family: 'Fraunces', serif; }
.rank-table .c.code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink2); }
.rank-table .c.div { font-family: 'Fraunces', serif; font-weight: 600; justify-content: flex-end; }

.select-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: .5px solid var(--border);
  font-size: 12px; font-weight: 500; color: var(--ink2);
  box-shadow: var(--shadow-sm);
}
.select-pill select {
  border: none; background: transparent;
  font: inherit; color: inherit;
  outline: none;
}

/* ===== ツリーマップ ===== */
.treemap-wrap { width: 100%; }
.treemap-header {
  display: flex; gap: 10px; margin-bottom: 10px;
  font-size: 12px;
}
.treemap-header .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 600;
}
.treemap-header .chip .sw {
  width: 10px; height: 10px; border-radius: 3px;
}
.treemap-svg { display: block; width: 100%; height: auto; }
.tm-rect {
  stroke: #fff;
  stroke-width: 1;
  transition: opacity .15s, filter .15s;
  cursor: pointer;
}
.tm-rect:hover { filter: brightness(1.15); }
.tm-rect.selected {
  stroke: var(--ink);
  stroke-width: 2.5;
  filter: brightness(1.1);
}
.tm-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  fill: #fff;
  pointer-events: none;
}
.tm-pct {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  fill: rgba(255,255,255,.9);
  pointer-events: none;
}

/* ツリーマップ上部の選択情報エリア */
.tm-info {
  display: flex; align-items: center; gap: 8px 10px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  min-height: 52px;
  font-size: 12px;
  transition: background .15s;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .tm-info.has-selection {
    flex-wrap: wrap;
  }
  .tm-info.has-selection .ti-name {
    flex: 1 1 100%;
    order: 2;
    font-size: 14px;
    white-space: normal;
  }
  .tm-info.has-selection .grp-chip { order: 1; }
  .tm-info.has-selection .ti-code  { order: 1; }
  .tm-info.has-selection .ti-go    { order: 1; margin-left: auto; }
  .tm-info.has-selection .ti-sector { order: 3; }
  .tm-info.has-selection .ti-val    { order: 4; margin-left: auto; }
  .tm-info.has-selection .ti-pct    { order: 5; }
}
.tm-info.has-selection { background: #fff; border: .5px solid var(--border); }
.tm-info .placeholder { color: var(--ink3); }
.tm-info .grp-chip {
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff;
  letter-spacing: .04em;
  flex: 0 0 auto;
}
.tm-info .grp-chip.D { background: #2e6f4f; }
.tm-info .grp-chip.C { background: #a83a3a; }
.tm-info .ti-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink3); flex: 0 0 auto;
}
.tm-info .ti-name {
  font-weight: 700; color: var(--ink);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-info .ti-sector {
  font-size: 12px; color: var(--ink3);
  flex: 0 0 auto;
}
.tm-info .ti-val {
  font-family: 'Fraunces', serif; font-weight: 600;
  color: var(--ink); flex: 0 0 auto;
}
.tm-info .ti-pct {
  font-size: 12px; color: var(--ink2); font-weight: 600;
  flex: 0 0 auto;
}
.tm-info .ti-go {
  border: none; background: var(--peach); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  cursor: pointer; flex: 0 0 auto;
}

/* ===== 業種分類設定リスト ===== */
.sector-config {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 600px) {
  .sector-config { grid-template-columns: 1fr 1fr; }
}
.sector-config-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.sector-config-row .name {
  flex: 1; min-width: 0; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sector-config-row select {
  border: none;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--surface);
  color: var(--ink2);
  outline: none;
  cursor: pointer;
}
.sector-config-row select.def { background: #2e6f4f; color: #fff; }
.sector-config-row select.cyc { background: #a83a3a; color: #fff; }

/* ===== カード内の利回り2段表示 ===== */
.yield-pair {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 12px;
}
.yield-pair .yp-lbl { color: var(--ink3); }
.yield-pair .yp-v { color: var(--ink2); font-weight: 600; }

/* ===== 口座バッジ ===== */
.acct-badge {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: .04em;
}
.acct-badge.tokutei { background: var(--surface2); color: var(--ink2); }
.acct-badge.nisa    { background: #dde8f5; color: var(--cool); }

.market-badge {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--peach-lt); color: var(--peach);
}

/* ===== モーダル ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26,20,16,.5);
  display: flex; justify-content: center;
  align-items: flex-end;
  z-index: 1000;
  animation: fadeIn .15s ease-out;
}
@media (min-width: 480px) {
  .modal-overlay { align-items: center; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 30px rgba(60,30,10,.25);
}
@media (min-width: 480px) {
  .modal { border-radius: 20px; max-height: 88vh; }
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: .5px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface);
  z-index: 1;
}
.modal-title {
  font-family: 'Fraunces', serif;
  font-size: 18px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em; flex: 1;
}
.modal-close {
  background: var(--surface2); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink2); cursor: pointer;
}
.modal-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-2 > div { display: flex; flex-direction: column; gap: 6px; }
.form-row label,
.form-row-2 label {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3); font-weight: 600;
}
.form-row .req,
.form-row-2 .req { color: var(--rose); margin-left: 2px; }
.form-row input, .form-row select,
.form-row-2 input, .form-row-2 select {
  border: .5px solid var(--border);
  background: var(--surface);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font: inherit; font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.form-row input:focus, .form-row select:focus,
.form-row-2 input:focus, .form-row-2 select:focus {
  border-color: var(--peach);
}
.form-row input[readonly] {
  background: var(--surface2); color: var(--ink2); cursor: not-allowed;
}
.form-actions {
  display: flex; gap: 10px; margin-top: 6px;
}
.btn-pri {
  flex: 1;
  background: var(--peach); color: #fff;
  border: none; padding: 13px;
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 18px -4px rgba(232,116,79,.55);
}
.btn-sec {
  flex: 1;
  background: var(--surface2); color: var(--ink2);
  border: none; padding: 13px;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px;
  cursor: pointer;
}

/* ===== 銘柄検索ボックス ===== */
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  margin: 0 16px 10px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) { .search-box { margin: 0 0 10px; } }
.search-box svg { width: 16px; height: 16px; color: var(--ink3); flex: 0 0 auto; }
.search-box input {
  border: none; background: transparent; outline: none;
  font: inherit; font-size: 15px; color: var(--ink);
  width: 100%;
}
.search-box input::placeholder { color: var(--ink3); }

/* ===== 配当目標 進捗バー ===== */
.goal-bar {
  height: 16px;
  background: var(--surface2);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 8px;
}
.goal-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--peach), var(--rose));
  border-radius: 999px;
  transition: width .3s ease;
}

/* ===== クラウド同期ステータス ===== */
.cloud-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.cloud-pill .cloud-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.cloud-pill.ok       { background: var(--ok-lt);     color: var(--ok); }
.cloud-pill.ok .cloud-dot       { background: var(--ok); }
.cloud-pill.syncing  { background: var(--cool-lt);   color: var(--cool); }
.cloud-pill.syncing .cloud-dot  { background: var(--cool); animation: pulse 1.2s infinite; }
.cloud-pill.error    { background: #fdd6df;          color: var(--rose); }
.cloud-pill.error .cloud-dot    { background: var(--rose); }
.cloud-pill.offline  { background: var(--surface2);  color: var(--ink3); }
.cloud-pill.offline .cloud-dot  { background: var(--ink3); }
.cloud-pill.idle     { background: var(--surface2);  color: var(--ink3); }
.cloud-pill.idle .cloud-dot     { background: var(--ink3); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ===== 注記 ===== */
.note-card {
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: var(--peach-lt);
  border: .5px solid #f0c4af;
  border-radius: var(--radius-sm);
  color: #8a3417;
  font-size: 12px;
  line-height: 1.55;
}
@media (min-width: 900px) { .note-card { margin: 12px 0 0; } }

/* ===== ユーティリティ ===== */
.hidden { display: none !important; }

/* ===== 公開デモ専用 ===== */
.demo-ribbon { position:fixed; inset:0 0 auto; z-index:300; height:calc(28px + env(safe-area-inset-top,0px)); padding:calc(6px + env(safe-area-inset-top,0px)) 16px 6px; background:#1a1410; color:#fff; text-align:center; font-size:11px; line-height:16px; letter-spacing:.05em; }
body { padding-top:calc(28px + env(safe-area-inset-top,0px)); }
.demo-nav-icon { width:20px; text-align:center; font-size:18px; line-height:1; }
.nav-btn .demo-nav-icon { font-size:19px; }
.demo-side-note { margin-top:auto; padding:16px 8px 0; border-top:.5px solid var(--border); color:var(--peach); font-size:11px; font-weight:600; }
.demo-side-note span { color:var(--ink3); font-weight:400; line-height:1.6; }
.demo-hero-block {
  padding:16px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  background:rgba(35,50,78,.5);
  box-shadow:0 8px 24px -14px rgba(24,34,56,.8);
}
.demo-hero-block + .demo-hero-block { margin-top:12px; }
.demo-market-label { margin-bottom:2px; font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.88); }
.demo-note { margin:0 16px 12px; padding:11px 14px; border:.5px solid var(--peach); border-radius:var(--radius-sm); background:var(--peach-lt); color:var(--ink2); font-size:12px; }
.demo-walkthrough > p { margin:-3px 0 14px; color:var(--ink2); font-size:12px; line-height:1.6; }
.demo-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.demo-steps button { min-width:0; min-height:92px; padding:12px; border:.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface2); color:var(--ink); text-align:left; }
.demo-steps button:hover,.demo-steps button:focus-visible { border-color:var(--peach); background:var(--peach-lt); outline:none; }
.demo-steps i { display:grid; place-items:center; width:24px; height:24px; margin-bottom:9px; border-radius:50%; background:var(--peach); color:#fff; font:600 12px Fraunces,serif; font-style:normal; }
.demo-steps strong,.demo-steps small { display:block; }
.demo-steps strong { font-size:12px; }
.demo-steps small { margin-top:4px; color:var(--ink3); font-size:10px; line-height:1.45; }
.demo-page-head { margin:0 16px 16px; }
.demo-page-head .eyebrow { color:var(--ink3); font-size:11px; letter-spacing:.18em; }
.demo-page-head h1 { margin:4px 0; font:600 28px/1.2 Fraunces,serif; }
.demo-page-head p { margin:0; color:var(--ink3); font-size:12px; }
.badge { margin-left:auto; padding:3px 9px; border-radius:999px; font-size:10px; font-weight:600; }
.badge-ok { background:var(--ok-lt); color:var(--ok); }
.badge-peach { background:var(--peach-lt); color:var(--peach); }
.h-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:13px; padding-top:12px; border-top:.5px solid var(--border); }
.h-stats div { min-width:0; }
.h-stats span,.h-stats strong { display:block; }
.h-stats span { color:var(--ink3); font-size:10px; }
.h-stats strong { margin-top:3px; overflow:hidden; color:var(--ink); font:600 13px JetBrains Mono,monospace; text-overflow:ellipsis; white-space:nowrap; }
.holding-card { cursor:default; }
.demo-donut-wrap { display:flex; align-items:center; gap:28px; }
.demo-donut { flex:0 0 auto; width:190px; height:190px; display:grid; place-items:center; border-radius:50%; }
.demo-donut > div { width:58%; height:58%; display:grid; place-content:center; border-radius:50%; background:var(--surface); text-align:center; }
.demo-donut strong,.demo-donut span { display:block; }
.demo-donut strong { font:600 34px Fraunces,serif; }
.demo-donut span { color:var(--ink3); font-size:10px; }
.demo-sector-list { flex:1; min-width:230px; }
.demo-sector-list > div { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:8px; min-height:37px; border-bottom:.5px solid var(--border); }
.demo-sector-list i { width:9px; height:9px; border-radius:50%; }
.demo-sector-list span,.demo-sector-list b { font-size:12px; }
.demo-sector-list small { grid-column:2; color:var(--ink3); font:500 10px JetBrains Mono,monospace; }
.demo-tm-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.demo-tm-summary span { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.demo-tm-summary i { width:10px; height:10px; border-radius:3px; }
.demo-tm-summary .def { color:#256044; background:#e9f1ed; }
.demo-tm-summary .def i { background:#2e6f4f; }
.demo-tm-summary .cyc { color:#9c3030; background:#f7eaea; }
.demo-tm-summary .cyc i { background:#a83a3a; }
.demo-tm-note { margin-bottom:10px; padding:10px 12px; border-radius:10px; background:var(--surface2); color:var(--ink3); font-size:11px; }
.demo-treemap svg { display:block; width:100%; height:auto; overflow:hidden; border-radius:12px; }
.demo-tm-rect { stroke:#fff; stroke-width:1; }
.demo-tm-name,.demo-tm-pct { fill:#fff; pointer-events:none; font-family:'Noto Sans JP',sans-serif; font-weight:700; }
.demo-tm-pct { opacity:.9; }
.demo-help { margin:10px 0 0; color:var(--ink3); font-size:12px; line-height:1.6; }
.demo-setting-copy { margin:0 0 12px; color:var(--ink2); font-size:12px; line-height:1.65; }
.demo-setting-meta { display:block; margin-top:10px; color:var(--ink3); font-size:11px; }
.demo-status { display:flex; align-items:center; gap:10px; }
.demo-status > i { width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 5px var(--ok-lt); }
.demo-status strong,.demo-status span { display:block; }
.demo-status strong { font-size:13px; }
.demo-status span { margin-top:3px; color:var(--ink3); font-size:11px; }
.demo-static-control { display:flex; align-items:center; gap:12px; max-width:420px; padding:11px 13px; border-radius:var(--radius-sm); background:var(--surface2); font-size:12px; }
.demo-static-control strong { margin-left:auto; }
.demo-static-control small { color:var(--ink3); }
.demo-disabled-action { display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border-radius:var(--radius-sm); background:#c9bdb1; color:#fff; font-size:12px; font-weight:600; cursor:not-allowed; }
.demo-disabled-action.cool { background:#9eabb9; }
.demo-action-row { display:flex; flex-wrap:wrap; gap:8px; }
.demo-sector-config { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.demo-sector-config > div { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 10px; border-radius:var(--radius-sm); background:var(--surface2); }
.demo-sector-config span { overflow:hidden; flex:1; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.demo-sector-config b { padding:4px 8px; border-radius:999px; color:#fff; font-size:10px; white-space:nowrap; }
.demo-sector-config .def { background:#2e6f4f; }
.demo-sector-config .cyc { background:#a83a3a; }
.demo-months { height:230px; display:grid; grid-template-columns:repeat(12,1fr); align-items:end; gap:8px; }
.demo-months > div { height:100%; display:grid; grid-template-rows:20px 1fr 20px; text-align:center; }
.demo-months span,.demo-months strong { font-size:9px; color:var(--ink3); }
.demo-months i { position:relative; align-self:stretch; margin:4px auto; width:18px; background:var(--surface2); border-radius:5px 5px 2px 2px; overflow:hidden; }
.demo-months b { position:absolute; inset:auto 0 0; background:linear-gradient(180deg,var(--rose),var(--peach)); }
.demo-ranking { padding-top:4px; padding-bottom:4px; }
.demo-rank-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:66px; border-bottom:.5px solid var(--border); }
.demo-rank-row:last-child { border-bottom:0; }
.demo-rank-row > span { color:var(--peach); font:600 21px Fraunces,serif; }
.demo-rank-row div strong,.demo-rank-row div small { display:block; }
.demo-rank-row div strong { font-size:13px; }
.demo-rank-row div small { margin-top:3px; color:var(--ink3); font-size:10px; }
.demo-rank-row > b { text-align:right; font:600 12px JetBrains Mono,monospace; }
@media (min-width:900px) { .pc-sidebar{top:0;height:calc(100vh - 28px - env(safe-area-inset-top,0px));}.pc-topbar{top:0}.demo-note,.demo-page-head{margin-left:0;margin-right:0} }
@media (max-width:700px) { .demo-steps{grid-template-columns:1fr 1fr}.demo-steps button{min-height:100px} }
@media (max-width:560px) { .demo-donut-wrap{flex-direction:column;align-items:stretch}.demo-donut{align-self:center;width:170px;height:170px}.demo-months{height:190px;gap:3px}.demo-months i{width:12px}.demo-months strong{font-size:8px;transform:rotate(-45deg);transform-origin:center}.demo-sector-config{grid-template-columns:1fr} }