/* ==================== 段落セクション ==================== */
#robin-chara-root {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.chara-sections { display: flex; flex-direction: column; gap: 18px; max-width: 100%; min-width: 0; box-sizing: border-box; }
.chara-toc-slot {
  display: block;
  width: 100%;
  max-width: 100%;
  clear: both;
  float: none;
  margin: 0 0 20px;
  text-align: center;
}
.chara-toc-slot .toc,
#robin-chara-root .toc,
#robin-chara-root .toc-center {
  display: table !important;
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  position: static !important;
  margin: 0 auto !important;
  text-align: left;
  clear: both;
}
#robin-chara-root .chara-section {
  clear: both;
  float: none;
  width: 100%;
}
.chara-section { display: block; scroll-margin-top: 120px; }
.chara-section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.chara-section.is-collapsible {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.chara-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 18px;
  position: relative;
  z-index: 1;
  min-height: 40px;
  box-sizing: border-box;
  border-bottom: none;
  background: #eaf4fc;
}
.chara-section-head .chara-section-title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 88px);
  position: relative;
  z-index: 1;
}
.chara-section-head .skill-detail-btn {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  margin: 0 0 0 auto;
  align-self: center;
}
.chara-section.is-collapsible .chara-section-title,
.chara-section.is-always-open .chara-section-title {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  font-size: 24px;
  font-weight: bold;
  color: #111;
  border: none;
  padding: 0;
  background: transparent;
}
.chara-section-body { display: none; padding: 10px 0 18px; border-top: none; }
.chara-section.is-open .chara-section-body,
.chara-section.is-always-open .chara-section-body { display: block; padding-top: 12px; }
.chara-section.is-always-open {
  background: transparent;
  border: none;
  clear: both;
  margin-top: 0;
  padding-top: 0;
  position: relative;
  z-index: 0;
}
.chara-section.is-open > .chara-section-head .skill-detail-btn { background: #e8e8e8; color: #111; }
.chara-subhead { display: none; }

.tab-placeholder {
  padding: 60px 20px;
  text-align: center;
  color: #8a96a3;
  background: #121620;
  border-radius: 8px;
  font-size: 14px;
}

.basic-info-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 16px; }
@media (max-width: 800px) { .basic-info-grid { grid-template-columns: 1fr; } }
.basic-panel { background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 8px 16px; }
.basic-profile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .basic-profile { grid-template-columns: 1fr; }
  .basic-profile-band { grid-template-columns: 1fr; }
  .basic-profile-band .basic-row:empty { display: none; }
}
.basic-panel-title { font-size: 13px; letter-spacing: 0; color: #111; margin: 8px 0 4px; font-weight: bold; }
.basic-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ccc; font-size: 14px; }
.basic-row:last-child { border-bottom: none; }
.basic-profile-band {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
  background: #e8e8e8;
}
.basic-label { color: #111; }
.basic-val { color: #e60012; font-weight: bold; text-align: right; }
.trait-tag {
  cursor: pointer;
  border-bottom: 1px dotted #e60012;
}
#trait-flytip {
  position: fixed;
  z-index: 20;
  display: none;
  left: 0;
  top: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 8px 10px;
  font-size: 12px;
  color: #111;
  max-width: min(420px, 92vw);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
#trait-flytip.open { display: block; }
.trait-flytip-title { font-weight: bold; margin-bottom: 8px; }
.trait-flytip-heroes { display: flex; flex-wrap: wrap; gap: 8px; }
.trait-flytip-hero { width: 52px; text-align: center; }
.trait-flytip-hero img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  background: #eee;
}
.trait-flytip-hero span {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  margin-top: 2px;
  color: #111;
  font-weight: normal;
}
.basic-patrons { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.basic-patrons a {
  display: block;
  line-height: 0;
  text-decoration: none;
  border: none;
}
.basic-patrons img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  cursor: pointer;
}
.stat-head,
.stat-row {
  display: grid;
  grid-template-columns: 7.2em 1fr 1fr 1fr 3.8em 5.2em;
  gap: 6px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid #ccc;
  font-size: 12px;
}
.stat-panel .stat-row:nth-child(even) {
  background: #e8e8e8;
}
.stat-head {
  font-weight: bold;
  color: #111;
  border-bottom: 1px solid #111;
  text-align: center;
}
.stat-head span,
.stat-row .basic-label,
.stat-result { text-align: center; }
.stat-add-btn {
  background: #fff;
  border: 1px solid #ccc;
  color: #111;
  border-radius: 0;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.stat-add-btn:hover { background: #e8e8e8; }
.stat-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 12px;
  color: #111;
  background: #fff;
  text-align: center;
}
.skill-observed {
  display: inline-block;
  width: 9.5em;
  min-width: 9.5em;
  max-width: 9.5em;
  margin-left: 6px;
  padding: 2px 4px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
}
.dmg-panel .stat-input {
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.dmg-panel > .basic-row:nth-child(even) {
  background: #e8e8e8;
}
.dmg-panel > .basic-row:nth-child(2),
.dmg-panel > .basic-row:nth-child(3),
.dmg-panel > .basic-row:nth-child(4) {
  font-size: 13px;
}
.dmg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 8px;
}
.dmg-reset-btn,
.dmg-freeze-btn,
.pet-toggle {
  background: #fff;
  border: 1px solid #ccc;
  color: #111;
  border-radius: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.dmg-freeze-btn.is-on,
.pet-toggle.is-on {
  background: #e8e8e8;
  border-color: #111;
}
.pet-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 8px;
}
.pet-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.pet-toggle.is-shown { display: inline-flex; }
.pet-toggle img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #f3efe4;
}
.basic-skill-list { margin-top: 16px; }
.basic-skill-list .skill-row[data-color="white"],
.basic-skill-list .skill-row[data-color="auto"],
.basic-skill-list .skill-row[data-color="green"],
.basic-skill-list .skill-row[data-color="violet"] {
  background: #fff;
}
.basic-skill-list .skill-row[data-color="green"] {
  background: #e8e8e8;
}

/* ==================== 計算機 共通スタイル（グリフ・アーティファクト共通） ==================== */
.calc-container, .calc-container * { box-sizing: border-box; }
.calc-container { width: 100%; max-width: 100%; margin: 0 auto 30px; color: #111; font-family: inherit; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.calc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) {
  .calc-grid-3 { grid-template-columns: 1fr; }
}
.calc-card { background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.calc-card select { width: 100%; margin-bottom: 10px; padding: 5px 6px; border-radius: 0; background: #fff; color: #111; border: 1px solid #ccc; font-size: 12px; }

.calc-icon-badge { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 10px; border: 2px solid rgba(255,255,255,0.25); box-shadow: 0 0 12px rgba(0,0,0,0.4) inset; }
.calc-icon-badge.bonus1 { background: radial-gradient(circle at 35% 30%, #3fae5c, #1c5c32); }
.calc-icon-badge.bonus2 { background: radial-gradient(circle at 35% 30%, #33a06f, #1a5c40); }
.calc-icon-badge.bonus3 { background: radial-gradient(circle at 35% 30%, #e08a3c, #7a4415); }
.calc-icon-badge.bonus4 { background: radial-gradient(circle at 35% 30%, #6a6ee0, #2b2d6e); }
.calc-icon-badge.bonus5 { background: radial-gradient(circle at 35% 30%, #4aa3d8, #1f5578); }
.calc-icon-badge.weapon { background: radial-gradient(circle at 35% 30%, #d15b5b, #6e1f1f); }
.calc-icon-badge.book { background: radial-gradient(circle at 35% 30%, #8a6ed1, #3a2a6e); }
.calc-icon-badge.ring { background: radial-gradient(circle at 35% 30%, #4ac0a0, #1f6e56); }

.calc-title { font-size: 15px; font-weight: bold; margin-bottom: 10px; }

.calc-stat-line { width: 100%; display: flex; justify-content: space-between; font-size: 13px; color: #111; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #ccc; }
.calc-stat-line .calc-val { color: #e60012; font-weight: bold; font-size: 15px; }
.calc-stat-line.success-rate .calc-val { color: #7de88a; }

.calc-slider-group { width: 100%; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.calc-lv-label { width: 60px; font-size: 12px; font-weight: bold; color: #e60012; text-align: left; flex-shrink: 0; }
.calc-card input[type="range"] { flex: 1; min-width: 0; }
.calc-btn-step { width: 24px; height: 24px; background: #fff; border: 1px solid #ccc; color: #111; border-radius: 0; font-size: 13px; font-weight: bold; cursor: pointer; flex-shrink: 0; }
.calc-btn-step:hover { background: #e8e8e8; }

.calc-resource-list { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.calc-res-item { background: #f3efe4; border: 1px solid #ccc; border-radius: 0; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: bold; color: #111; }
.calc-res-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.calc-res-icon.gold { background: radial-gradient(circle at 35% 30%, #ffe08a, #c9941f); }
.calc-res-icon.point { background: radial-gradient(circle at 35% 30%, #7de88a, #1f8a3a); }
.calc-res-icon.fragment { background: radial-gradient(circle at 35% 30%, #c98aff, #6a1fc9); }
.calc-res-icon.newmat { background: radial-gradient(circle at 35% 30%, #6ab8ff, #1c5d99); }
.calc-res-icon.coin { background: radial-gradient(circle at 35% 30%, #ffe08a, #c9941f); }
.calc-res-icon.chaos { background: radial-gradient(circle at 35% 30%, #ff9a6a, #c9491f); }

.calc-total-row { background: #f3efe4; border: 1px solid #ccc; border-radius: 0; padding: 12px 16px; display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; font-weight: bold; margin-bottom: 20px; color: #111; }
.calc-total-row .calc-total-val { color: #e60012; }

/* ==================== 補足情報セクション（アンロック条件・レベル上限・グラフ） ==================== */
.calc-info-section { background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 18px 20px; color: #111; }
.calc-info-section h3 { font-size: 15px; margin: 0 0 10px; color: #111; border-bottom: 1px solid #ccc; padding-bottom: 8px; }
.calc-info-section h3:not(:first-child) { margin-top: 20px; }
.calc-info-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 4px; }
.calc-info-table th, .calc-info-table td { padding: 6px 10px; border: 1px solid #ccc; text-align: center; }
.calc-info-table th { background: #e8e8e8; color: #111; }
.calc-info-table td { color: #111; background: #fff; }
.calc-info-note { font-size: 12px; color: #111; margin-top: 6px; }

.calc-chart-wrap { margin-top: 10px; overflow-x: auto; }
.calc-chart-wrap svg { display: block; width: 100%; height: auto; }
.calc-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px; }
.calc-chart-legend span { display: flex; align-items: center; gap: 5px; }
.calc-chart-legend .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ==================== 追加：スペーサー・情報テーブル調整 ==================== */
.calc-stat-line.spacer { visibility: hidden; }
.table-wrapper { overflow-x: auto; }
.calc-info-table tr.table-total { font-weight: bold; background: #f3efe4 !important; color: #e60012; }
.calc-info-table tr.table-total td { background: #f3efe4 !important; color: #e60012 !important; }

.patchnote-list { margin: 0; padding-left: 26px; font-size: 16px; color: #111; line-height: 1.9; list-style: decimal; }
.patchnote-list li { margin-bottom: 12px; }
.patchnote-list li::marker { color: #111; font-weight: bold; }
.patch-item { display: flex; gap: 12px; align-items: flex-start; }
.patch-icon {
  width: 56px; height: 56px; object-fit: cover; flex-shrink: 0;
  border-radius: 0; border: 1px solid #ccc; background: #f3efe4;
}
.patch-body { min-width: 0; flex: 1; }
.patch-title { font-weight: bold; color: #111; margin-bottom: 4px; }
.patch-body ul { margin: 4px 0 0; padding-left: 18px; }
.patch-body p { margin: 4px 0 0; font-size: 13px; color: #111; }
.patch-body strong { color: #e60012; }

.wisdom-card, .evolution-card, .exp-card, .gift-card { }
.wisdom-stats-wrap, .gift-stats-wrap { width: 100%; }
.calc-spacer-select { width: 100%; margin-bottom: 10px; padding: 5px 6px; font-size: 12px; visibility: hidden; }

/* ==================== アーティファクト：2列コスト表示 ==================== */
.calc-resource-list.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: 6px;
}

/* ==================== アイテムタブ ==================== */
.item-tab-wrap { width: 100%; max-width: 100%; margin: 0 auto; color: #111; font-family: inherit; }
.item-box-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
@media (max-width: 960px) { .item-box-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .item-box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item-box {
  background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 10px; position: relative; color: #111;
}
.item-box-title { text-align: center; font-size: 13px; font-weight: bold; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #ccc; cursor: help; }
.item-box.rarity-white .item-box-title { color: #555; }
.item-box.rarity-green .item-box-title { color: #2e7d32; }
.item-box.rarity-blue .item-box-title { color: #1565c0; }
.item-box.rarity-violet .item-box-title { color: #6a1b9a; }
.item-box.rarity-orange .item-box-title { color: #e65100; }
.item-box.rarity-red .item-box-title { color: #c62828; }
.item-icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 6px;
  justify-items: center;
}
.item-slot { position: relative; width: 63px; height: 63px; background: #f3efe4; border-radius: 0; display: flex; align-items: center; justify-content: center; cursor: help; border: 1px solid #ccc; overflow: hidden; }
.item-slot img { width: 63px; height: 63px; object-fit: contain; display: block; pointer-events: none; border-radius: 0; }
.item-slot.rarity-white { border-color: #9aa3b5; }
.item-slot.rarity-green { border-color: #3d8f4a; }
.item-slot.rarity-blue { border-color: #2f6fb8; }
.item-slot.rarity-violet { border-color: #7a3db8; }
.item-slot.rarity-orange { border-color: #c47a12; }
.item-slot.rarity-red { border-color: #c43a3a; }
.item-slot.rarity-rainbow { border-color: #5ec8d8; }
.item-slot[data-count]:not([data-count="1"])::after {
  content: attr(data-count);
  position: absolute; bottom: 2px; right: 3px;
  background: #fff; color: #111;
  font-size: 10px; font-weight: bold; border-radius: 3px; padding: 0 3px; z-index: 1;
}
#item-flytip {
  position: fixed; z-index: 20; display: none; left: 0; top: 0;
  background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 8px 10px;
  font-size: 15px; color: #111; white-space: normal; pointer-events: none; max-width: min(560px, 92vw);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.item-flytip-line { line-height: 1.45; }
#item-flytip.open { display: block; }
.item-flytip-name { font-weight: bold; color: #e60012; margin-bottom: 4px; }
.item-flytip-stats { line-height: 1.45; }
.item-flytip-cost { margin-top: 6px; color: #111; }
.item-flytip-craft { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: flex-end; }
.item-flytip-ing {
  position: relative; width: 40px; height: 40px; display: block;
  background: #f3efe4; border: 1px solid #ccc; border-radius: 0; overflow: hidden;
}
.item-flytip-ing img { width: 40px; height: 40px; object-fit: contain; display: block; }
.item-flytip-ing b {
  position: absolute; bottom: 0; right: 2px;
  color: #e60012; font-size: 10px; text-shadow: none;
}
.item-flytip-ing.is-text {
  width: auto; height: auto; min-height: 40px; max-width: 88px;
  padding: 4px 5px; font-size: 15px; line-height: 1.3; color: #111;
  overflow: hidden;
}
.item-total-row { background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 14px; margin-bottom: 16px; color: #111; }
.item-total-row h3,
.item-total-row .item-total-title { font-size: 14px; color: #111; margin: 0 0 10px; letter-spacing: 0; font-weight: bold; }
#robin-chara-root #item-total-note { font-size: 15px; margin-bottom: 0; }
#robin-chara-root .item-total-row { padding-bottom: 6px; }
.item-total-list { display: flex; flex-wrap: wrap; gap: 8px; }
.item-total-list .item-slot { width: 46px; height: 46px; }
.item-total-list .item-slot img { width: 46px; height: 46px; }

/* ==================== スキンタブ ==================== */
.skin-card-image { width: 100%; aspect-ratio: 3/4; background: #f3efe4; border-radius: 0; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; font-size: 40px; cursor: zoom-in; overflow: hidden; }
.skin-card-image img { width: 100%; height: 100%; object-fit: cover; }
.skin-stone-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  display: block;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  border-radius: 0;
  max-width: none;
}
.skin-date-row { width: 100%; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #111; margin-bottom: 10px; text-align: left; }
.skin-card { height: 100%; }
.skin-card .calc-slider-group { margin-top: auto; }
.skin-date-row div { background: #f3efe4; border: 1px solid #ccc; color: #111; border-radius: 0; padding: 6px 8px; }

.skin-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
}
.skin-lightbox.open { display: flex; }
.skin-lightbox img { max-width: 80%; max-height: 80%; border-radius: 8px; position: relative; z-index: 1; }
.skin-lightbox .lb-close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; background: rgba(0,0,0,0.45); border: none; z-index: 2; padding: 4px 10px; border-radius: 4px; }
.skin-lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 36px; color: #fff; background: rgba(0,0,0,0.45); border: none; cursor: pointer; padding: 10px; z-index: 2; border-radius: 4px; }
.skin-lightbox .lb-prev { left: 16px; }
.skin-lightbox .lb-next { right: 16px; }

/* ==================== カード上部バッジ画像 ==================== */
.calc-badge-image {
  width: 104px;
  height: 104px;
  border-radius: 0;
  object-fit: contain;
  margin-bottom: 10px;
  display: block;
  background: #f3efe4;
}

/* ==================== アセンション ==================== */
.asc-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.asc-col {
  align-items: stretch;
  text-align: left;
  min-width: 0;
}
.asc-col .calc-title { width: 100%; text-align: center; }
.asc-col .calc-stat-line { margin-bottom: 4px; padding-bottom: 4px; font-size: 12px; }
.asc-col .asc-costs { margin-top: auto; width: 100%; }
.asc-cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
}
.asc-col-total { border-color: #d19a5b; }
@media (max-width: 800px) {
  .asc-board { grid-template-columns: 1fr; }
}

/* ==================== スキルタブ ==================== */
.skill-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.skill-row { background: #121620; border: 1px solid #232a3b; border-radius: 10px; overflow: hidden; }
.skill-head {
  width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left;
  background: transparent; border: none; color: inherit; padding: 14px 16px;
}
.skill-detail-btn {
  flex-shrink: 0; align-self: flex-start; margin-top: 2px;
  background: #fff; border: 1px solid #ccc; color: #111;
  border-radius: 0; padding: 6px 12px; font-size: 12px; font-weight: bold; cursor: pointer;
  box-shadow: none;
}
.skill-detail-btn:hover { background: #e8e8e8; color: #111; }
.skill-row.open .skill-detail-btn { background: #e8e8e8; color: #111; }
.skill-icon { width: 96px; height: 96px; border-radius: 0; object-fit: cover; flex-shrink: 0; background: #090b0f; }
.skill-head-text { flex: 1; min-width: 0; }
.skill-name { font-size: 16px; font-weight: bold; margin-bottom: 6px; color: #fff; }
.skill-cd { font-size: 15px; font-weight: bold; color: #111; line-height: 1.6; margin-bottom: 4px; }
.skill-desc { font-size: 15px; color: #a0acba; line-height: 1.6; }
.skill-sub { font-size: 15px; font-weight: bold; color: #a0acba; line-height: 1.6; margin-top: 8px; }
.skill-hl { color: #39B474; font-weight: bold; }
.skill-hl.skill-hl-green { color: #39B474; }
.skill-lv-row { padding: 0 16px 14px; }
.skill-detail { display: block; padding: 0 16px 16px; border-top: 1px solid #232a3b; padding-top: 14px; }
.skill-row.open .skill-detail { display: block; }
.skill-meta-table { font-size: 12px; margin-bottom: 12px; }
.skill-meta-table tr:nth-child(3) th { border-top-width: 1px; }
.skill-media { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.skill-media label, .skill-comment-label { font-size: 12px; color: #a0acba; display: flex; flex-direction: column; gap: 4px; }
.skill-media input, .skill-comment {
  width: 100%; background: #0c0e14; border: 1px solid #232a3b; color: #cad1db;
  border-radius: 4px; padding: 6px 8px; font-size: 12px; font-family: inherit;
}
.skill-media-preview img, .skill-media-preview video { max-width: 100%; border-radius: 8px; margin-top: 6px; }

/* ==================== 育成タブ ==================== */
.train-section { margin-bottom: 16px; }
.train-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.train-item { width: 96px; text-align: center; }
.train-item img {
  width: 96px; height: 96px; object-fit: contain; display: block;
  background: #090b0f; border: 1px solid #232a3b; border-radius: 8px;
  padding: 0; box-shadow: none;
}
.train-cap { margin-top: 6px; font-size: 12px; color: #111; }
.train-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; }
.train-tags span {
  display: inline-block; font-size: 10px; background: #232a3b; color: #d19a5b;
  border: 1px solid #343f56; border-radius: 3px; padding: 1px 6px; line-height: 1.4;
}

/* ==================== チーム編成 ==================== */
.team-block {
  background: #121620; border: 1px solid #232a3b; border-radius: 10px;
  margin-bottom: 12px; padding: 14px 16px;
}
.team-block .team-top { display: flex; align-items: flex-start; gap: 12px; }
.team-block .skill-detail-btn { flex-shrink: 0; }
.team-portraits { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.team-hero, .team-pet { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.team-hero-img, .team-pet-img {
  width: 88px; height: 88px; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid #232a3b; background: #090b0f;
}
.team-support-pet {
  position: absolute; top: -4px; left: -4px;
  width: 32px; height: 32px; object-fit: cover; display: block;
  border-radius: 50%; border: 2px solid #121620; background: #090b0f;
  z-index: 1;
}
.team-detail { display: none !important; margin-top: 12px; padding-top: 12px; border-top: 1px solid #232a3b; }
.team-block.is-open .team-detail { display: block !important; }
.team-block.is-open .skill-detail-btn { background: #e8e8e8; color: #111; }
.team-detail h3 { font-size: 15px; color: #d19a5b; margin: 0 0 8px; }

.analysis-list { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; color: #333; }

/* ==================== Byrnaページ寄せ（全体） ==================== */
.chara-sections {
  color: #111;
  background: transparent;
  font-family: inherit;
  gap: 22px;
  position: relative;
  z-index: 0;
  max-width: 100%;
  margin-top: 0;
  padding-top: 0;
  box-sizing: border-box;
}
.chara-sections .calc-container,
.chara-sections .item-tab-wrap { color: #111; font-family: inherit; }
.chara-sections .skill-row,
.chara-sections .calc-card,
.chara-sections .basic-panel,
.chara-sections .calc-info-section,
.chara-sections .item-box,
.chara-sections .item-total-row,
.chara-sections .team-block {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #111;
  box-shadow: none;
}
.chara-sections .basic-skill-list .skill-row[data-color="white"],
.chara-sections .basic-skill-list .skill-row[data-color="auto"],
.chara-sections .basic-skill-list .skill-row[data-color="green"],
.chara-sections .basic-skill-list .skill-row[data-color="violet"] {
  background: #fff;
}
.chara-sections .basic-skill-list .skill-row[data-color="green"] {
  background: #e8e8e8;
}
.chara-sections .chara-section-body { border-top: none; }
.chara-sections .chara-section.is-collapsible .chara-section-title,
.chara-sections .skill-name,
.chara-sections .calc-title,
.chara-sections .patch-title,
.chara-sections .basic-panel-title { color: #111; font-weight: bold; }
.chara-sections .basic-panel-title {
  display: block;
  margin: 8px 0 4px;
  font-size: 13px;
  letter-spacing: 0;
  color: #111;
}
.chara-sections .skill-cd { font-size: 15px; font-weight: bold; color: #111; }
.chara-sections .skill-desc { font-size: 15px; }
.chara-sections .skill-sub { font-size: 15px; font-weight: bold; }
.chara-sections .skill-desc,
.chara-sections .skill-sub,
.chara-sections .calc-info-note,
.chara-sections .basic-label,
.chara-sections .calc-stat-line,
.chara-sections .patch-body p,
.chara-sections .analysis-list { color: #111; border-bottom-color: #ddd; }
.chara-sections .skill-hl { color: #39B474; }
.chara-sections .skill-hl.skill-hl-green { color: #39B474; }
.chara-sections .basic-val,
.chara-sections .calc-val,
.chara-sections .calc-lv-label,
.chara-sections .calc-total-val,
.chara-sections .patch-body strong { color: #e60012; }
.chara-sections .calc-total-row,
.chara-sections .calc-res-item {
  background: #f3efe4;
  color: #111;
  border: 1px solid #ccc;
  border-radius: 0;
}
.chara-sections .calc-info-table th {
  background: #e8e8e8;
  color: #111;
  border: 1px solid #ccc;
}
.chara-sections .calc-info-table td {
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
}
.chara-sections .calc-info-table tr.table-total,
.chara-sections .calc-info-table tr.table-total td {
  background: #f3efe4;
  color: #e60012;
}
.chara-sections .skill-meta-table tr:nth-child(3) th { border-top: 1px solid #ccc; }
.chara-sections .calc-card select,
.chara-sections .skill-media input,
.chara-sections .skill-comment {
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
}
.chara-sections .calc-btn-step {
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
}
.chara-sections .skill-detail-btn,
.chara-section-head .skill-detail-btn,
#tab-item .chara-section-head .skill-detail-btn,
#tab-glyph .chara-section-head .skill-detail-btn,
#tab-artifact .chara-section-head .skill-detail-btn,
#tab-ascension .chara-section-head .skill-detail-btn,
#tab-wisdom .chara-section-head .skill-detail-btn,
#tab-evolution .chara-section-head .skill-detail-btn,
#tab-patchnote .chara-section-head .skill-detail-btn {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
}
.chara-sections .chara-section.is-open > .chara-section-head .skill-detail-btn,
.chara-sections .team-block.is-open .skill-detail-btn,
#tab-item.is-open > .chara-section-head .skill-detail-btn,
#tab-glyph.is-open > .chara-section-head .skill-detail-btn,
#tab-artifact.is-open > .chara-section-head .skill-detail-btn,
#tab-ascension.is-open > .chara-section-head .skill-detail-btn,
#tab-wisdom.is-open > .chara-section-head .skill-detail-btn,
#tab-evolution.is-open > .chara-section-head .skill-detail-btn,
#tab-patchnote.is-open > .chara-section-head .skill-detail-btn {
  background: #e8e8e8 !important;
  color: #111 !important;
}
.chara-sections .patchnote-list { color: #111; list-style: decimal; }
.chara-sections .patchnote-list li::marker { color: #111; }
.chara-sections .basic-patrons img,
.chara-sections .patch-icon,
.chara-sections .team-hero-img,
.chara-sections .item-slot,
.chara-sections .skin-card-image {
  background: #f3efe4;
  border-color: #ccc;
}
.chara-sections .skill-head { color: #111; }
.chara-sections .basic-row { border-bottom-color: #ddd; }
.chara-sections .team-detail { border-top-color: #ccc; }
.chara-sections .item-box-title { border-bottom-color: #ccc; }
.chara-sections .item-box.rarity-white .item-box-title { color: #555; }
.chara-sections .item-slot[data-count]:not([data-count="1"])::after {
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
}
.chara-sections .skin-date-row { color: #111; }
.chara-sections .skin-date-row div {
  background: #f3efe4;
  border: 1px solid #ccc;
  color: #111;
}
#item-flytip {
  background: #fff;
  border: 1px solid #ccc;
  color: #111;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.item-flytip-name { color: #e60012; }
.item-flytip-cost { color: #111; }
.item-flytip-ing { background: #f3efe4; border-color: #ccc; }
.item-flytip-ing b { color: #e60012; text-shadow: none; }
.item-flytip-ing.is-text { color: #111; }

.chara-sections h2.chara-section-title,
.chara-sections .chara-section-head h2,
body .entry-content .chara-sections h2.chara-section-title {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  color: #111 !important;
  text-indent: 0 !important;
  position: relative !important;
}
.chara-sections h2.chara-section-title::before,
.chara-sections h2.chara-section-title::after,
.chara-sections .chara-section-head h2::before,
.chara-sections .chara-section-head h2::after,
body .entry-content .chara-sections h2::before,
body .entry-content .chara-sections h2::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

#tab-item h2,
#tab-glyph h2,
#tab-artifact h2,
#tab-ascension h2,
#tab-wisdom h2,
#tab-evolution h2,
#tab-patchnote h2,
#tab-item h3,
#tab-glyph h3,
#tab-artifact h3,
#tab-ascension h3,
#tab-wisdom h3,
#tab-evolution h3,
#tab-patchnote h3,
#tab-item .chara-subhead,
#tab-glyph .chara-subhead,
#tab-artifact .chara-subhead,
#tab-ascension .chara-subhead,
#tab-wisdom .chara-subhead,
#tab-evolution .chara-subhead,
#tab-patchnote .chara-subhead {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  text-indent: 0 !important;
}
#tab-item h2::before, #tab-item h2::after,
#tab-glyph h2::before, #tab-glyph h2::after,
#tab-artifact h2::before, #tab-artifact h2::after,
#tab-ascension h2::before, #tab-ascension h2::after,
#tab-wisdom h2::before, #tab-wisdom h2::after,
#tab-evolution h2::before, #tab-evolution h2::after,
#tab-patchnote h2::before, #tab-patchnote h2::after,
#tab-item h3::before, #tab-item h3::after,
#tab-glyph h3::before, #tab-glyph h3::after,
#tab-artifact h3::before, #tab-artifact h3::after,
#tab-ascension h3::before, #tab-ascension h3::after,
#tab-wisdom h3::before, #tab-wisdom h3::after,
#tab-evolution h3::before, #tab-evolution h3::after,
#tab-patchnote h3::before, #tab-patchnote h3::after,
#tab-item .chara-subhead::before, #tab-item .chara-subhead::after,
#tab-glyph .chara-subhead::before, #tab-glyph .chara-subhead::after,
#tab-artifact .chara-subhead::before, #tab-artifact .chara-subhead::after,
#tab-ascension .chara-subhead::before, #tab-ascension .chara-subhead::after,
#tab-wisdom .chara-subhead::before, #tab-wisdom .chara-subhead::after,
#tab-evolution .chara-subhead::before, #tab-evolution .chara-subhead::after,
#tab-patchnote .chara-subhead::before, #tab-patchnote .chara-subhead::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: none !important;
}

/* アイテム〜パッチノート：暗い指定を確実に上書き */
#tab-item,
#tab-skin,
#tab-glyph,
#tab-artifact,
#tab-ascension,
#tab-wisdom,
#tab-evolution,
#tab-patchnote {
  color: #111 !important;
  background: transparent !important;
  border: none !important;
}
#tab-item .chara-section-body,
#tab-skin .chara-section-body,
#tab-glyph .chara-section-body,
#tab-artifact .chara-section-body,
#tab-ascension .chara-section-body,
#tab-wisdom .chara-section-body,
#tab-evolution .chara-section-body,
#tab-patchnote .chara-section-body {
  background: transparent !important;
  color: #111 !important;
  border-top: none !important;
}
#tab-item .chara-subhead,
#tab-skin .chara-subhead,
#tab-glyph .chara-subhead,
#tab-artifact .chara-subhead,
#tab-ascension .chara-subhead,
#tab-wisdom .chara-subhead,
#tab-evolution .chara-subhead,
#tab-patchnote .chara-subhead {
  display: block !important;
  font-size: 15px;
  font-weight: bold;
  color: #111 !important;
  margin: 12px 0 8px;
}
#tab-item .item-tab-wrap,
#tab-item .item-box,
#tab-item .item-total-row,
#tab-item .calc-info-section,
#tab-skin .calc-card,
#tab-skin .calc-info-section,
#tab-glyph .calc-card,
#tab-glyph .calc-info-section,
#tab-artifact .calc-card,
#tab-artifact .calc-info-section,
#tab-ascension .calc-card,
#tab-ascension .calc-info-section,
#tab-wisdom .calc-card,
#tab-wisdom .calc-info-section,
#tab-evolution .calc-card,
#tab-evolution .calc-info-section,
#tab-patchnote .calc-info-section {
  background: #fff !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .item-slot,
#tab-skin .skin-card-image,
#tab-skin .skin-date-row div,
#tab-glyph .calc-badge-image,
#tab-artifact .calc-badge-image,
#tab-item .calc-res-item,
#tab-skin .calc-res-item,
#tab-glyph .calc-res-item,
#tab-artifact .calc-res-item,
#tab-ascension .calc-res-item,
#tab-wisdom .calc-res-item,
#tab-evolution .calc-res-item,
#tab-glyph .calc-total-row,
#tab-artifact .calc-total-row,
#tab-ascension .calc-total-row,
#tab-wisdom .calc-total-row,
#tab-evolution .calc-total-row,
#tab-skin .calc-total-row {
  background: #f3efe4 !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .item-box.rarity-white .item-box-title { color: #555 !important; }
#tab-item .item-box.rarity-green .item-box-title { color: #2e7d32 !important; }
#tab-item .item-box.rarity-blue .item-box-title { color: #1565c0 !important; }
#tab-item .item-box.rarity-violet .item-box-title { color: #6a1b9a !important; }
#tab-item .item-box.rarity-orange .item-box-title { color: #e65100 !important; }
#tab-item .item-box.rarity-red .item-box-title { color: #c62828 !important; }
#tab-skin .calc-title,
#tab-glyph .calc-title,
#tab-artifact .calc-title,
#tab-ascension .calc-title,
#tab-wisdom .calc-title,
#tab-evolution .calc-title,
#tab-patchnote .patch-title {
  color: #111 !important;
  border-bottom-color: #ccc !important;
}
#tab-item select,
#tab-skin select,
#tab-glyph select,
#tab-artifact select,
#tab-ascension select,
#tab-wisdom select,
#tab-evolution select {
  background: #fff !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .calc-val,
#tab-skin .calc-val,
#tab-glyph .calc-val,
#tab-artifact .calc-val,
#tab-ascension .calc-val,
#tab-wisdom .calc-val,
#tab-evolution .calc-val,
#tab-item .calc-lv-label,
#tab-skin .calc-lv-label,
#tab-glyph .calc-lv-label,
#tab-artifact .calc-lv-label,
#tab-ascension .calc-lv-label,
#tab-wisdom .calc-lv-label,
#tab-evolution .calc-lv-label,
#tab-item .calc-total-val,
#tab-skin .calc-total-val,
#tab-glyph .calc-total-val,
#tab-artifact .calc-total-val,
#tab-ascension .calc-total-val,
#tab-wisdom .calc-total-val,
#tab-evolution .calc-total-val,
#tab-patchnote .patch-body strong {
  color: #e60012 !important;
}
#tab-item .calc-info-table th,
#tab-skin .calc-info-table th,
#tab-glyph .calc-info-table th,
#tab-artifact .calc-info-table th,
#tab-ascension .calc-info-table th,
#tab-wisdom .calc-info-table th,
#tab-evolution .calc-info-table th,
#tab-patchnote .calc-info-table th {
  background: #e8e8e8 !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .calc-info-table td,
#tab-skin .calc-info-table td,
#tab-glyph .calc-info-table td,
#tab-artifact .calc-info-table td,
#tab-ascension .calc-info-table td,
#tab-wisdom .calc-info-table td,
#tab-evolution .calc-info-table td,
#tab-patchnote .calc-info-table td {
  background: #fff !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .calc-info-table tr.table-total td,
#tab-glyph .calc-info-table tr.table-total td,
#tab-artifact .calc-info-table tr.table-total td,
#tab-ascension .calc-info-table tr.table-total td,
#tab-wisdom .calc-info-table tr.table-total td,
#tab-evolution .calc-info-table tr.table-total td {
  background: #f3efe4 !important;
  color: #e60012 !important;
}
#tab-item .calc-stat-line,
#tab-skin .calc-stat-line,
#tab-glyph .calc-stat-line,
#tab-artifact .calc-stat-line,
#tab-ascension .calc-stat-line,
#tab-wisdom .calc-stat-line,
#tab-evolution .calc-stat-line,
#tab-item .calc-info-note,
#tab-skin .calc-info-note,
#tab-glyph .calc-info-note,
#tab-artifact .calc-info-note,
#tab-ascension .calc-info-note,
#tab-wisdom .calc-info-note,
#tab-evolution .calc-info-note,
#tab-patchnote .patch-body p,
#tab-patchnote .patchnote-list {
  color: #111 !important;
  border-bottom-color: #ccc !important;
  list-style: decimal;
}
#robin-chara-root .patchnote-list .patch-date {
  font-weight: bold;
}
#robin-chara-root .patchnote-list a {
  color: #1565c0;
}
#tab-item .calc-btn-step,
#tab-skin .calc-btn-step,
#tab-glyph .calc-btn-step,
#tab-artifact .calc-btn-step,
#tab-ascension .calc-btn-step,
#tab-wisdom .calc-btn-step,
#tab-evolution .calc-btn-step {
  background: #fff !important;
  color: #111 !important;
  border-color: #ccc !important;
}

#tab-item .chara-section-head h2,
#tab-glyph .chara-section-head h2,
#tab-artifact .chara-section-head h2,
#tab-ascension .chara-section-head h2,
#tab-wisdom .chara-section-head h2,
#tab-evolution .chara-section-head h2,
#tab-patchnote .chara-section-head h2,
#tab-training .chara-section-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  max-width: calc(100% - 88px);
  color: #111 !important;
}
.article .entry-content .chara-sections h2:before,
.article .entry-content .chara-sections h2:after,
.article .entry-content #tab-item h2:before,
.article .entry-content #tab-item h2:after,
.article .entry-content #tab-glyph h2:before,
.article .entry-content #tab-glyph h2:after,
.article .entry-content #tab-artifact h2:before,
.article .entry-content #tab-artifact h2:after,
.article .entry-content #tab-ascension h2:before,
.article .entry-content #tab-ascension h2:after,
.article .entry-content #tab-wisdom h2:before,
.article .entry-content #tab-wisdom h2:after,
.article .entry-content #tab-evolution h2:before,
.article .entry-content #tab-evolution h2:after,
.article .entry-content #tab-patchnote h2:before,
.article .entry-content #tab-patchnote h2:after,
.article .entry-content #tab-basic h2:before,
.article .entry-content #tab-basic h2:after {
  content: none !important;
  display: none !important;
}

#tab-basic {
  display: block;
  max-width: 100%;
  margin-top: 0;
  position: relative;
  z-index: 0;
}
#tab-basic > .chara-section-head {
  display: none;
}
#tab-basic h2.chara-section-title,
#tab-basic .chara-section-head h2 {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100%;
}
#tab-basic h2::before,
#tab-basic h2::after {
  display: none !important;
  content: none !important;
}

.analysis-board {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.analysis-intro {
  margin: 0 0 20px;
  padding: 0;
  line-height: 1.7;
  font-size: 16px;
  color: #111;
}
.analysis-col-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  color: #111;
}
.analysis-heroes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.analysis-hero {
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: #f3efe4;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  padding: 4px;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}
.analysis-hero img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
}
.analysis-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
  color: #111;
}
.analysis-heroes:empty,
.analysis-list:empty { display: none; }
#robin-chara-root .skill-cast { margin: 4px 0 12px; }
#robin-chara-root #tab-skill .skill-row[data-color="white"] .skill-meta-table,
#robin-chara-root #tab-skill .skill-row[data-color="white"] .scrollable-table {
  margin-bottom: 0;
}
#robin-chara-root #tab-skill .skill-row[data-color="white"] .skill-cast {
  margin-top: 12px;
}
#robin-chara-root #tab-skill .skill-row[data-color="white"] .analysis-list {
  margin-top: 0;
}
#robin-chara-root #tab-skill .skill-row[data-color="white"] .analysis-heroes {
  margin-top: 0;
}
#robin-chara-root .skill-cast:not(:has(.analysis-hero, .analysis-list li)) { display: none; }
#robin-chara-root .skill-cast .analysis-hero[data-label]:not(:has(img)) {
  display: none;
}
#robin-chara-root .skill-cast .analysis-heroes:not(:has(img)) {
  display: none;
  margin: 0;
}
#robin-chara-root .skill-cast .analysis-hero[data-label]:not(:has(img))::after {
  content: attr(data-label);
}
#robin-chara-root .skill-cast .analysis-hero[data-label]:has(img) {
  padding: 0;
}
#robin-chara-root .skill-cast .analysis-hero[data-label]:has(img)::after {
  content: none;
}
#robin-chara-root .skill-cast .analysis-hero a {
  display: block;
  width: 100%;
  height: 100%;
}
#robin-chara-root .skill-cast .analysis-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
#robin-chara-root .analysis-hero.has-violet-frame,
#robin-chara-root .analysis-hero.has-green-frame,
#robin-chara-root .analysis-hero.has-blue-frame {
  position: relative;
}
#robin-chara-root .analysis-hero.has-violet-frame::before,
#robin-chara-root .analysis-hero.has-green-frame::before,
#robin-chara-root .analysis-hero.has-blue-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#robin-chara-root .analysis-hero.has-violet-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/violet-frame.webp);
}
#robin-chara-root .analysis-hero.has-green-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/green-frame.webp);
}
#robin-chara-root .analysis-hero.has-blue-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/blue-frame.webp);
}
#robin-chara-root #tab-analysis .analysis-hero:has(img) { padding: 0; }
#robin-chara-root #tab-analysis .analysis-hero a {
  display: block;
  width: 100%;
  height: 100%;
}
#robin-chara-root #tab-analysis .analysis-hero img {
  width: 100%;
  height: 100%;
}
#robin-chara-root .analysis-hero.has-violet-frame img,
#robin-chara-root .analysis-hero.has-green-frame img,
#robin-chara-root .analysis-hero.has-blue-frame img {
  position: absolute;
  left: 7.556%;
  top: 7.556%;
  width: 84.888% !important;
  height: 84.888% !important;
}
#robin-chara-root #tab-skill .skill-row[data-color="violet"] .skill-meta-table,
#robin-chara-root #tab-skill .skill-row[data-color="violet"] .scrollable-table {
  margin-bottom: 0;
}
#robin-chara-root #tab-skill .skill-row[data-color="violet"] .skill-cast,
#robin-chara-root #tab-skill .skill-row[data-color="green"] .skill-cast {
  margin-top: 10px;
}
#robin-chara-root #tab-skill .skill-row[data-color="violet"] .analysis-heroes,
#robin-chara-root #tab-skill .skill-row[data-color="green"] .analysis-heroes {
  margin-top: 0;
}
#robin-chara-root #tab-skill .skill-row[data-color="green"] .skill-meta-table,
#robin-chara-root #tab-skill .skill-row[data-color="green"] .scrollable-table {
  margin-bottom: 0;
}
#robin-chara-root .pet-chronicle-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0 2px 0 12px;
  flex: 0 0 auto;
  accent-color: #39B474;
}
#robin-chara-root .pet-boosts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 2px;
  width: 100%;
  max-width: 100%;
}
#robin-chara-root .pet-boost {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 3px 2px;
}
#robin-chara-root label.pet-boost { cursor: pointer; }
#robin-chara-root .pet-boost.is-stripe {
  background: #e8e8e8;
}
#robin-chara-root label.pet-boost:has(input:checked) {
  background: #f3efe4;
}
#robin-chara-root .pet-boost.is-buff:first-of-type {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #e4e4e4;
}
#robin-chara-root .pet-boost-face {
  width: 44px;
  height: 44px;
  position: relative;
  overflow: hidden;
  background: #f3efe4;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
#robin-chara-root .pet-boost-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#robin-chara-root .pet-boost-face.has-green-frame::before,
#robin-chara-root .pet-boost-face.has-violet-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#robin-chara-root .pet-boost-face.has-green-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/green-frame.webp);
}
#robin-chara-root .pet-boost-face.has-violet-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/violet-frame.webp);
}
#robin-chara-root .pet-boost-face.has-green-frame img,
#robin-chara-root .pet-boost-face.has-violet-frame img {
  position: absolute;
  left: 8.792%;
  top: 8.792%;
  width: 82.416% !important;
  height: 82.416% !important;
  object-fit: cover;
}
#robin-chara-root .pet-boost input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #39B474;
}
#robin-chara-root .pet-boost-name {
  min-width: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
  text-align: left;
  color: #111;
}
#robin-chara-root .pet-boost-step {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
#robin-chara-root .pet-boost-step .calc-btn-step {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 14px;
}
#robin-chara-root .pet-boost-pct {
  min-width: 2.8em;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #7A1515;
}

#tab-glyph .glyph-layout {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 18px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 20px;
  box-sizing: border-box;
}
#tab-glyph .glyph-layout .glyph-card {
  min-width: 0;
  width: 100%;
  max-width: 210px;
  justify-self: center;
  box-sizing: border-box;
}
#tab-glyph .glyph-layout .glyph-card[data-slot="5"] { grid-column: 1 / 3; grid-row: 1; }
#tab-glyph .glyph-layout .glyph-card[data-slot="1"] { grid-column: 3 / 5; grid-row: 1; }
#tab-glyph .glyph-layout .glyph-card[data-slot="2"] { grid-column: 5 / 7; grid-row: 1; }
#tab-glyph .glyph-layout .glyph-card[data-slot="4"] { grid-column: 2 / 4; grid-row: 2; }
#tab-glyph .glyph-layout .glyph-card[data-slot="3"] { grid-column: 4 / 6; grid-row: 2; }
@media (max-width: 700px) {
  #tab-glyph .glyph-layout { grid-template-columns: 1fr; max-width: 100%; }
  #tab-glyph .glyph-layout .glyph-card[data-slot] {
    grid-column: auto;
    grid-row: auto;
    max-width: 100%;
  }
}

/* rarity frames: parent is position:relative, frame is ::before (not extra img), z-index 1 only */
#robin-chara-root .chara-icon-box,
#robin-chara-root .item-slot {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
#robin-chara-root .chara-icon-box {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: top;
}
#robin-chara-root .skill-list .chara-icon-box {
  width: 96px;
  height: 96px;
}
#robin-chara-root .chara-icon-box--train {
  width: 96px;
  height: 96px;
}
#robin-chara-root .chara-icon-box--evo {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto 10px;
}
#robin-chara-root .chara-icon-box > img,
#robin-chara-root .item-slot > img,
#robin-chara-root .skill-icon,
#robin-chara-root .item-slot img {
  border-radius: 0;
}
#robin-chara-root .chara-icon-box > img,
#robin-chara-root .item-slot > img {
  position: absolute;
  max-width: none !important;
  margin: 0 !important;
  z-index: 0;
  object-fit: contain;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#robin-chara-root .chara-icon-box,
#robin-chara-root .item-slot {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
#robin-chara-root .chara-icon-box > img {
  left: 8.792%;
  top: 8.792%;
  width: 82.416% !important;
  height: 82.416% !important;
}
#robin-chara-root .item-slot > img {
  left: 7.568%;
  top: 7.568%;
  width: 84.864% !important;
  height: 84.864% !important;
}
#robin-chara-root .chara-icon-box::before,
#robin-chara-root .item-slot.rarity-white::before,
#robin-chara-root .item-slot.rarity-green::before,
#robin-chara-root .item-slot.rarity-blue::before,
#robin-chara-root .item-slot.rarity-violet::before,
#robin-chara-root .item-slot.rarity-orange::before,
#robin-chara-root .item-slot.rarity-red::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
#robin-chara-root .chara-icon-box[data-color="auto"]::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/orenge-frame.webp); }
#robin-chara-root .chara-icon-box[data-color="white"]::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/white-frame.webp); }
#robin-chara-root .item-slot.rarity-white::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/pet-white.webp); }
#robin-chara-root .chara-icon-box[data-color="green"]::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/green-frame.webp); }
#robin-chara-root .item-slot.rarity-green::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/pet-green.webp); }
#robin-chara-root .chara-icon-box[data-color="blue"]::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/blue-frame.webp); }
#robin-chara-root .item-slot.rarity-blue::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/pet-blue.webp); }
#robin-chara-root .chara-icon-box[data-color="violet"]::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/violet-frame.webp); }
#robin-chara-root .item-slot.rarity-violet::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/pet-purple.webp); }
#robin-chara-root .item-slot.rarity-orange::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/orenge-frame.webp); }
#robin-chara-root .item-slot.rarity-red::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/red-frame.webp); }
#robin-chara-root .chara-icon-box[data-color="soul"]::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/soul-frame.webp); }
#robin-chara-root .item-slot[data-count]:not([data-count="1"])::after { z-index: 2; }
#robin-chara-root .chara-icon-box > img,
#robin-chara-root .skill-icon,
#robin-chara-root .item-slot > img {
  background: transparent !important;
  background-color: transparent !important;
}
#robin-chara-root .item-glyph {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: bold;
  color: #111;
  text-align: center;
  line-height: 1.2;
  padding: 4px;
}
#robin-chara-root .skill-row.is-locked { opacity: 1; }
#robin-chara-root .skill-gap { color: #111; font-weight: normal; margin-left: 6px; }
#robin-chara-root .pet-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
#robin-chara-root .pet-controls .basic-label {
  white-space: nowrap;
  flex: 0 1 auto;
}
#robin-chara-root .pet-setup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  width: 100%;
  min-width: 0;
}
#robin-chara-root .pet-setup .calc-slider-group {
  flex: 1 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}
#robin-chara-root .pet-setup .calc-lv-label {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}
#robin-chara-root .pet-setup #pet-lv-val {
  display: inline-block;
  width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#robin-chara-root .pet-setup .basic-row {
  flex: 0 0 auto;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  min-width: max-content;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}
#robin-chara-root .pet-setup .basic-label {
  white-space: nowrap;
}
#robin-chara-root .pet-stat-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
#robin-chara-root .pet-stat-col .calc-total-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  background: #f3efe4;
  border: 1px solid #ccc;
  font-size: 14px;
}
#robin-chara-root .pet-stat-col .calc-total-row > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}
#robin-chara-root .pet-stat-col .calc-total-row > span:last-child {
  border-bottom: none;
}
#robin-chara-root .stat-panel > .basic-row:nth-child(odd) {
  background: #e8e8e8;
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}
#robin-chara-root .stat-panel .basic-label {
  white-space: normal;
  line-height: 1.35;
}
#robin-chara-root .stat-panel .basic-val {
  flex: 0 0 auto;
  margin-left: 8px;
}
#robin-chara-root .basic-val,
#robin-chara-root .calc-lv-label,
#robin-chara-root .calc-total-val,
#robin-chara-root .calc-val {
  color: #7A1515;
}
#robin-chara-root .skill-hl.hl-red { color: #c62828 !important; }
#robin-chara-root .skill-hl.hl-green { color: #39B474 !important; }
#robin-chara-root .skill-hl.hl-violet { color: #6a1b9a !important; }
#robin-chara-root .analysis-hero {
  height: auto;
  overflow: visible;
  background: transparent;
  border: none;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#robin-chara-root .hero-face {
  width: 72px;
  height: 72px;
  position: relative;
  overflow: hidden;
  background: #f3efe4;
  border: 1px solid #ccc;
  box-sizing: border-box;
  flex: 0 0 auto;
}
#robin-chara-root .hero-caption {
  display: block;
  width: 72px;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: #111;
  font-weight: bold;
}
#robin-chara-root .hero-face.has-violet-frame,
#robin-chara-root .hero-face.has-green-frame,
#robin-chara-root .hero-face.has-blue-frame {
  border: none;
  background: transparent;
}
#robin-chara-root .hero-face.has-violet-frame::before,
#robin-chara-root .hero-face.has-green-frame::before,
#robin-chara-root .hero-face.has-blue-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#robin-chara-root .hero-face.has-violet-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/violet-frame.webp);
}
#robin-chara-root .hero-face.has-green-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/green-frame.webp);
}
#robin-chara-root .hero-face.has-blue-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/blue-frame.webp);
}
#robin-chara-root .hero-face.has-violet-frame img,
#robin-chara-root .hero-face.has-green-frame img,
#robin-chara-root .hero-face.has-blue-frame img {
  position: absolute;
  left: 7.556%;
  top: 7.556%;
  width: 84.888% !important;
  height: 84.888% !important;
}
#robin-chara-root .pet-controls .basic-row > .stat-input {
  width: 8.5em;
  min-width: 8.5em;
  max-width: 8.5em;
  flex: 0 0 8.5em;
}
#robin-chara-root .pet-controls .basic-row > select {
  flex: 1 1 12em;
  min-width: 0;
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  font-size: 16px;
}
#robin-chara-root .pet-setup .basic-row > select {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  max-width: none;
}
#robin-chara-root .pet-controls input[type="range"] { flex: 1; min-width: 0; }
#robin-chara-root .pet-setup input[type="range"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
#robin-chara-root .pet-reset {
  margin-left: auto;
  flex: 0 0 auto;
  height: 29px;
  padding: 0 12px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}
#robin-chara-root .pet-reset:hover { background: #e8e8e8; }
#robin-chara-root .item-quad {
  grid-template-rows: auto auto;
  grid-auto-flow: row;
}
#robin-chara-root .item-total-list .item-slot {
  width: 76px;
  height: 76px;
}
#robin-chara-root .item-total-list .item-glyph { font-size: 11px; }
#robin-chara-root .skill-row { overflow: visible; }
#robin-chara-root .skill-detail { overflow-x: auto; }
@media (max-width: 800px) {
  #robin-chara-root .pet-controls { grid-template-columns: minmax(0, 1fr); }
}
#robin-chara-root .analysis-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  padding: 4px;
  color: #111;
}

.pet-page-head {
  max-width: 100%;
  margin: 0 auto 8px;
  color: #111;
}
.pet-page-head h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.3;
  color: #111;
}
.pet-kicker {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #555;
}
#robin-chara-root .pet-lead {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
}
#robin-chara-root .preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
#robin-chara-root .preset-note {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.6;
  color: #111;
}
#robin-chara-root .stat-input:read-only {
  background: #f3efe4;
}
#robin-chara-root .range-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin: 8px 0;
}
#robin-chara-root .range-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
#robin-chara-root .range-row select,
#robin-chara-root .range-row input[type="number"] {
  padding: 4px 6px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  font-size: 14px;
}
#robin-chara-root .range-row input[type="number"] { width: 5.5em; }
#robin-chara-root .range-result {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
}
#robin-chara-root .range-result strong { color: #e60012; }
#robin-chara-root .scrollable-table { overflow-x: auto; }
#robin-chara-root .sheet-scroll {
  max-height: 28rem;
  overflow: auto;
  border: 1px solid #ccc;
}
#robin-chara-root tr.is-current td { background: #fff1f1 !important; font-weight: bold; }
#robin-chara-root tr.is-in-range td { background: #f3efe4 !important; }
#robin-chara-root .skill-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(720px, 100%);
  margin: 8px auto 0;
}
#robin-chara-root .skill-slider-frame {
  flex: 1;
  min-width: 0;
  background: #111;
  border: 1px solid #ccc;
  overflow: hidden;
}
#robin-chara-root .skill-slide { display: none; width: 100%; height: auto; }
#robin-chara-root .skill-slide.is-active { display: block; cursor: zoom-in; }
#robin-chara-root .skill-slider-nav {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
#robin-chara-root .skill-slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: min(720px, 100%);
  margin: 10px auto 0;
}
#robin-chara-root .skill-slider-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
#robin-chara-root .skill-slider-dots button.is-active {
  background: #39B474;
  border-color: #39B474;
}
#robin-chara-root .skill-shot {
  display: block;
  width: calc(min(720px, 100%) - 88px);
  height: auto;
  margin: 8px auto 4px;
  border: 1px solid #ccc;
  background: #1a1208;
  cursor: zoom-in;
}
#robin-chara-root .skill-video:not(:has(video, iframe, .video-poster, .video-facade)) { display: none; }
#robin-chara-root .skill-video {
  width: calc(min(720px, 100%) - 88px);
  margin: 8px auto 4px;
}
#robin-chara-root .skill-video video,
#robin-chara-root .skill-video iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  background: #111;
  aspect-ratio: 16 / 9;
}
#robin-chara-root .video-poster {
  padding: 0;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #111;
}
#robin-chara-root .skill-video video,
#robin-chara-root .skill-video iframe,
#robin-chara-root .gallery-videos iframe {
  border: 1px solid #ccc;
}
#robin-chara-root .skill-note {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.7;
}
#robin-chara-root .skill-lock-note:empty { display: none; }
#robin-chara-root .skill-lock-note {
  color: #e60012;
  font-weight: bold;
  font-size: 12px;
}
#robin-chara-root #tab-basic .basic-profile {
  margin-bottom: 16px;
}
#robin-chara-root .support-heroes {
  margin: 18px 0 0;
}
#robin-chara-root #tab-basic .calc-container { margin-bottom: 0; }
#robin-chara-root #tab-basic > .chara-section-body { padding-bottom: 0; }
#robin-chara-root #tab-basic { margin-bottom: -4px; }
#robin-chara-root .support-hero-label {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: bold;
  color: #111;
}
#robin-chara-root .gallery-stage {
  display: flex;
  align-items: center;
  gap: 8px;
}
#robin-chara-root .gallery-frame {
  flex: 1;
  min-width: 0;
  display: block;
  background: #111;
  border: 1px solid #ccc;
  overflow: hidden;
}
#robin-chara-root .gallery-slide {
  display: none;
  width: 100%;
  height: auto;
}
#robin-chara-root .gallery-slide.is-active { display: block; cursor: zoom-in; }
#robin-chara-root .gallery-videos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
#robin-chara-root .gallery-videos iframe,
#robin-chara-root .gallery-videos video,
#robin-chara-root .gallery-videos .video-poster,
#robin-chara-root .gallery-videos .video-facade {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid #ccc;
  background: #111;
}
#robin-chara-root .video-facade {
  position: relative;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #111;
  color: #fff;
}
#robin-chara-root .video-facade-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: 0;
}
#robin-chara-root .video-facade-top {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 14px 36px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  pointer-events: none;
}
#robin-chara-root .video-facade-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
#robin-chara-root .video-facade-play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
#robin-chara-root .video-facade-play svg {
  display: block;
  width: 68px;
  height: 48px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
#robin-chara-root .video-facade:hover .video-facade-play svg { opacity: 0.9; }
#robin-chara-root .video-facade-watch {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 18px;
  background: rgba(20, 20, 20, 0.62);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}
#robin-chara-root .video-facade-watch span { font-weight: 700; }
#robin-chara-root .skill-video .video-facade {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid #ccc;
}
#robin-chara-root .gallery-videos .video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#robin-chara-root #tab-patchnote .patchnote-list,
#robin-chara-root #tab-patchnote .patchnote-list li,
#robin-chara-root #tab-patchnote .calc-info-note,
#robin-chara-root #tab-analysis .analysis-intro,
#robin-chara-root #tab-analysis .analysis-col-title,
#robin-chara-root #tab-analysis .analysis-list,
#robin-chara-root #tab-analysis .analysis-list li {
  font-size: 16px;
}
#robin-chara-root #tab-analysis .hero-caption {
  font-size: 11px;
}
#robin-chara-root .pet-controls .basic-row,
#robin-chara-root .pet-controls .calc-lv-label {
  font-size: 16px;
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 72px;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
.gallery-lightbox-prev { left: 12px; }
.gallery-lightbox-next { right: 12px; }
#gallery-lightbox.is-single .gallery-lightbox-prev,
#gallery-lightbox.is-single .gallery-lightbox-next { display: none; }
#gallery-lightbox img { pointer-events: none; }
#gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}
#gallery-lightbox[hidden] { display: none; }
#gallery-lightbox img {
  max-width: min(100%, 1280px);
  max-height: min(100%, 720px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.gallery-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
#robin-chara-root .gallery-nav {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
#robin-chara-root .gallery-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
}
#robin-chara-root .gallery-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
#robin-chara-root .gallery-dots button.is-active {
  background: #39B474;
  border-color: #39B474;
}
#tab-gallery .chara-section-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  max-width: calc(100% - 88px);
  color: #111 !important;
}
#tab-gallery,
#tab-gallery .chara-section-body {
  color: #111 !important;
  background: transparent !important;
}
#tab-gallery .chara-section-head .skill-detail-btn {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
}
#tab-gallery.is-open > .chara-section-head .skill-detail-btn {
  background: #e8e8e8 !important;
}
.article .entry-content #tab-gallery h2:before,
.article .entry-content #tab-gallery h2:after {
  content: none !important;
  display: none !important;
}
#robin-chara-root .support-hero-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px 8px;
}
#robin-chara-root .support-hero {
  display: block;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  color: #111;
  font-size: 12px;
  line-height: 1.3;
}
#robin-chara-root .support-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #f3efe4;
  border: 1px solid #ccc;
  margin: 0 0 4px;
}
@media (max-width: 800px) {
  #robin-chara-root .support-hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .pet-page-head h1 { font-size: 24px; }
  #robin-chara-root .pet-controls .basic-label { white-space: normal; }
  #robin-chara-root .pet-setup .basic-label { white-space: nowrap; }
  #robin-chara-root .pet-setup { gap: 6px; }
}
@media (max-width: 640px) {
  #robin-chara-root .pet-setup { gap: 4px; }
  #robin-chara-root .pet-setup .calc-slider-group { gap: 3px; }
  #robin-chara-root .pet-setup .calc-btn-step {
    width: 20px;
    height: 20px;
  }
}
#robin-chara-root .skill-hl.hl-red { color: #c62828 !important; }
#robin-chara-root .skill-hl.hl-green { color: #39B474 !important; }
#robin-chara-root .skill-hl.hl-violet { color: #6a1b9a !important; }
#robin-chara-root .analysis-hero {
  height: auto;
  overflow: visible;
  background: transparent;
  border: none;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#robin-chara-root .hero-face {
  width: 72px;
  height: 72px;
  position: relative;
  overflow: hidden;
  background: #f3efe4;
  border: 1px solid #ccc;
  box-sizing: border-box;
  flex: 0 0 auto;
}
#robin-chara-root .hero-caption {
  display: block;
  width: 72px;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: #111;
  font-weight: bold;
}
#robin-chara-root .hero-face.has-violet-frame,
#robin-chara-root .hero-face.has-green-frame,
#robin-chara-root .hero-face.has-blue-frame {
  border: none;
  background: transparent;
}
#robin-chara-root .hero-face.has-violet-frame::before,
#robin-chara-root .hero-face.has-green-frame::before,
#robin-chara-root .hero-face.has-blue-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#robin-chara-root .hero-face.has-violet-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/violet-frame.webp);
}
#robin-chara-root .hero-face.has-green-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/green-frame.webp);
}
#robin-chara-root .hero-face.has-blue-frame::before {
  background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/blue-frame.webp);
}
#robin-chara-root .hero-face.has-violet-frame img,
#robin-chara-root .hero-face.has-green-frame img,
#robin-chara-root .hero-face.has-blue-frame img {
  position: absolute;
  left: 7.556%;
  top: 7.556%;
  width: 84.888% !important;
  height: 84.888% !important;
}
.pet-after {
  margin-top: 28px;
}