:root {
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f7;
	--bg-tertiary: #e8e8ed;
	--border-subtle: rgba(0, 0, 0, 0.04);
	--border-default: rgba(0, 0, 0, 0.08);
	--text-primary: #1d1d1f;
	--text-secondary: #86868b;
	--text-tertiary: #aeaeb2;
	--accent: #0071e3;
	--accent-hover: #0077ed;
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
	--shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	--transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
	--font-body: 15px;
	--font-caption: 13px;
	--font-small: 11px;
}

body {
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
	background: var(--bg-secondary);
	color: var(--text-primary);
}

/* 컨테이너 */
.write-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 페이지 헤더 */
.write-page-header {
	padding: 20px 0;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-caption);
	color: var(--text-secondary);
	text-decoration: none;
	transition: var(--transition);
	margin-bottom: 16px;
}

.back-link:hover {
	color: var(--text-primary);
}

.write-page-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 12px;
}

.write-page-title i {
	color: var(--accent);
}

/* 폼 */
.write-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* 메인 작성 영역 */
.write-main {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-subtle);
	padding: 32px;
	box-shadow: var(--shadow-sm);
}

/* 상단 행 (카테고리, 공지) */
.write-top-row {
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
}

.write-top-row .write-field {
	flex: 1;
}

/* 필드 */
.write-field {
	margin-bottom: 20px;
}

.write-field:last-child {
	margin-bottom: 0;
}

.write-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 8px;
}

.write-label i {
	font-size: 12px;
	color: var(--text-tertiary);
}

.write-label .required {
	color: #ff3b30;
	font-style: normal;
}

/* 입력 필드 */
.write-input {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	font-size: var(--font-body);
	font-family: inherit;
	transition: var(--transition);
	background: var(--bg-primary);
}

.write-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

.write-input::placeholder {
	color: var(--text-tertiary);
}

.write-title {
	font-size: 18px;
	font-weight: 600;
}

/* 셀렉트 */
.write-select {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	font-size: var(--font-body);
	font-family: inherit;
	transition: var(--transition);
	background: var(--bg-primary);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.write-select:focus {
	outline: none;
	border-color: var(--accent);
}

/* 확장 변수 */
.write-extra-vars {
	padding: 20px;
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
	margin-bottom: 20px;
}

.write-extra-vars .write-field {
	margin-bottom: 16px;
}

.write-extra-vars .write-field:last-child {
	margin-bottom: 0;
}

.write-extra-input input,
.write-extra-input select,
.write-extra-input textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	font-size: var(--font-caption);
	font-family: inherit;
	background: var(--bg-primary);
}

.write-extra-input input:focus,
.write-extra-input select:focus,
.write-extra-input textarea:focus {
	outline: none;
	border-color: var(--accent);
}

/* 에디터 */
.write-editor {
	margin-top: 20px;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.write-editor iframe {
	border-radius: var(--radius-sm);
}

/* 하단 영역 */
.write-footer {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-subtle);
	padding: 24px 32px;
	box-shadow: var(--shadow-sm);
}

/* 비로그인 사용자 정보 */
.write-guest-info {
	display: flex;
	gap: 12px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border-subtle);
}

.write-field-inline {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
}

.write-label-sm {
	color: var(--text-tertiary);
	font-size: 14px;
}

.write-input-sm {
	flex: 1;
	border: none;
	background: transparent;
	font-size: var(--font-caption);
	font-family: inherit;
	color: var(--text-primary);
}

.write-input-sm:focus {
	outline: none;
}

.write-input-sm::placeholder {
	color: var(--text-tertiary);
}

/* 옵션 */
.write-options {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border-subtle);
}

.write-option {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-caption);
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition);
}

.write-option:hover {
	color: var(--text-primary);
}

.write-option input[type="checkbox"],
.write-option input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
}

.write-status-options {
	display: flex;
	gap: 16px;
	padding-left: 16px;
	border-left: 1px solid var(--border-subtle);
}

/* 액션 버튼 */
.write-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.write-actions-left,
.write-actions-right {
	display: flex;
	gap: 8px;
}

/* 버튼 */
.sendi-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	font-size: var(--font-caption);
	font-weight: 600;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
	border: none;
}

.sendi-btn-primary {
	background: var(--accent);
	color: white;
}

.sendi-btn-primary:hover {
	background: var(--accent-hover);
}

.sendi-btn-secondary {
	background: var(--bg-primary);
	color: var(--text-primary);
	border: 1px solid var(--border-default);
}

.sendi-btn-secondary:hover {
	border-color: var(--text-primary);
}

.sendi-btn-ghost {
	background: transparent;
	color: var(--text-secondary);
	padding: 12px 16px;
}

.sendi-btn-ghost:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

/* 반응형 */
@media (max-width: 768px) {
	.write-container {
		padding: 0 16px;
	}

	.write-main,
	.write-footer {
		padding: 24px;
	}

	.write-top-row {
		flex-direction: column;
	}

	.write-guest-info {
		flex-direction: column;
	}

	.write-options {
		flex-direction: column;
		gap: 12px;
	}

	.write-status-options {
		padding-left: 0;
		border-left: none;
		padding-top: 12px;
		border-top: 1px solid var(--border-subtle);
	}

	.write-actions {
		flex-direction: column;
		gap: 12px;
	}

	.write-actions-left,
	.write-actions-right {
		width: 100%;
	}

	.write-actions-right {
		flex-direction: column;
	}

	.write-actions-right .sendi-btn {
		width: 100%;
		justify-content: center;
	}
}