/* ===================================
   가???�스???��???
   =================================== */

/* 카드 ??가??보기 버튼 */
.btn-blessing {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(104, 216, 223, 0.15);
    border: 0.0625rem solid rgba(104, 216, 223, 0.4);
    border-radius: 0.25rem;
    color: #68D8DF;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-blessing:hover {
    background: rgba(104, 216, 223, 0.3);
    border-color: #68D8DF;
    box-shadow: 0 0 0.625rem rgba(104, 216, 223, 0.3);
}

.btn-blessing i {
    font-size: 0.7rem;
}

/* 가??모달 */
#blessing-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 1.25rem;
}

.blessing-modal-content {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.98) 0%, rgba(22, 27, 34, 0.98) 100%);
    border: 0.125rem solid rgba(104, 216, 223, 0.5);
    border-radius: 0.75rem;
    padding: 1.75rem 2.25rem;
    max-width: 96rem;
    min-width: 70rem;
    width: 98%;
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 2.5rem rgba(104, 216, 223, 0.3);
}

.blessing-modal-content .close-btn {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.blessing-modal-content .close-btn:hover {
    color: #68D8DF;
}

/* ===================================
   가???�택 ?�널 (?�중 ?�택)
   =================================== */

.blessing-selector-panel {
    padding: 0.5rem;
}

.blessing-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 0.125rem solid rgba(104, 216, 223, 0.3);
}

.blessing-selector-header h3 {
    font-size: 1.5rem;
    color: #68D8DF;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* 별빛 ?�보 ?�역 */
.blessing-cost-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.blessing-budget {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: rgba(91, 141, 239, 0.15);
    border: 0.0625rem solid rgba(91, 141, 239, 0.4);
    border-radius: 1rem;
}

.blessing-budget .budget-label {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.blessing-budget .budget-value {
    color: #5b8def;
    font-size: 1.2rem;
    font-weight: 700;
}

.blessing-total-cost {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(104, 216, 223, 0.15);
    border: 0.0625rem solid rgba(104, 216, 223, 0.4);
    border-radius: 1.25rem;
    transition: all 0.2s;
}

.blessing-total-cost.over-budget {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.5);
}

.blessing-total-cost .cost-label {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.blessing-total-cost .cost-value {
    color: #68D8DF;
    font-size: 1.3rem;
    font-weight: 700;
    transition: color 0.2s;
}

.blessing-total-cost.over-budget .cost-value {
    color: #ff6b6b;
}

.blessing-total-cost .over-warning {
    color: #ff6b6b;
    font-size: 0.8rem;
    font-weight: 600;
}

/* 가???그리??- 5??2??*/
.blessing-selector-panel .blessing-grid {
    display: grid;
    grid-template-columns: repeat(5, 17.25rem);
    grid-auto-rows: 1fr;
    gap: 1rem;
    min-width: 90rem;
}

/* 가??카드 - ?�기 ?�일 */
.blessing-card {
    background: linear-gradient(180deg, rgba(25, 35, 50, 0.9) 0%, rgba(35, 45, 60, 0.9) 100%);
    border: 0.125rem solid rgba(74, 111, 165, 0.4);
    border-radius: 0.625rem;
    padding: 1.125rem 1rem 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    height: 100%;
}

.blessing-card:hover {
    border-color: rgba(104, 216, 223, 0.6);
    background: linear-gradient(180deg, rgba(50, 55, 55, 0.9) 0%, rgba(55, 60, 55, 0.9) 100%);
    transform: translateY(-0.125rem);
}

.blessing-card.selected {
    border-color: #68D8DF;
    background: linear-gradient(180deg, rgba(104, 216, 223, 0.15) 0%, rgba(42, 50, 50, 0.9) 100%);
    box-shadow: 0 0 1.25rem rgba(104, 216, 223, 0.3);
}

/* ?�어�??�택 ?�상 */
.blessing-card.selected.tier-normal {
    border-color: #68D8DF;
    box-shadow: 0 0 1.25rem rgba(104, 216, 223, 0.3);
}

.blessing-card.selected.tier-plus {
    border-color: #f0c040;
    background: linear-gradient(180deg, rgba(240, 192, 64, 0.15) 0%, rgba(35, 45, 60, 0.9) 100%);
    box-shadow: 0 0 1.25rem rgba(240, 192, 64, 0.3);
}

.blessing-card.selected.tier-plusplus {
    border-color: #ff6b6b;
    background: linear-gradient(180deg, rgba(255, 107, 107, 0.15) 0%, rgba(40, 35, 50, 0.9) 100%);
    box-shadow: 0 0 1.25rem rgba(255, 107, 107, 0.3);
}

/* 코스??배�? - ?�단 중앙 */
.blessing-cost-badge {
    position: absolute;
    top: -0.625rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #68D8DF 0%, #4ab8c0 100%);
    border-radius: 0.625rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0d1117;
    box-shadow: 0 0.125rem 0.5rem rgba(104, 216, 223, 0.4);
    white-space: nowrap;
}

.blessing-cost-badge .star-icon {
    font-size: 0.75rem;
}

/* 가???�이�?- ?��? */
.blessing-card .blessing-icon {
    display: none;
}

/* 가???�름 */
.blessing-card .blessing-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-top: 0.5rem;
}

/* ?�과 ?�약 */
.blessing-effects-summary {
    width: 100%;
    flex: 1;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    color: #c8d1dc;
    line-height: 1.6;
}

.blessing-effects-summary .effect-line {
    margin-bottom: 0.25rem;
}

.blessing-effects-summary .effect-value-normal {
    color: #68D8DF;
    font-weight: 500;
}

.blessing-effects-summary .effect-value-highlight {
    color: #f0c040;
    font-weight: 600;
}

.blessing-effects-summary .effect-different {
    color: #f0c040;
    font-weight: 500;
}

/* 티어별 변경되는 값 하이라이트 */
.blessing-effects-summary .effect-highlight {
    color: #f0c040;
    font-weight: 600;
}

.blessing-effects-summary .effect-more {
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.25rem;
}

/* ?�기 ?�용 뷰어 모드 */
.blessing-viewer-mode .blessing-card {
    cursor: default;
}

.blessing-viewer-mode .blessing-card:hover {
    transform: none;
    border-color: rgba(74, 111, 165, 0.4);
    background: linear-gradient(180deg, rgba(25, 35, 50, 0.9) 0%, rgba(35, 45, 60, 0.9) 100%);
}

.blessing-viewer-mode .blessing-card.selected:hover {
    border-color: #68D8DF;
    background: linear-gradient(180deg, rgba(104, 216, 223, 0.15) 0%, rgba(42, 50, 50, 0.9) 100%);
}

.blessing-viewer-mode .blessing-card.not-selected {
    opacity: 0.4;
}

.blessing-viewer-mode .tier-indicator {
    color: #68D8DF;
    font-size: 0.9em;
}

/* ?�어 ?�택 버튼??*/
.blessing-tier-buttons {
    display: flex;
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.25rem;
}

.blessing-tier-buttons .tier-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.25rem;
    background: rgba(25, 35, 50, 0.8);
    border: 0.0625rem solid rgba(74, 111, 165, 0.5);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s;
}

.blessing-tier-buttons .tier-btn:hover {
    background: rgba(104, 216, 223, 0.2);
    border-color: rgba(104, 216, 223, 0.5);
}

.blessing-tier-buttons .tier-btn.active {
    background: rgba(104, 216, 223, 0.3);
    border-color: #68D8DF;
}

.blessing-tier-buttons .tier-btn .tier-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.blessing-tier-buttons .tier-btn .tier-cost {
    font-size: 0.75rem;
    color: #68D8DF;
}

.blessing-tier-buttons .tier-btn.active .tier-label {
    color: #68D8DF;
}

/* + ?�어 ?�상 */
.blessing-tier-buttons .tier-btn.tier-plus.active {
    background: rgba(236, 114, 129, 0.2);
    border-color: #EC7281;
}

.blessing-tier-buttons .tier-btn.tier-plus.active .tier-label,
.blessing-tier-buttons .tier-btn.tier-plus.active .tier-cost {
    color: #EC7281;
}

/* ++ ?�어 ?�상 */
.blessing-tier-buttons .tier-btn.tier-plusplus.active {
    background: rgba(91, 141, 239, 0.2);
    border-color: #5b8def;
}

.blessing-tier-buttons .tier-btn.tier-plusplus.active .tier-label,
.blessing-tier-buttons .tier-btn.tier-plusplus.active .tier-cost {
    color: #5b8def;
}

/* ===================================
   가???�세 보기
   =================================== */

.blessing-detail-view {
    padding: 0.5rem;
}

.blessing-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.blessing-detail-header .detail-icon {
    font-size: 3rem;
}

.blessing-detail-header .detail-title-wrap {
    flex: 1;
}

.blessing-detail-header .detail-name {
    font-size: 1.5rem;
    color: #68D8DF;
    margin: 0 0 0.25rem 0;
}

.blessing-detail-header .detail-cost {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: rgba(104, 216, 223, 0.15);
    border-radius: 0.75rem;
    font-size: 1rem;
    color: #68D8DF;
}

.blessing-detail-header .detail-cost .star {
    font-size: 0.9rem;
}

/* ?�어 ??*/
.blessing-tier-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.blessing-tier-tabs .tier-tab {
    flex: 1;
    padding: 0.625rem 1rem;
    background: rgba(25, 35, 50, 0.8);
    border: 0.0625rem solid rgba(74, 111, 165, 0.4);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.blessing-tier-tabs .tier-tab:hover {
    background: rgba(104, 216, 223, 0.15);
}

.blessing-tier-tabs .tier-tab.active {
    background: rgba(104, 216, 223, 0.25);
    border-color: #68D8DF;
    color: #68D8DF;
}

/* ?�세 ?�과 목록 */
.blessing-detail-effects {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.blessing-detail-effects .detail-effect {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: rgba(25, 35, 50, 0.6);
    border: 0.0625rem solid rgba(74, 111, 165, 0.3);
    border-radius: 0.5rem;
}

.blessing-detail-effects .effect-text {
    color: var(--text-primary);
    flex: 1;
}

.blessing-detail-effects .effect-text .effect-highlight {
    color: #f0c040;
    font-weight: 600;
}

.blessing-detail-effects .effect-value {
    color: #68D8DF;
    font-weight: 600;
    margin-left: 1rem;
    white-space: pre-line;
    text-align: right;
}

/* ===================================
   비교 ?�이�?
   =================================== */

.blessing-comparison {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 0.125rem solid rgba(74, 111, 165, 0.3);
}

.blessing-comparison .comparison-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.blessing-comparison .comp-icon {
    font-size: 1.5rem;
}

.blessing-comparison .comp-name {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: 0.625rem 0.75rem;
    text-align: center;
    border: 0.0625rem solid rgba(74, 111, 165, 0.3);
    font-size: 0.85rem;
}

.comparison-table th {
    background: rgba(25, 35, 50, 0.8);
    color: var(--text-secondary);
    font-weight: 500;
}

.comparison-table th:first-child {
    text-align: left;
    width: 40%;
}

.comparison-table td {
    background: rgba(20, 28, 40, 0.6);
    color: var(--text-primary);
    vertical-align: middle;
}

.comparison-table td.effect-name {
    text-align: left;
}

.comparison-table td.empty {
    color: var(--text-muted);
}

.comparison-table td.same-all {
    color: #68D8DF;
}

/* ===================================
   ?�라??가???�택�?(?�용)
   =================================== */

.blessing-selection-area {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.selected-blessings-preview {
    padding: 0.625rem 0.875rem;
    background: rgba(25, 35, 50, 0.6);
    border: 0.0625rem solid rgba(74, 111, 165, 0.4);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    min-height: 2.5rem;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.selected-blessings-preview .no-blessing-text {
    color: var(--text-muted);
    font-style: italic;
}

/* ?�택??가???�그 */
.selected-blessing-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    background: rgba(104, 216, 223, 0.15);
    border: 0.0625rem solid rgba(104, 216, 223, 0.4);
    border-radius: 1rem;
    font-size: 0.8rem;
}

.selected-blessing-tag .blessing-tag-name {
    color: var(--text-primary);
    font-weight: 500;
}

.selected-blessing-tag .blessing-tag-cost {
    color: #68D8DF;
    font-size: 0.75rem;
}

.selected-blessing-tag .remove-blessing {
    margin-left: 0.125rem;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.2s;
}

.selected-blessing-tag .remove-blessing:hover {
    color: #ff6b6b;
}

/* �?코스???�그 */
.blessing-total-tag {
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, rgba(104, 216, 223, 0.2) 0%, rgba(74, 184, 192, 0.2) 100%);
    border: 0.0625rem solid #68D8DF;
    border-radius: 0.75rem;
    color: #68D8DF;
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-blessing-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(104, 216, 223, 0.15);
    border: 0.0625rem solid rgba(104, 216, 223, 0.4);
    border-radius: 0.5rem;
    color: #68D8DF;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-blessing-select:hover {
    background: rgba(104, 216, 223, 0.3);
    border-color: #68D8DF;
}

/* 가???�택 ?�널 ?�터 */
.blessing-selector-footer {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid rgba(74, 111, 165, 0.3);
}

.blessing-selector-footer .btn-primary {
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #68D8DF 0%, #4ab8c0 100%);
    border: none;
    border-radius: 0.5rem;
    color: #0d1117;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.blessing-selector-footer .btn-primary:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 1rem rgba(104, 216, 223, 0.4);
}

/* 목록?�로 ?�아가�?버튼 */
.blessing-detail-wrapper {
    position: relative;
}

.btn-back-to-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(104, 216, 223, 0.15);
    border: 0.0625rem solid rgba(104, 216, 223, 0.4);
    border-radius: 0.375rem;
    color: #68D8DF;
    font-size: 0.85rem;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.btn-back-to-selector:hover {
    background: rgba(104, 216, 223, 0.3);
}

.blessing-selector-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blessing-selector-inline select {
    padding: 0.5rem 0.75rem;
    background: rgba(25, 35, 50, 0.9);
    border: 0.0625rem solid rgba(74, 111, 165, 0.5);
    border-radius: 0.375rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.blessing-selector-inline select:hover {
    border-color: #68D8DF;
}

.blessing-selector-inline select:focus {
    outline: none;
    border-color: #68D8DF;
    box-shadow: 0 0 0.5rem rgba(104, 216, 223, 0.3);
}

.btn-icon {
    padding: 0.5rem 0.625rem;
    background: rgba(104, 216, 223, 0.2);
    border: 0.0625rem solid rgba(104, 216, 223, 0.4);
    border-radius: 0.375rem;
    color: #68D8DF;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover:not(:disabled) {
    background: rgba(104, 216, 223, 0.4);
}

.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===================================
   반응??- 해상도 기반 스케일링 사용으로 비활성화
   =================================== */

/* 해상도별 스케일링은 JS에서 screen.height로 처리하므로
   미디어 쿼리는 사용하지 않음 */