@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  --text-primary: #0A0C0F;
  --text-secondary: #2F2F33;
  --text-tertiary: #4F5560;
  --bg-base: #F5F7F9;
  --bg-block: #E9EBED;
  --bg-surface: #FFFFFF;
  --assist-muted: #8F99A0;
  --assist-border: #E9EBED;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--bg-base); color: var(--text-primary); font-family: 'Pretendard', sans-serif; margin: 0; display: flex; justify-content: center; }
#app { width: 100%; max-width: 480px; min-height: 100vh; position: relative; background-color: var(--bg-base); padding: 24px; }

.header-logo { 
  text-align: center; 
  margin-top: 20px; 
  margin-bottom: 32px; 
}
.blog-link { 
  display: flex; 
  justify-content: center; 
  margin-bottom: 16px; 
}
.blog-link span, .sitemap-btn { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: var(--bg-surface);  
  justify-content: center; 
  border: 1px solid var(--assist-border); 
  color: var(--text-primary); font-size: 14px; 
  font-weight: 400; 
  padding: 8px 12px; 
  border-radius: 12px; 
  cursor: pointer;
  display: inline-block; }
.sitemap-wrapper {
  display: flex;
  justify-content: center;

}

.bento-card { background-color: var(--bg-surface); border: 1px solid var(--assist-border); border-radius: 24px; padding: 24px; width: 100%; height: 200px; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); position: relative; cursor: pointer; overflow: hidden; }
.card-content { position: relative; z-index: 2; width: 100%; padding-right: 120px; }
.chip-group { display: flex; gap: 6px; margin-bottom: 16px; }
.chip { background-color: var(--bg-block); color: var(--text-secondary); padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 400; white-space: nowrap; }
.bento-card h2 { font-size: 20px; font-weight: 600; margin: 0; margin-top: 4px; word-break: keep-all; }

/* 픽셀 깨짐 방지 씹사기 설정 */
.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }
.card-image { 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  width: 50%; /* 텍스트 칩 영역(왼쪽) 침범 안 하게 절반만 씀 */
  height: 100%; /* 벤토 카드 높이 200px에 완벽하게 꽉 맞춤 */
  background-size: contain; /* 이미지 비율 유지하면서 무조건 다 보이게! */
  background-repeat: no-repeat; 
  background-position: bottom right; /* 우측 하단 구석에 찰싹 붙임 */
  z-index: 1; 
  border-radius: 0 24px 24px 0; /* 카드 우측 둥근 모서리에 딱 맞춤 */
}
.banner-card { padding-right: 0; }
.banner-img { top: 0; right: 0; bottom: 0; height: 100%; width: 100%; background-size: auto 100%; background-position: right center; border-radius: 0 24px 24px 0; }

/* 푸터 여백 픽스 */
.footer { text-align: center; margin-top: 36px; padding-bottom: 54px; }
.footer p { color: var(--assist-muted); font-size: 12px; line-height: 1.6; margin: 0; }
.footer a {
  color: inherit;
  text-decoration: none;
}

.detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.back-btn { width: 40px; height: 40px; background-color: var(--bg-surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--assist-border); }
.header-title-pill { background-color: var(--bg-surface); padding: 10px 24px; border-radius: 24px; font-size: 16px; font-weight: 600; border: 1px solid var(--assist-border); }

/* 메인 레벨 벤토 (2x 사이즈 이미지) */
.level-select-row { display: flex; gap: 16px; margin-bottom: 16px; }
.level-box { flex: 1; background-color: var(--bg-surface); border: 1px solid var(--assist-border); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative; }
.level-box .label, .data-item .label { align-self: flex-start; background-color: var(--bg-block); padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 400; margin-bottom: 12px; color: var(--text-secondary); display: inline-block; }
.level-box .icon-placeholder { display: flex; align-items: center; justify-content: center; margin-bottom: 16px; height: 50px; }
.level-box .icon-placeholder img { 
  width: 50px; 
  height: 40px; 
  object-fit: contain;
  flex-shrink: 0;
}
.level-box .desc { font-size: 14px; color: var(--text-primary); font-weight: 500; text-align: center; }

/* 데이터 벤토 정렬 */
.data-list { display: flex; flex-direction: column; gap: 16px; }
.data-item { background-color: var(--bg-surface); border: 1px solid var(--assist-border); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.data-item .value { font-size: 32px; font-weight: 600; margin: 0; color: var(--text-primary); }

/* % 입력 가변 폼 (회색 placeholder & 좌측 정렬) */
.percent-input-wrapper { display: flex; align-items: baseline; border-bottom: 2px solid var(--assist-border); padding-bottom: 2px; transition: border-color 0.2s; width: fit-content; }
.percent-input-wrapper:focus-within { border-bottom-color: var(--text-primary); }
#exp-percent-input { font-size: 32px; font-weight: 600; color: var(--text-primary); background: transparent; border: none; outline: none; font-family: 'Pretendard', sans-serif; padding: 0; margin: 0; width: 4ch; text-align: left; }
#exp-percent-input::placeholder { color: #CBD0D4; }
.value-symbol { font-size: 32px; font-weight: 600; color: var(--text-primary); margin-left: 2px; }

/* 추가 경험치 입력 폼 */
.flex-col { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.add-exp-btn { color: var(--text-tertiary); font-weight: 500; cursor: pointer; margin-top: 12px; font-size: 16px; width: 100%; }
#extra-exp-container { width: 100%; display: flex; flex-direction: column; }
.exp-input-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--assist-border); padding: 12px 0; margin-bottom: 4px; }
.exp-input-row input { flex: 1; border: none; background: transparent; font-size: 18px; color: var(--text-primary); outline: none; font-family: 'Pretendard', sans-serif; font-weight: 600; }
.exp-input-row img { width: 20px; height: 20px; cursor: pointer; opacity: 0.6; }

/* 에러 흔들림 & 말풍선 애니메이션 */
.relative-box { position: relative; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-6px); } }
.shake { animation: shake 0.3s ease-in-out; border-color: #FF4D4D !important; }

.error-tooltip, .target-tooltip { position: absolute; background-color: #FF4D4D; color: white; font-size: 12px; padding: 8px 12px; border-radius: 8px; font-weight: 600; opacity: 0; visibility: hidden; transition: all 0.2s; box-shadow: 0 4px 12px rgba(255, 77, 77, 0.3); z-index: 10; white-space: nowrap; }
.error-tooltip { top: 10px; right: 20px; }
.error-tooltip::after { content: ''; position: absolute; bottom: -5px; right: 24px; border-width: 5px 5px 0; border-style: solid; border-color: #FF4D4D transparent transparent transparent; }
.error-tooltip.show { opacity: 1; visibility: visible; top: -12px; }

.target-tooltip { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; }
.target-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px 5px 0; border-style: solid; border-color: #FF4D4D transparent transparent transparent; }
.target-tooltip.show { opacity: 1; visibility: visible; margin-bottom: 14px; }

/* 바텀 시트 (구분선 & 1x 이미지) */
.bottom-sheet-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10; display: none; }
.bottom-sheet-overlay.active { display: block; }
.bottom-sheet { position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: 85vh; background-color: var(--bg-surface); border-radius: 24px 24px 0 0; z-index: 11; transition: bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; }
.bottom-sheet.active { bottom: 0; }
.sheet-header { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--assist-border); }
.sheet-header h3 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; text-align: center; }
.sheet-close { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sheet-content { padding: 24px; padding-bottom: 40px; overflow-y: auto; flex: 1; }

/* 티어 구분선 추가 */
.tier-group { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--assist-border); }
.tier-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.tier-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-secondary); }

/* 바텀 시트 1x (25x20) 사이즈 고정 */
.icon-grid { 
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  gap: 16px 8px; 
  justify-items: center; 
  align-items: center; 
}
.icon-grid img { 
  width: 25px; 
  height: 20px; 
  object-fit: contain;
  cursor: pointer; 
  border-radius: 4px; 
}
.icon-grid img:hover { 
  background-color: var(--bg-block); 
}