bitforum-frontend/app/(main)/(account)/login-log/style.scss

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

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

	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		flex-wrap: wrap;
		gap: 0.5rem;

		.summary {
			font-size: 16px;
		}
	}

	#loginTypeTab {
		display: flex;

		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(--brand-orange);
				border-bottom-color: var(--brand-orange);
			}

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

	.mypage-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, 18%, 160px)
					1fr
					1fr
					1fr
					clamp(50px, 10%, 80px);
				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, 18%, 160px)
						1fr
						1fr
						1fr
						clamp(50px, 10%, 80px);
					column-gap: 0.75rem;
					align-items: center;

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

						&.ua {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				// Mobile
				dl {
					dt {
						font-size: 1rem;
						display: flex;
						align-items: center;
						gap: 0.5rem;
					}

					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);

								&.ua {
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									flex: 1;
									min-width: 0;
								}
							}
						}
					}
				}

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

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

		.badge-success {
			display: inline-block;
			padding: 0.125rem 0.5rem;
			border-radius: 0.25rem;
			font-size: 0.75rem;
			font-weight: 600;
			color: var(--color-success);
			background-color: #dcfce7;
		}

		.badge-fail {
			display: inline-block;
			padding: 0.125rem 0.5rem;
			border-radius: 0.25rem;
			font-size: 0.75rem;
			font-weight: 600;
			color: var(--color-danger);
			background-color: #fee2e2;
		}
	}
}