/* 모바일 전용 스타일 (max-width: 768px) */

@media (max-width: 768px) {
	/* 레이아웃 - 단일 컬럼 */
	.layout {
		grid-template-columns: 1fr;
	}
	
	/* 사이드바 - 접이식 */
	.sidebar {
		position: fixed;
		left: -280px;
		top: 0;
		width: 280px;
		height: 100vh;
		z-index: 100;
		transition: left 0.3s ease, visibility 0.3s;
		visibility: hidden;
	}

	.sidebar.open {
		left: 0;
		visibility: visible;
	}
	
	/* 사이드바 오버레이 */
	.sidebar-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
	}
	
	.sidebar-overlay.show {
		display: block;
	}
	
	/* 메뉴 버튼 */
	.mobile-menu-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 6px;
		color: var(--text);
		font-size: 20px;
		cursor: pointer;
		flex-shrink: 0;
	}
	
	/* 컨트롤 영역 */
	.controls {
		padding: 12px;
		gap: 10px;
	}
	
	/* 태그 - 스크롤 가능 */
	.tags {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}
	
	.tags::-webkit-scrollbar {
		height: 4px;
	}
	
	.tag {
		flex-shrink: 0;
		padding: 5px 10px;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}
	
	/* 검색 행 - 모바일 접기/펼치기 */
	.search-row {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.keyword-box {
		flex: 1;
		min-width: 0;
		height: 36px;
	}

	.keyword-input {
		font-size: 16px; /* iOS 줌 방지 */
	}

	.op-toggle.mini {
		flex-shrink: 0;
		height: 32px;
	}

	/* 검색 확장 버튼 - 모바일에서 표시 */
	.search-expand-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 6px;
		color: var(--text-secondary);
		font-size: 18px;
		font-weight: 600;
		cursor: pointer;
		flex-shrink: 0;
		transition: all 0.2s;
	}

	.search-expand-btn:hover,
	.search-expand-btn:active {
		background: var(--surface-hover);
		border-color: var(--accent);
		color: var(--accent);
	}

	.search-expand-btn.expanded {
		background: var(--accent);
		border-color: var(--accent);
		color: #000;
	}

	/* 검색 추가 항목 - 모바일에서 접기/펼치기 */
	.search-extra-item {
		display: none;
	}

	.search-row.expanded .search-extra-item {
		display: flex;
	}

	/* 확장 시 줄바꿈 처리 */
	.search-row.expanded {
		flex-wrap: wrap;
	}

	.search-row.expanded .search-extra-item.keyword-box {
		flex: 1;
		min-width: 100px;
	}

	.search-row.expanded .search-extra-item.op-toggle {
		flex-shrink: 0;
	}
	
	/* 옵션 행 - 래핑 */
	.options-row {
		flex-wrap: wrap;
		gap: 10px;
		font-size: 12px;
	}
	
	.option {
		gap: 6px;
	}
	
	.emoji-toggle, .size-toggle {
		height: 28px;
	}
	
	.emoji-btn, .size-btn {
		padding: 0 8px;
		font-size: 11px;
	}
	
	.fade-input {
		width: 40px;
		font-size: 12px;
	}
	
	.live {
		font-size: 12px;
		padding: 6px 10px;
	}
	
	.live-dot, .pause-dot {
		width: 6px;
		height: 6px;
	}
	
	/* 피드 */
	.feed {
		padding: 6px 8px;
	}
	
	/* 메시지 */
	.msg {
		padding: 8px;
		border-radius: 4px;
		gap: 8px;
	}

	.msg-avatar {
		width: 28px;
		height: 28px;
	}
	
	.msg-header {
		gap: 6px;
		flex-wrap: wrap;
	}
	
	.msg-channel {
		font-size: 10px;
		padding: 1px 4px;
	}
	
	.msg-author {
		font-size: 12px;
	}
	
	.msg-time {
		font-size: 10px;
	}
	
	.msg-content {
		font-size: 13px;
		line-height: 1.5;
		font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
	}

	/* 차단/팔로우 버튼 - 모바일에서 항상 표시 */
	.msg-block-btn {
		opacity: 0.3;
		font-size: 11px;
	}

	.msg-follow-btn {
		opacity: 0.7;
		font-size: 10px;
		padding: 2px 6px;
	}

	.msg-follow-btn.followed {
		opacity: 1;
	}

	/* 팔로우만 보기 버튼 */
	.follow-filter-btn {
		font-size: 11px;
		padding: 5px 8px;
	}

	/* 팔로우 배지 */
	.msg-followed-badge {
		font-size: 9px;
	}

	/* 설정 모달 - 모바일 */
	.modal {
		width: 95%;
		max-width: none;
		margin: 10px;
		max-height: 90vh;
	}

	.modal-body {
		padding: 16px;
		max-height: calc(90vh - 60px);
	}

	.settings-section h3 {
		font-size: 14px;
	}

	.settings-desc {
		font-size: 12px;
	}

	.blocked-list, .followed-list {
		max-height: 200px;
		overflow-y: auto;
	}

	.blocked-item, .followed-item {
		padding: 8px 10px;
		font-size: 13px;
	}

	.settings-btn-danger, .settings-btn-secondary {
		width: 100%;
		padding: 10px;
		font-size: 13px;
	}

	/* 활성 유저 배지 */
	.active-users {
		font-size: 11px;
		padding: 3px 8px;
	}

	/* 데스크톱 접기 버튼 숨기기 */
	.sidebar-collapse-btn {
		display: none;
	}

	/* 모바일에서 sidebar-collapsed 상태 무력화 */
	.layout.sidebar-collapsed {
		grid-template-columns: 1fr;
	}

	.layout.sidebar-collapsed .sidebar {
		transform: none;
	}
}

/* 더 작은 화면 */
@media (max-width: 400px) {
	.controls {
		padding: 10px;
	}

	/* 검색 행 - flexbox로 간소화 (접기/펼치기 사용) */
	.search-row {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.keyword-box {
		min-width: 0;
		padding: 0 8px;
	}

	.keyword-input {
		font-size: 14px;
	}

	.keyword-input::placeholder {
		font-size: 12px;
	}

	.op-toggle.mini {
		height: 32px;
	}

	.op-toggle.mini .op-btn {
		padding: 0 6px;
		font-size: 10px;
	}

	.options-row {
		font-size: 11px;
	}

	.emoji-btn, .size-btn {
		padding: 0 6px;
		font-size: 10px;
	}
}

/* 모바일 액션시트 */
.action-sheet-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	transition: background 0.2s;
}

.action-sheet-overlay.show {
	background: rgba(0, 0, 0, 0.5);
}

.action-sheet {
	width: 100%;
	max-width: 500px;
	background: var(--sidebar-bg);
	border-radius: 16px 16px 0 0;
	padding: 8px 0;
	padding-bottom: env(safe-area-inset-bottom, 20px);
	transform: translateY(100%);
	transition: transform 0.25s ease-out;
}

.action-sheet.show {
	transform: translateY(0);
}

.action-sheet-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
	text-align: center;
}

.action-sheet-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}

.action-sheet-id {
	font-size: 12px;
	color: var(--text-muted);
	margin-left: 6px;
}

.action-sheet-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	font-size: 16px;
	color: var(--text);
	cursor: pointer;
	transition: background 0.15s;
}

.action-sheet-item:active {
	background: var(--surface-hover);
}

.action-sheet-item.followed {
	color: #facc15;
}

.action-sheet-item.danger {
	color: #f87171;
}

.action-sheet-cancel {
	padding: 16px 20px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--accent);
	cursor: pointer;
	border-top: 1px solid var(--border);
	margin-top: 8px;
}

.action-sheet-cancel:active {
	background: var(--surface-hover);
}

/* 토스트 */
.toast {
	position: fixed;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--text);
	white-space: pre-line;
	text-align: center;
	z-index: 1100;
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* 카테고리 순서 변경 버튼 (모바일 롱프레스) */
.channel-category.reordering {
	background: var(--surface-hover);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 8px;
}

.category-reorder-btns {
	display: flex;
	gap: 4px;
	margin-left: auto;
}

.cat-reorder-btn {
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 4px;
	background: var(--surface);
	color: var(--text);
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, opacity 0.15s;
}

.cat-reorder-btn:active {
	background: var(--accent);
	color: #000;
}

.cat-reorder-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.cat-reorder-btn.cat-done {
	background: var(--accent);
	color: #000;
}

/* 파티 카드 - 모바일 */
@media (max-width: 768px) {
	.party-card {
		margin-top: 8px;
	}

	.party-card-header {
		padding: 8px 12px;
	}

	.party-card-title {
		font-size: 11px;
	}

	.party-card-count {
		font-size: 10px;
		padding: 2px 6px;
	}

	.party-slot {
		padding: 8px 12px;
		gap: 8px;
	}

	.party-slot-status {
		font-size: 12px;
	}

	.party-slot-position {
		font-size: 10px;
		padding: 1px 5px;
	}

	.party-slot-info {
		font-size: 12px;
	}

	.party-join-btn {
		padding: 4px 10px;
		font-size: 10px;
	}
}