ANTOOZA-FRONTEND/app/(main)/(account)/charge-logs/style.scss

#chargeLogs {
	padding: 0 32px 32px 32px;

	h1 {
		font-size: 22px;
		margin-bottom: 10px;
	}

	.charge-logs {
		&__header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			flex-wrap: wrap;
			gap: 0.5rem;
		}

		&__summary {
			font-size: 16px;
		}

		&__tabs {
			display: flex;
			align-items: center;
			gap: 0.25rem;

			button {
				padding: 0.5rem 1rem;
				font-size: 0.875rem;
				color: var(--text-secondary);
				border-bottom: 2px solid transparent;
				transition: color 0.2s, border-color 0.2s;

				&:hover {
					color: var(--text-link);
					border-bottom-color: var(--text-link);
				}

				&.active {
					color: var(--text-link);
					font-weight: 600;
					border-bottom-color: var(--text-link);
				}
			}
		}

		&__filter {
			margin-right: 0.5rem;
			padding: 0.4rem 1.75rem 0.4rem 0.75rem;
			font-size: 0.875rem;
			border: 1px solid var(--border-default);
			border-radius: 6px;
			background-color: var(--bg-default, #fff);
			color: var(--text-primary);
			cursor: pointer;
			appearance: none;
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8.5L2 4.5h8z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 0.5rem center;
			background-size: 10px;

			&:focus {
				outline: none;
				border-color: var(--text-link);
			}
		}

		&__reason {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 0.8rem !important;
			color: var(--text-secondary);
		}

		&__list {
			border-top: 1px solid var(--border-default);
			margin: 0.75rem 0;

			// 헤더 행
			article:nth-of-type(1) {
				background-color: #f9fafb;
				border-bottom: 1px solid var(--border-default);
				padding: 0.5rem 0;

				ul {
					display: grid;
					grid-template-columns:
						clamp(100px, 14%, 140px)
						1fr
						clamp(70px, 10%, 90px)
						clamp(70px, 10%, 90px)
						clamp(70px, 10%, 90px)
						clamp(50px, 8%, 70px);
					column-gap: 0.75rem;

					li {
						text-align: center;
						font-size: 0.875rem;
						color: var(--text-secondary);
					}
				}

				@media (max-width: 1024px) {
					display: none;
				}
			}

			// 데이터 행
			article:nth-of-type(2) {
				box-sizing: border-box;

				section {
					padding: 0.5rem 0;
					box-sizing: inherit;
					border-bottom: 1px solid var(--border-default);

					&:hover {
						background-color: #faffd1;
					}

					// PC
					> ol {
						display: grid;
						grid-template-columns:
							clamp(100px, 14%, 140px)
							1fr
							clamp(70px, 10%, 90px)
							clamp(70px, 10%, 90px)
							clamp(70px, 10%, 90px)
							clamp(50px, 8%, 70px);
						column-gap: 0.75rem;
						align-items: center;

						> li {
							text-align: center;
							font-size: 0.875rem;
						}
					}

					// Mobile
					dl {
						dt {
							font-size: 1rem;
							word-break: keep-all;
							overflow-wrap: break-word;
						}

						dd {
							ul {
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								justify-content: start;
								padding-top: 0.4rem;
								column-gap: 1rem;

								li {
									font-size: 0.813rem;
									color: var(--text-muted);

									&:last-child {
										flex-grow: 1;
										text-align: right;
									}
								}
							}
						}
					}

					@media (max-width: 1024px) {
						ol {
							display: none;
						}
						dl {
							display: block;
						}
					}
				}

				> .empty {
					text-align: center;
					padding: 2.5rem;
					color: var(--text-muted);
				}
			}

			.amount-plus {
				font-weight: 600;
				color: var(--color-danger) !important;
			}

			.amount-minus {
				font-weight: 600;
				color: var(--text-link) !important;
			}

			.status--paid {
				color: var(--color-success);
				font-weight: 600;
			}

			.status--pending {
				color: var(--color-warning);
				font-weight: 600;
			}

			.status--failed {
				color: var(--color-danger);
				font-weight: 600;
			}

			.status--cancelled {
				color: var(--text-muted);
			}
		}

		&__order-id {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-family: monospace;
			font-size: 0.8rem !important;
		}
	}
}