@font-face {
    font-family: "Destiny Symbols Common";
    src: url(../fonts/destiny_symbols_common.otf);
}

* {
  font-family: 'Noto Sans KR', "Destiny Symbols Common", sans-serif !important;
}

body {
  position: relative;
  min-height: 100vh;
  /* 배경 흐림 효과를 위한 배경 레이어 */
  overflow-x: hidden;
  background-color: #222;
}
  
body::before {
  content: "";
  position: fixed;
  z-index: -2;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  filter: blur(5px) brightness(0.4);
  opacity: 0.6;
}
  
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);
  pointer-events: none;
}

.d2-link {
  text-decoration: none;
  color: #ffffff;
}

.d2-link:hover {
  text-decoration: none;
  color: #eaeaea;
}

.d2-link-underlined {
  text-decoration: underline !important;
}

.d2-icontext {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
}

.d2-icontext > img {
  height: 1.4em;
  width: auto;
  vertical-align: middle;
  display: inline-block;
}

.d2-icontext-small > img {
  height: 1em !important;
  width: auto !important;
  vertical-align: middle;
  display: inline-block;
}

.d2-eyebrow {
  color: #ccc;
  letter-spacing: 0.2rem;
}

.d2-title {
  letter-spacing: 0.08rem;
}

.d2-subtitle {
  letter-spacing: 0.08rem;
  color: #ccc;
  font-size: 0.7em;
}

.d2-item-subtitle {
  color: #ccc;
  font-size: 80%;
}

.d2-item-subtitle-2 {
  color: #ccc;
}

.d2-card-inner {
  border: 1px solid #ffffff11; 
  height: 100%;
}

.d2-desc-reward {
  color: #5CA469;
  font-size: 1.1rem;
  letter-spacing: 0.15rem;
}
  
.d2-desc-location {
  color: #b1ad9e;
  font-size: 1.2rem;
  letter-spacing: 0.11rem;
}

.d2-light {
  color: #d0c76b;
  font-size: 80%;
}

#d2-tooltip {
  color: #fff;
  border: 1px solid #444;
  pointer-events: auto;
  font-size: 1.2rem;
  min-width: 320px;
  max-width: 360px;
  box-shadow: 0 2px 8px #0005;
  transition: opacity 0.1s;
  backdrop-filter: blur(5px);
  position: fixed;
  z-index: 9999;
  word-break: keep-all;
  /* 툴팁이 화면 밖으로 나가지 않도록 설정 */
  max-height: 80vh;
  overflow: hidden;
}

.tooltip-content {
  display: none;
  position: fixed;
  z-index: 9999;
}

.d2-tooltip-legendary {
  padding: 0.25rem;
  background: #4c2d5ebb;
}

.d2-tooltip-legendary-desc {
  padding: 0.25rem;
  background: #0f0a12bb;
  font-size: 0.875rem;
}

.d2-tooltip-exotic {
  padding: 0.25rem;
  background: #ceae33bb;
}

.d2-tooltip-exotic-desc {
  padding: 0.25rem;
  background: #161307bb;
  font-size: 0.875rem;
}

.d2-tooltip-modifier {
  padding: 0.25rem;
  background: #020202bb;
  border-top: 0.2rem solid #aaaaaabb;
}

.d2-tooltip-modifier-desc {
  padding: 0.25rem;
  background: #1c1c1cbb;
  font-size: 0.925rem;
}

.d2-inventory-item {
  display: inline-flex;
  align-items: center;
  margin: 0.075rem 0.0125rem 0.075rem;
  border: 1px solid #ffffff22;
  border-radius: 0.2rem;
  background: #22222288 !important;
}

.no-border {
  border: none !important
}

.d2-inventory-item > img {
  width: 2.7rem; 
  height: auto
}

.modifier-icon {
  width: 2.17em;
  height: auto;
  border: 0.125rem solid #ffffff;
  padding: 0.15rem;
  border-radius: 50%;
}

.shield-icon {
  padding: 0.125em;
  width: 1.25em; 
  height: auto; 
  vertical-align: middle;
}

.perk-icon-wrapper {
  position: relative;
}

.perk-icon {
  width: 2.7em;
  height: auto;
  border: 0.125rem solid #ffffff;
  padding: 0.15rem;
  border-radius: 50%;
  background-color: #222; /* Add a background for better visibility */
}

.perk-icon-masterwork {
  width: 2.7em;
  height: auto;
  border: 0.05rem solid #666666;
  background-color: #222; /* Add a background for better visibility */
}

.perk-icon-small {
  width: 2.2em !important
}

.d2-nightfall {
  background: #1a2132; 
  border-top: 0.3rem solid #4b5f8e;
  padding: 0.5rem 0.5rem 0.25rem 0.5rem !important;
}

.d2-lost-sector {
  background-color: #262137;
  border-top: 0.3rem solid #565073;
  padding: 0.5rem 0.5rem 0.25rem 0.5rem !important;
}

.d2-raid {
  background-color: #2d3a42;
  border-top: 0.3rem solid #628aa5;
  padding: 0.5rem 0.5rem 0.25rem 0.5rem !important;
}

.d2-banshee {
  background-color: #0c2c42;
  border-top: 0.3rem solid #4b6278;
  padding: 0.5rem 0.5rem 0.25rem 0.5rem !important;
}

.item-with-tooltip.disable-pointer {
  pointer-events: none !important;
}

.d2-inventory-item-icon {
  position: relative;
  display: inline-block;
}

.d2-inventory-item-icon .main-icon {
  border: 1px solid #333;
}

.d2-inventory-item-icon .watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.d2-arc {
  color: #7AECF3;
}

.d2-solar {
  color: #F16F27;
}

.d2-void {
  color: #B283CC;
}

.d2-kinetic {
  color: #fefefe;
}

.d2-stasis {
  color: #4D87FF;
}

.d2-strand {
  color: #35E366;
}

.d2-primary {
  color: #FFFFFF;
}

.d2-special {
  color: #7AF48B;
}

.d2-heavy {
  color: #B286FF;
}

.d2-rotation-active {
  color: #e8d456;
}

.filter-red {
  filter: brightness(0) saturate(100%) invert(34%) sepia(55%) saturate(809%) hue-rotate(308deg) brightness(84%) contrast(80%);
}

.filter-green {
  filter: brightness(0) saturate(100%) invert(57%) sepia(16%) saturate(784%) hue-rotate(78deg) brightness(92%) contrast(92%);
}



#saveStatus, #item-link-alert {
  opacity: 0;
  transition: opacity 0.5s;
}
#saveStatus.show, #item-link-alert.show {
  opacity: 1;
}

.show-icons-only, .forced-icons-only {
  border: none !important;
  margin: 0 !important;
  margin-right: -0.375rem !important;
  padding: 0 !important;
}

.show-icons-only .item-details, .forced-icons-only .item-details {
  display: none !important;
}

.show-icons-only img, .forced-icons-only img {
  width: 3.4rem !important; /* 아이콘 크기 확대 */
  height: auto;
}

.difficulty-button i.bi-chevron-right {
  display: none;
}
.difficulty-button.active {
  background: linear-gradient(to right, #66666666, transparent);
  padding-left: 0.625em !important;
}
.difficulty-button.active i.bi-chevron-right {
  display: inline;
}
.difficulty-button:hover {
  background: linear-gradient(to right, #99999966, transparent);
}