/* ==========================================================================
       [설정] 투명도 관리 (CSS Variables)
       ========================================================================== */
:root {
  /* 데이터 셀의 배경 투명도 (0.0 투명 ~ 1.0 불투명) */
  /* 이 값을 변경하면 타이틀/구분/제작유형을 제외한 나머지 공간의 투명도가 변경됩니다. */
  --table-bg-opacity: 0.0;
}

/* ==========================================================================
       1. 전체 레이아웃 (Layout & Reset)
       ========================================================================== */
/* 배경색 강제 적용 (!important) 및 높이 100% 설정 - 하단 파란색 공간 제거 */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #1e1e1e !important;
  overflow: hidden;
  /* 전체 스크롤 방지 */
  font-family: 'Noto Sans KR', sans-serif;
  cursor: auto;
}

body {
  color: #ccc;
  background-image: var(--main-bg-url);
}

.layout-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #1e1e1e;
}

/* ==========================================================================
       2. 헤더 영역 (타이틀, 요약, 버튼)
       ========================================================================== */
.popup-header {
  padding: 10px 20px;
  background: #252526;
  /* 불투명 유지 */
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 70px;
  z-index: 100;
}

.header-left h2 {
  margin: 0;
  font-size: 1.2rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 중앙 요약 정보 */
.header-center {
  display: flex;
  gap: 30px;
  align-items: center;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.summary-label {
  font-size: 0.85rem;
  color: #aaa;
  margin-bottom: 2px;
}

.summary-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
}

.summary-value.gold {
  color: #ffd700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.summary-value.output {
  color: #69f0ae;
}

.summary-value.discount {
  color: #e99b0a;
}

/* 우측 액션 영역 */
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.discount-wrapper {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #444;
}

.discount-wrapper label {
  font-size: 0.9rem;
  color: #ccc;
  margin-right: 5px;
}

.discount-input {
  width: 27px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #777;
  color: #ff001c;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}

.discount-input:focus {
  outline: none;
  border-bottom-color: #ff001c;
}

/* input type=number 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.btn-calc {
  /* background-color: #3d5afe; -> moved to specific classes */
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: background 0.2s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  min-width: 50px;
}

/* Dark Pastel Blue for Calculate */
.btn-calc.btn-blue {
  background-color: #6E85B2;
}

.btn-calc.btn-blue:hover {
  background-color: #2433b9;
}

/* Dark Pastel Gray for Reset */
.btn-calc.btn-gray {
  background-color: #757a7430;
}

.btn-calc.btn-gray:hover {
  background-color: #757a7490;
}

/* Dark Pastel Gray for Reset */
.btn-calc.btn-green {
  background-color: #69ad5881;
}

.btn-calc.btn-green:hover {
  background-color: #44c025;
}

/* ==========================================================================
       3. 테이블 스타일 (스크롤 & 고정 헤더)
       ========================================================================== */
.calc-body {
  flex: 1;
  overflow: auto;
  position: relative;
  background-color: transparent;
  /* 배경 투명 처리 */
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: max-content;
}

th,
td {
  padding: 8px;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  box-sizing: border-box;
}

/* --- Sticky Headers (불투명 배경 유지) --- */

/* 1. 상단 유형 헤더 (코너 제외) */
thead th:not(.corner-header) {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #333;
  /* 불투명 */
  color: #fff;
  height: 50px;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #555;
  font-size: 1.2rem;
  /* 너비 고정 */
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 2. 좌측 구분 헤더 */
tbody th.row-header {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #252526;
  /* 불투명 */
  color: #ffd700;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;

  min-width: 70px;
  max-width: 70px;
  border-right: 2px solid #444;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 5px;
  display: inline-block;
}

/* 3. 코너 헤더 (좌측 상단) */
thead th.corner-header {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 30;
  background: #2d2d2d;
  /* 불투명 */
  border-right: 2px solid #444;
  border-bottom: 2px solid #555;
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

/* --- 데이터 셀 (투명도 변수 적용) --- */
td {
  /* [중요] 사용자가 설정한 투명도 변수 적용 */
  background-color: rgba(30, 30, 30, var(--table-bg-opacity));
  vertical-align: top;
  /* 너비 고정 */
  width: 280px;
  min-width: 280px;
  max-width: 280px;
}

/* 호버 시 약간 밝게 (투명도 유지) */
td:hover {
  background-color: rgba(60, 60, 60, 0.5);
}

/* 아이템 컨테이너 */
.prop-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s;
}

.prop-item:last-child {
  margin-bottom: 0;
}


.style-green {
  color: #2ecc71;
}

.style-blue {
  color: #3498db;
}

.style-white {
  color: #cccccc;
}

.style-trace {
  color: #cccccc;
}

.style-default {
  color: #cccccc;
}


/* 강조 스타일 */
.style-buy-trace {
  background: rgba(255, 87, 34, 0.15) !important;
  border: 1px solid rgba(255, 87, 34, 0.3);
}

.style-buy-trace .result-value {
  color: #ffccbc !important;
  font-size: 1.2rem !important;
}

.style-exchange-material {
  background: rgba(244, 220, 3, 0.15) !important;
  border: 1px solid rgba(244, 220, 3, 0.3);
}

.style-exchange-material .result-value {
  color: #81d4fa !important;
  font-size: 1.2rem !important;
}

.item-icon img {
  width: 36px;
  height: 36px;
  margin-right: 12px;
  border-radius: 4px;
  background: #000;
  border: 1px solid #555;
  display: block;
}

.item-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

.prop-label {
  font-size: 0.95rem;
  /* color: #ccc; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.abydos-input {
  width: 90px;
  height: 32px;
  background: #333;
  border: 1px solid #555;
  color: #fff;
  padding: 0 10px;
  border-radius: 4px;
  text-align: right;
  font-size: 1rem;
  font-family: 'Noto Sans KR', sans-serif;
}

.abydos-input:focus {
  border-color: #3d5afe;
  outline: none;
  background: #444;
}

/* 결과값 기본 */
.result-value {
  font-weight: bold;
  color: #e0e0e0;
  font-size: 1.1rem;
  text-align: right;
}

/* 결과 강조 */
.craft-cost .result-value {
  color: #ffd700;
  font-size: 1.6rem !important;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.craft-count .result-value {
  font-size: 1.35rem !important;
  color: #fff;
}

.craft-output .result-value {
  font-size: 1.35rem !important;
  color: #69f0ae;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  color: #fff;
  font-size: 1.2rem;
}

/* 토글 버튼 그룹 */
.toggle-vertical-wrapper {
  display: flex;
  flex-direction: column;
  margin-right: 15px;
}

.toggle-group {
  display: flex;
  background: #333;
  border-radius: 4px;
  border: 1px solid #444;
}

.toggle-btn {
  background: transparent;
  border: none;
  color: #888;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  border-radius: 3px;
  transition: all 0.2s;
}

.toggle-btn:hover {
  color: #ccc;
}

.toggle-btn.active {
  background: #555;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}