ANTOOZA-FRONTEND/app/(main)/attendance/style.scss

#attendancePage {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 32px 32px 32px;

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

	.attendance {
		&__title-row {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 16px;
		}

		&__help-btn {
			color: var(--text-muted);
			transition: color 0.15s;
			line-height: 1;

			&:hover {
				color: var(--text-primary);
			}
		}

		&__section {
			position: relative;
			margin-bottom: 16px;
		}

		&__notice {
			text-align: center;
			color: var(--text-muted);
			padding: 2rem;
		}

		// ── 캘린더 ──
		&__calendar {
			border: 1px solid var(--border-default);
			border-radius: 8px;
			overflow: hidden;
		}

		&__calendar-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12px 16px;
			background-color: var(--bg-elevated);
			border-bottom: 1px solid var(--border-default);

			span {
				font-size: 1rem;
				font-weight: 600;
			}

			button {
				width: 32px;
				height: 32px;
				border-radius: 6px;
				font-size: 1rem;
				font-weight: 600;
				color: var(--text-secondary);
				transition: background-color 0.15s, color 0.15s;

				&:hover {
					background-color: var(--border-default);
					color: var(--text-primary);
				}

				&:disabled {
					opacity: 0.3;
					cursor: not-allowed;

					&:hover {
						background-color: transparent;
						color: var(--text-secondary);
					}
				}
			}
		}

		&__calendar-grid {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
		}

		&__calendar-weekday {
			padding: 8px 4px;
			text-align: center;
			font-size: 0.75rem;
			font-weight: 600;
			color: var(--text-secondary);
			background-color: var(--bg-elevated);
			border-right: 1px solid var(--border-default);
			border-bottom: 1px solid var(--border-default);

			&:nth-child(7n) {
				border-right: none;
			}

			&:first-child,
			&:last-child {
				color: var(--color-danger);
			}
		}

		&__calendar-cell {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			padding: 8px 4px;
			min-height: 64px;
			background-color: var(--background);
			border-right: 1px solid var(--border-default);
			border-bottom: 1px solid var(--border-default);
			cursor: pointer;
			transition: background-color 0.15s;

			&:nth-child(7n) {
				border-right: none;
			}

			&:hover {
				background-color: var(--bg-elevated);

				.attendance__calendar-day {
					border-color: var(--text-link);
				}
			}

			&:active {
				background-color: var(--border-default);
			}

			&--empty {
				cursor: default;
				&:hover {
					background-color: var(--background);

					.attendance__calendar-day {
						border-color: transparent;
					}
				}
			}

			&--today {
				.attendance__calendar-day {
					background-color: var(--text-link);
					color: #fff;
				}
			}

			&--attended {
				background-color: #f0fdf4;

				.dark & {
					background-color: rgba(34, 197, 94, 0.08);
				}
			}

			&--selected {
				background-color: var(--list-row-active);

				.attendance__calendar-day {
					border-color: var(--text-link);
					border-width: 2px;
					font-weight: 700;
				}
			}

			&--future {
				cursor: not-allowed;
				opacity: 0.4;

				&:hover {
					background-color: var(--background);

					.attendance__calendar-day {
						border-color: transparent;
					}
				}
			}
		}

		&__calendar-day {
			font-size: 0.813rem;
			font-weight: 500;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			border: 1px solid transparent;
			transition: border-color 0.15s, background-color 0.15s;
		}

		&__calendar-bottom {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			margin-top: auto;
			padding: 9px 4px 5px 4px;
		}

		&__calendar-stamp {
			color: #d94040;
			transform: rotate(-12deg);
			opacity: 0.85;
			line-height: 1;
			min-width: 16px;
			min-height: 16px;
		}

		&__calendar-count {
			display: flex;
			align-items: center;
			gap: 3px;
			font-size: 0.75rem;
			color: var(--text-muted);
			line-height: 1;
			min-height: 14px;
		}

		// ── 출석 입력 ──
		&__form {
			display: flex;
			gap: 8px;
			margin-bottom: 24px;
		}

		&__form-input {
			flex: 1;
			padding: 10px 14px;
			border: 1px solid var(--border-default);
			border-radius: 6px;
			font-size: 0.875rem;
			background-color: var(--background);
			color: var(--text-primary);
			outline: none;
			transition: border-color 0.15s;

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

			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}

		&__form-btn {
			padding: 10px 24px;
			border-radius: 6px;
			font-size: 0.875rem;
			font-weight: 600;
			color: #fff;
			background-color: var(--text-link);
			white-space: nowrap;
			transition: background-color 0.15s, opacity 0.15s;

			&:hover {
				opacity: 0.9;
			}

			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}

		// ── 리스트 ──
		&__list-toolbar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 8px;
			padding: 12px 0;
			flex-wrap: wrap;
		}

		&__list-toolbar-left {
			display: flex;
			align-items: baseline;
			gap: 10px;
		}

		&__list-toolbar-total {
			font-size: 0.813rem;
			font-weight: 500;
			color: var(--text-muted);
		}

		&__list-toolbar-right {
			display: flex;
			gap: 8px;
		}

		&__list-toolbar-select {
			padding: 6px 10px;
			border: 1px solid var(--border-default);
			border-radius: 6px;
			font-size: 0.813rem;
			background-color: var(--background);
			color: var(--text-primary);
			cursor: pointer;

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

		&__list {
			border-top: 1px solid var(--border-default);
		}

		&__list-header {
			display: grid;
			grid-template-columns: 60px 120px 1fr 160px 80px 80px 80px;
			column-gap: 0.75rem;
			padding: 10px 12px;
			background-color: var(--bg-elevated);
			border-bottom: 1px solid var(--border-default);

			span {
				font-size: 0.813rem;
				font-weight: 600;
				color: var(--text-secondary);
				text-align: center;
			}

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

		&__list-row {
			border-bottom: 1px solid var(--border-default);

			&:hover {
				background-color: var(--bg-elevated);
			}
		}

		&__list-row-pc {
			display: grid;
			grid-template-columns: 60px 120px 1fr 160px 80px 80px 80px;
			column-gap: 0.75rem;
			padding: 10px 12px;
			align-items: center;

			> span {
				font-size: 0.813rem;
				text-align: center;
			}

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

		&__list-row-mobile {
			display: none;
			padding: 10px 12px;
			flex-direction: column;
			gap: 4px;

			@media (max-width: 768px) {
				display: flex;
			}
		}

		&__list-row-mobile-top {
			display: flex;
			align-items: center;
			gap: 6px;
		}

		&__list-row-mobile-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 28px;
		}

		&__list-rank {
			font-weight: 700;
			color: var(--text-link);
			min-width: 28px;
			text-align: center;
		}

		&__list-member {
			display: flex;
			align-items: center;
			gap: 6px;
			justify-content: center;
		}

		&__list-member-name {
			font-weight: 500;
			font-size: 0.875rem;
		}

		&__list-greeting {
			font-size: 0.813rem;
			color: var(--text-secondary);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&__list-point {
			font-weight: 600;
			color: var(--color-danger);
		}

		&__list-exp {
			font-weight: 600;
			color: var(--text-link);
		}

		&__list-streak {
			font-weight: 600;
			color: var(--color-success);
		}

		&__list-meta {
			display: flex;
			gap: 8px;
			font-size: 0.75rem;
			color: var(--text-muted);
		}

		&__empty {
			text-align: center;
			padding: 2.5rem;
			color: var(--text-muted);
		}

	}

	// ── 태블릿 (768 ~ 1024) ──
	@media (min-width: 769px) and (max-width: 1024px) {
		padding: 0 20px 24px 20px;

		.attendance {
			&__calendar-cell {
				min-height: 56px;
				padding: 6px 2px;
			}

			&__calendar-bottom {
				padding: 8px 3px 4px 3px;
			}

			&__list-header {
				grid-template-columns: 50px 100px 1fr 140px 70px 70px 70px;
			}

			&__list-row-pc {
				grid-template-columns: 50px 100px 1fr 140px 70px 70px 70px;
			}
		}
	}

	// ── 모바일 (≤ 768) ──
	@media (max-width: 768px) {
		padding: 0 12px 16px 12px;

		h1 {
			font-size: 18px;
		}

		.attendance {
			&__calendar-cell {
				min-height: 44px;
				padding: 4px 2px;
			}

			&__calendar-stamp {
				svg {
					width: 12px;
					height: 12px;
				}
			}

			&__calendar-bottom {
				padding: 4px 2px 2px 2px;
			}

			&__calendar-count {
				font-size: 0.688rem;

				svg {
					width: 12px;
					height: 12px;
				}
			}

			&__form {
				flex-direction: column;
			}

			&__form-btn {
				width: 100%;
			}
		}
	}
}

// ── 출석부 안내 Dialog ──
// Radix Dialog 는 Portal 로 body 직속에 렌더됨.
// Tailwind preflight (@tailwind base) 와 shadcn DialogDescription 의 'text-sm text-muted-foreground'
// 둘 다 cascade 로 우리 styles 를 약화시키므로 핵심 룰엔 !important 로 강제 한다.
.attendance__guide {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	color: var(--text-primary) !important;
	font-size: 0.875rem !important;

	.attendance__guide-section {
		display: block !important;

		h3, h4 {
			display: block !important;
			font-size: 0.9375rem !important;
			font-weight: 700 !important;
			margin: 0 0 6px !important;
			color: var(--text-primary) !important;
			line-height: 1.4 !important;
		}

		p {
			font-size: 0.875rem !important;
			color: var(--text-secondary) !important;
			margin: 0 0 4px !important;
			line-height: 1.6 !important;
		}

		strong {
			color: var(--text-primary) !important;
			font-weight: 700 !important;
		}

		p + p {
			margin-top: 2px !important;
		}
	}

	.attendance__guide-table {
		display: table !important;
		width: 100% !important;
		border-collapse: collapse !important;
		margin-top: 10px !important;
		font-size: 0.8125rem !important;
		border: 1px solid var(--border-default) !important;
		border-radius: 6px !important;
		overflow: hidden !important;
		table-layout: auto !important;

		thead {
			display: table-header-group !important;
		}

		thead tr {
			display: table-row !important;
		}

		thead th {
			display: table-cell !important;
			background: var(--bg-elevated) !important;
			color: var(--text-secondary) !important;
			font-weight: 600 !important;
			text-align: center !important;
			padding: 8px 12px !important;
			border-bottom: 1px solid var(--border-default) !important;
			white-space: nowrap !important;
		}

		tbody {
			display: table-row-group !important;
		}

		tbody tr {
			display: table-row !important;
		}

		tbody th,
		tbody td {
			display: table-cell !important;
			padding: 6px 12px !important;
			border-top: 1px solid var(--border-default) !important;
			line-height: 1.5 !important;
		}

		// 1열 (순위) - <th scope="row"> — 가운데, 강조
		tbody th {
			text-align: center !important;
			font-weight: 700 !important;
			width: 72px !important;
			color: var(--text-primary) !important;
			background: transparent !important;
		}

		// 2~3열 (보상 숫자) - 우측 정렬, 숫자 자리 정렬
		tbody td {
			text-align: right !important;
			font-variant-numeric: tabular-nums !important;
			color: var(--text-secondary) !important;
		}

		tbody tr:nth-child(even) th,
		tbody tr:nth-child(even) td {
			background: var(--bg-subtle) !important;
		}

		tbody tr:hover th,
		tbody tr:hover td {
			background: var(--bg-elevated) !important;
		}
	}
}