/* 모든 화면이 함께 쓰는 스타일 */
/* 넓은 화면(PC)에서는 가운데 1280px 안에 웹 형태로, 좁은 화면(휴대폰)에서는 화면 가로폭에 맞춰서 보여 준다. */
/* src/main/webapp 안의 파일은 주소 그대로 열린다 → /css/app.css (bootRun 중에 고치면 새로고침만으로 반영된다) */

/* 칸의 너비에 테두리·안쪽 여백까지 포함해서 계산한다 (width: 100%가 화면 밖으로 넘치지 않게) */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: system-ui, sans-serif;
	background: #f5f5f5;
	color: #222;
}

/* 페이지 전체 틀: 최대 1280px, 그보다 좁으면 화면 폭에 맞춰 줄어든다 */
main {
	max-width: 1280px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 16px 32px 48px;
	background: #fff;
}

/* 화면 맨 위: 왼쪽에 제목(또는 목록 링크), 오른쪽에 버튼 */
.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 16px;
	margin-bottom: 24px;
	border-bottom: 1px solid #eee;
}

h1 {
	margin: 0;
	font-size: 1.4rem;
}

/* 상단 메뉴 (피드 · 피드백): 제목 아래 작은 글자. 지금 있는 화면은 초록 굵게 */
.site-nav {
	display: flex;
	gap: 12px;
	margin-top: 6px;
	font-size: 0.95rem;
}

.site-nav a {
	color: #666;
	text-decoration: none;
}

.site-nav a.active {
	color: #2f7d32;
	font-weight: 600;
}

a {
	color: #2f7d32;
}

.button,
button {
	display: inline-block;
	padding: 10px 18px;
	border: 0;
	border-radius: 8px;
	background: #2f7d32;
	color: #fff;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
}

/* ---- 목록: 카드 격자 ---- */
/* grid: 칸을 바둑판처럼 나눈다. */
/* repeat(auto-fill, minmax(260px, 1fr)): 한 칸을 최소 260px로 잡고, 화면 폭에 들어가는 만큼 칸 수를 자동으로 정한다. */
/* → PC(1280px)는 4칸, 태블릿은 2~3칸, 휴대폰은 1칸이 된다. 칸 수를 따로 정하지 않아도 된다. */
.feed {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.card {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* 사진을 정사각형으로 맞춘다. 비율이 다른 사진은 가운데를 기준으로 잘라서 채운다(cover). */
/* → 세로 사진·가로 사진이 섞여도 카드 높이가 같아서 격자가 가지런해진다. */
.card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	background: #eee;
}

.card-kcal {
	margin: 8px 0 0;
	font-size: 1.1rem;
	font-weight: 700;
}

.meta {
	margin: 8px 0 0;
	color: #666;
	font-size: 0.9rem;
}

.memo {
	margin: 4px 0 0;
	white-space: pre-wrap;
}

/* 목록에서는 메모를 두 줄까지만 보여 주고 나머지는 …으로 줄인다 (전체는 상세 화면에서) */
.card .memo {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.empty,
.more {
	display: block;
	padding: 48px 0;
	text-align: center;
}

/* ---- 상세: PC에서는 사진 | 내용 두 칸, 휴대폰에서는 위아래 ---- */
/* 3fr / 2fr: 남는 폭을 3:2로 나눈다. minmax(0, ...)는 긴 내용 때문에 칸이 넘치지 않게 하는 관용구 */
.detail {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
	gap: 32px;
	align-items: start;
}

/* 상세 사진은 자르지 않고 전체를 보여 준다(contain). 화면보다 길지 않게 높이를 제한한다. */
.detail img {
	display: block;
	width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 8px;
	background: #f0f0f0;
}

/* AI 분석 결과: 칼로리 합계를 가장 크게 보여 준다 */
.analysis {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.analysis .total-kcal {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 700;
}

.analysis table {
	width: 100%;
	margin-top: 12px;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.analysis th,
.analysis td {
	padding: 6px 4px;
	border-bottom: 1px solid #eee;
	text-align: left;
}

.delete-form {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

/* 지우기처럼 되돌리기 어려운 버튼은 빨간색 */
button.danger {
	background: #c62828;
}

/* ---- 댓글 (상세 화면 아래) ---- */
/* 긴 글이 읽기 좋은 폭으로 제한한다 (개인정보처리방침과 같은 760px) */
.comments {
	max-width: 760px;
	margin-top: 40px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.comments h2 {
	margin: 0;
	font-size: 1.1rem;
}

.comment {
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}

.comment .meta {
	margin: 0;
}

/* 댓글 내용: 사용자가 넣은 줄바꿈을 그대로 보여 준다 */
.comment-content {
	margin: 4px 0 0;
	white-space: pre-wrap;
	word-break: break-word;
}

/* "삭제"를 누르면 펼쳐지는 비밀번호 칸. 글자는 작고 흐리게 */
.comment-delete {
	margin-top: 4px;
}

.comment-delete summary {
	color: #999;
	font-size: 0.85rem;
	cursor: pointer;
}

/* 펼쳐진 뒤: 비밀번호 칸과 작은 삭제 버튼을 한 줄에 */
.comment-delete form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 8px;
}

.comment-delete input[type="password"] {
	width: 160px;
}

/* 댓글 삭제 버튼은 form button의 "가득 채우기" 규칙 대신 작게 */
.comment-delete button {
	width: auto;
	margin-top: 0;
	padding: 6px 12px;
	font-size: 0.85rem;
}

.comment-delete .error {
	width: 100%;
	margin: 0;
}

.comment-form {
	margin-top: 24px;
}

/* ---- 피드백 게시판 ---- */
/* 목록: 한 줄에 배지 + 제목, 아래에 닉네임·시간. 긴 글이라 760px로 제한 */
.feedback-list {
	max-width: 760px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.feedback-list li {
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}

.feedback-list li > a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.feedback-list .meta {
	margin-top: 4px;
}

/* 처리 상태 배지: 둥근 알약 모양, 상태마다 색이 다르다 (FeedbackProgress.cssClass) */
.badge {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	vertical-align: middle;
}

.badge-received {
	background: #eee;
	color: #555;
}

.badge-in-progress {
	background: #e3f2fd;
	color: #1565c0;
}

.badge-done {
	background: #e8f5e9;
	color: #2e7d32;
}

.badge-on-hold {
	background: #fff3e0;
	color: #ef6c00;
}

/* 목록에서 운영자 답변이 달린 글 표시 */
.reply-mark {
	margin-left: 6px;
	color: #2f7d32;
	font-size: 0.8rem;
}

/* 상세 */
.feedback-detail {
	max-width: 760px;
}

.feedback-title {
	margin: 8px 0 0;
	font-size: 1.3rem;
}

.feedback-content {
	margin-top: 16px;
	white-space: pre-wrap;
	word-break: break-word;
}

/* 운영자 답변: 연한 회색 상자로 구분 */
.admin-reply {
	margin-top: 24px;
	padding: 16px;
	border-radius: 8px;
	background: #f7f7f7;
}

.admin-reply .meta {
	margin: 0;
}

.admin-reply .feedback-content {
	margin-top: 8px;
}

/* ---- 글쓰기 ---- */
/* 입력칸이 1280px까지 길어지면 쓰기 불편해서, 글쓰기 영역만 가운데 560px로 좁힌다. */
.narrow {
	max-width: 560px;
	margin: 0 auto;
}

label {
	display: block;
	margin-top: 16px;
	font-weight: 600;
}

/* 아이폰은 글자가 16px보다 작은 입력칸을 누르면 화면을 확대해 버려서 1rem(16px)로 둔다 */
input[type="text"],
input[type="password"],
textarea {
	width: 100%;
	padding: 8px;
	font-size: 1rem;
}

/* 체크박스와 글자를 한 줄에 나란히 (일반 label처럼 굵게 하지 않는다) */
label.checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	font-weight: 400;
}

/* 체크박스를 손가락으로 누르기 쉽게 조금 키운다 */
label.checkbox input {
	width: 20px;
	height: 20px;
}

form button {
	width: 100%;
	margin-top: 24px;
}

.hint {
	margin: 4px 0 0;
	color: #888;
	font-size: 0.85rem;
}

.error {
	margin: 4px 0 0;
	color: #c62828;
}

/* ---- 에러 화면 ---- */
.error-page {
	text-align: center;
	padding-top: 80px;
}

.error-page .button {
	margin-top: 24px;
}

.error-page .status {
	margin: 0;
	color: #999;
	font-size: 3rem;
	font-weight: 700;
}

/* ---- 공통 바닥글 ---- */
.site-footer {
	margin-top: 48px;
	padding-top: 16px;
	border-top: 1px solid #eee;
	color: #888;
	font-size: 0.85rem;
	text-align: center;
}

.site-footer a {
	color: #888;
}

/* ---- 정책 페이지(이용약관·개인정보처리방침): 긴 글이라 읽기 좋은 폭(760px)으로 좁힌다 ---- */
.policy {
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.7;
}

.policy h2 {
	margin-top: 32px;
	font-size: 1.1rem;
}

.policy table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.policy th,
.policy td {
	padding: 8px;
	border: 1px solid #ddd;
	text-align: left;
	vertical-align: top;
}

.policy th {
	background: #f7f7f7;
}

/* ---- 좁은 화면(휴대폰·작은 태블릿) ---- */
/* @media (max-width: 768px): 화면 폭이 768px 이하일 때만 아래 규칙을 덧씌운다. */
@media (max-width: 768px) {
	main {
		padding: 12px 16px 32px;
	}

	h1 {
		font-size: 1.2rem;
	}

	.feed {
		gap: 20px;
	}

	/* 상세를 두 칸에서 한 칸(위: 사진, 아래: 내용)으로 바꾼다 */
	.detail {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ---- 첫 화면 머리(.top-home): 왼쪽 제목·메뉴 | 가운데 한 줄 소개 | 오른쪽 올리기 버튼 ---- */
/* flex 대신 grid: 양옆 칸을 같은 폭(1fr)으로 두면 가운데 칸이 화면 한가운데에 온다 */
.top-home {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.top-home .button {
	justify-self: end;
}

/* 한 줄 소개: 큰 글자 + 작은 설명 */
.slogan {
	margin: 0;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: #2f7d32;
	letter-spacing: 0.02em;
}

.slogan small {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	font-weight: 400;
	color: #888;
	letter-spacing: 0;
}

/* 좁은 화면: 한 줄에 셋이 안 들어가므로 첫 줄에 제목·버튼, 둘째 줄에 소개 */
@media (max-width: 768px) {
	.top-home {
		grid-template-columns: 1fr auto;
	}

	.top-home > div {
		grid-row: 1;
		grid-column: 1;
	}

	.top-home .button {
		grid-row: 1;
		grid-column: 2;
	}

	.top-home .slogan {
		grid-row: 2;
		grid-column: 1 / -1;
		margin-top: 12px;
		font-size: 1.1rem;
	}
}