.header-container {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}

@media (max-width: 1200px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
  }
}

.planner-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 0px
}

.planner-toolbar .primary-btn,
.planner-toolbar .secondary-btn {
  background: #232323;
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px 8px 10px;
  cursor: pointer
}

.planner-toolbar .secondary-btn {
  background: transparent
}

.spoiler-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, .8)
}


.summary-card {
  padding: 16px 20px 16px 20px;
  margin: 0px 0px 20px 0px;
  border-radius: 10px;
  background: var(--card-background);
  border-bottom: 3px solid var(--border-red)
}

.summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.summary-header h2 {
  margin: 0;
  font-size: 16px
}

.icon-btn {
  background: transparent;
  border: 0px solid rgba(255, 255, 255, .2);
  color: #fff;
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 8px;
}

.material-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 8px;
  border-radius: 6px;
  position: relative;
  overflow: hidden
}

.material-chip>* {
  position: relative;
  z-index: 1
}

.material-chip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50%;
  opacity: .45;
  pointer-events: none;
  z-index: 0
}

/* pure gradients */
.material-chip.lv1::before {
  background: linear-gradient(to top, rgba(0, 126, 255, .55), rgba(0, 126, 255, 0));
  border-bottom: 2px solid rgba(0, 126, 255, 1);
}

.material-chip.lv2::before {
  background: linear-gradient(to top, rgba(178, 0, 255, .55), rgba(178, 0, 255, 0));
  border-bottom: 2px solid rgba(178, 0, 255, 1);
}

.material-chip.lv3::before {
  background: linear-gradient(to top, rgba(255, 153, 0, .55), rgba(255, 153, 0, 0));
  border-bottom: 2px solid rgba(255, 153, 0, 1);
}

.material-chip.default::before {
  background: linear-gradient(to top, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  border-bottom: 2px solid rgba(255, 255, 255, 1);
}

.material-chip img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  aspect-ratio: 1/1;
  background: transparent;
  border-radius: 6px;
  padding: 2px
}

.material-chip img[src*="weapon_lv_limit_1.png"] {
  scale: 0.8
}

.material-chip img[src*="weapon_lv_1.png"],
.material-chip img[src*="weapon_lv_2.png"],
.material-chip img[src*="weapon_lv_3.png"] {
  scale: 1.3
}

.material-chip img[src*="cha_lv_1.png"],
.material-chip img[src*="cha_lv_2.png"],
.material-chip img[src*="cha_lv_3.png"],
.material-chip img[src*="mind_lv.png"] {
  scale: 1.1
}

.material-chip img[src*="cha_lv_limit_3.png"],
.material-chip img[src*="konpaku_gem.png"] {
  scale: 1.2
}

.material-chip img[src*="skill_rose.png"] {
  scale: 1.25
}

.material-chip img[src*="skill_item1.png"] {
  scale: 1.1
}

.material-chip img[src*="skill_item4.png"] {
  scale: 0.85
}

.material-chip img[src*="skill_item5.png"] {
  scale: 1.2
}

.material-chip img[src*="mind_skill1.png"] {
  scale: 0.85
}

.material-chip img[src*="mind_skill2.png"] {
  scale: 0.9
}

.material-chip .cnt {
  font-size: 10.8px;
  font-weight: 100;
  color: #fbf0f0;
  margin-top: 2px;
}

.material-chip {
  cursor: pointer
}

/* craft badge (convertible amount) */
.material-chip {
  position: relative
}

.craft-badge {
  position: absolute;
  top: 4px;
  left: 6px;
  background: rgba(0, 0, 0, .7);
  border: 0px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1px 4px 1px 0px;
  font-size: 11px;
  z-index: 2
}

.craft-badge svg {
  width: 12px;
  height: 12px
}

/* plan header title image keep ratio */
.plan-title img {
  object-fit: cover !important;
  aspect-ratio: 1/1;
  border-radius: 100px !important
}

/* details panel */
.plan-details {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 8px 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, .9)
}

.plan-details .row {
  grid-template-columns: 1fr auto auto auto;
  gap: 8px
}

.plan-details .row label {
  opacity: .8
}

/* menu */
.menu-btn {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #fff;
  padding: 2px 0px 0px 0px;
  cursor: pointer
}

.menu {
  position: absolute;
  right: 8px;
  top: 36px;
  background: rgba(0, 0, 0, .9);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  display: none;
  flex-direction: column;
  min-width: 60px;
  z-index: 5
}

.menu.show {
  display: flex
}

.menu button {
  background: transparent;
  border: none;
  color: #fff;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer
}

.menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

/* count coloring */
.cnt span.own.bad {
  color: #ff6d6d
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 0 0px 40px
}

.plan-card {
  background: var(--card-background);
  border-radius: 12px;
  padding: 16px 16px 20px 16px;
  border-bottom: 3px solid var(--border-red)
}

.plan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 4px 0px 16px 0px
}

.plan-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px
}

.plan-title .plan-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover
}

.plan-title .plan-title-right {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.plan-title .name-row {
  font-weight: 700;
  line-height: 1
}

.plan-title .meta-row {
  display: flex;
  align-items: center;
  gap: 6px
}

.plan-title .meta-row .meta-icon {
  width: 16px;
  height: 16px;
  object-fit: contain
}

.plan-title .meta-row .star-wrap {
  display: flex;
  gap: 2px
}

.plan-actions {
  display: flex;
  gap: 8px
}

.mini-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 11px
}

/* modal */

@media (min-width:1200px) {
  .modal {
    margin-left: 240px;
  }

  .modal-dialog {
    margin-left: 120px !important;
  }
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: none;
  z-index: 9999;
}

.modal[aria-hidden="false"] {
  display: block;
}

/* 모달 박스를 뷰포트 기준 정중앙 고정 */
.modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  max-height: min(80vh, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, .1);
  margin: 0;
}

.modal-dialog.large {
  width: min(480px, 90vw)
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.modal-body {
  padding: 14px 16px;
  overflow: auto;
  flex: 1
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08)
}

.modal .close {
  border: none
}

.setup-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
}

#characterSearch {
  padding: 10px 16px 10px 16px !important;
}


/* character grid */
.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  row-gap: 24px;
}

.character-grid img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: pointer;
  background: #000;
  object-fit: contain
}

.character-grid img:hover {
  filter: brightness(1.1)
}

.character-filter {
  margin-bottom: 12px
}

.character-filter input {
  width: calc(100% - 20px);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: #111;
  color: #fff
}

.character-filter #modalSpoilerToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px
}

.character-filter #modalSpoilerToggle input {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  appearance: auto
}

.character-filter #modalSpoilerToggle span {
  font-size: 12px;
  opacity: .9
}

.modal-header h3 {
  margin: 0;
  margin-right: auto;
  font-size: 16px;
}

/* toggle (mind all) - match modal spoiler style */
#mindAllToggle {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  appearance: auto
}

#mindAllToggle+span {
  font-size: 12px;
  opacity: .9
}

/* setup */

.modal-footer .primary-btn,
.modal-footer .secondary-btn {
  padding: 6px 12px;
  background: #4766ca;
  border: 0;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  color: #fff !important;
  text-decoration: none;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px
}

.setup-section {
  padding: 0px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
}

.setup-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 700;
  color: #a4b6ff;
}

.row label {
  min-width: 64px
}

.row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 6px 0
}

.row .arrow {
  opacity: .6
}

.row.align-center {
  grid-template-columns: 1fr
}

.row input[type="number"] {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: #111;
  color: #fff
}

.row img {
  object-fit: contain
}

.inv-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0px 0 32px 0
}

.inventory-slider {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  background: linear-gradient(90deg, rgba(90, 120, 255, .2), rgba(90, 120, 255, .9));
  border-radius: 999px
}

.inventory-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a73e8;
  border: 2px solid #bcd2ff;
  margin-top: -4px;
  position: relative;
  top: 1px
}

.inventory-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a73e8;
  border: 2px solid #bcd2ff
}

.setting-row {
  align-items: center;
  margin: 6px 0
}

.setting-row label {
  min-width: 64px
}

.setting-row .arrow {
  opacity: .6
}

.setting-row.align-center {
  grid-template-columns: 1fr
}

.setting-row input[type="number"] {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: #111;
  color: #fff
}

.setting-row img {
  object-fit: contain
}


.skill-list .row {
  grid-template-columns: auto 1fr auto 1fr
}

.mind-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 16px 0 10px 0
}

.mind-cell {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center
}

.mind-num {
  position: absolute;
  top: 0;
  left: -8px;
  width: 100%;
  height: 100%;
  font-size: 10px;
  font-weight: 400;
  color: #d2d2d2;
}


/* dual slider layout */
.dual-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%
}

.row-title {
  font-weight: 700;
  margin-bottom: 2px
}

.dual-number-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center
}

.dual-slider-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 10px 0px 32px 0px
}

.dual-slider-row input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent
}

/* slider styling */
.dual-slider-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, rgba(90, 120, 255, .1), rgba(90, 120, 255, .9));
  border-radius: 999px
}

.dual-slider-row input[type="range"]::-moz-range-track {
  height: 6px;
  background: linear-gradient(90deg, rgba(90, 120, 255, .2), rgba(90, 120, 255, .9));
  border-radius: 999px
}

.dual-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #398eff;
  border: 2px solid #bcd2ff;
  margin-top: -4px;
  position: relative;
  top: -1px
}

.dual-slider-row input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #398eff;
  border: 2px solid #bcd2ff
}

.dual-slider-row input[type="range"]:focus {
  outline: none
}

.arrow.big {
  opacity: .8;
  font-size: 18px
}

/* Mind Base: full-width single slider row */
.single-slider-row {
  display: block;
  margin: 10px 0 40px 0
}

.single-slider-row input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent
}

.single-slider-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, rgba(90, 120, 255, .1), rgba(90, 120, 255, .9));
  border-radius: 999px
}

.single-slider-row input[type="range"]::-moz-range-track {
  height: 6px;
  background: linear-gradient(90deg, rgba(90, 120, 255, .2), rgba(90, 120, 255, .9));
  border-radius: 999px
}

.single-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #398eff;
  border: 2px solid #bcd2ff;
  margin-top: -4px;
  position: relative;
  top: -1px
}

.single-slider-row input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #398eff;
  border: 2px solid #bcd2ff
}

.single-slider-row input[type="range"]:focus {
  outline: none
}

.inv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px
}

.inv-header-icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  object-fit: contain;
  padding: 8px
}

.inv-header-name {
  font-size: 14px;
  font-weight: 700;
  margin: 0
}

.help-text {
  text-align: center;
  margin: 10px 0px 40px 0px;
  padding: 12px;
  background: #222;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.8;
}

#mindBaseCurCount,
#mindBaseTarCount {
  display: none;
}

.filter-header {
  padding: 0 0px;
}

.filter-content {
  margin-top: 10px;
}

@media (max-width:1200px) {
  .material-grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr))
  }

  .plans-grid {
    grid-template-columns: 1fr
  }

  .filter-header {
    padding: 0 0px;
  }

  .navigation-path,
  .header-container,
  .plans-grid {
    padding-left: 0;
    padding-right: 0;
  }

  .summary-card {
    margin-left: 0;
    margin-right: 0;
  }

  .help-text {
    margin: 0
  }
}