/* [본문 폭 통일] 펫 커뮤니티(friend01)/펫 라이프(news_data)/펫 다이어리(pet_diary)/팻 플레이스(pet_place01) 등
   다른 메뉴들은 이 페이지에 별도의 폭 제한을 걸지 않아서 테마 공통 본문 영역(#container, max-width:1100px -
   css/responsive.css의 .leftMenuUseFlase #container 규칙)을 그대로 채운다. 펫 메모리만 900px로 더 좁게
   제한돼 있어 다른 메뉴보다 본문이 좁아 보였던 것 - 다른 메뉴와 동일하게 1100px로 맞춘다. */
#pet_wall_wrap { max-width: 1100px; margin: 0 auto; padding: 15px; }

.pw_notice_box {
	background:#f8f9fa; border:1px solid #ddd; border-radius:8px;
	padding:30px 20px; text-align:center; color:#666; font-size:15px;
}

/* 2026-08-22 unified KNB sub-page visual system - pet memory */
#pet_wall_wrap { color:#2c3530; }
.pw_top_tabs { gap:10px !important; }
.pw_tab_btn { min-height:76px !important; border:1px solid #e4e8e6 !important; border-radius:12px !important; background:#fbfcfb !important; color:#59645e !important; box-shadow:none !important; }
.pw_tab_btn.active { background:#f3f0f7 !important; border-color:#ddd5e7 !important; color:#756783 !important; }
.pw_tab_btn.active i { background:#fff !important; color:#756783 !important; }
.pw_dir_search_btn, #pw_comment_submit, .apply_setting_btn,
.friend_manage_apply_btn, .friend_manage_search_btn, .friend_detail_memo_btn {
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px; line-height:1.2 !important;
  background:#667f91 !important; border-color:#667f91 !important; color:#fff !important; border-radius:10px !important;
  box-shadow:0 5px 14px rgba(102,127,145,.16) !important;
}
.pw_toolbar button, .pc_setting_cog, .toggle_option_btn,
.friend_manage_cancel_btn, .friend_manage_search_clear_btn, .friend_manage_mutual_toggle_btn {
  border:1px solid #e1e6e3 !important; border-radius:10px !important; background:#f8faf9 !important; color:#58645d !important;
}
.toggle_option_btn.active, .pw_write_toggle_btn.pw_write_toggle_on, .friend_manage_mutual_toggle_btn.active {
  background:#eef4ec !important; border-color:#cbdac6 !important; color:#486241 !important;
}
.pw_dir_card, .pc_setting_popup, .mobile_popup_box, .friend_manage_box {
  border:1px solid #e4e8e6 !important; border-radius:14px !important; box-shadow:0 5px 18px rgba(46,61,54,.065) !important;
}
.mobile_popup_header, .friend_manage_header { background:#667f91 !important; color:#fff !important; }
.pw_notice_box { background:#f5f3f8 !important; border-color:#e2ddeb !important; color:#6f647b !important; border-radius:12px !important; }
.pw_dir_search_input, .friend_manage_search_input, .pw_comment_write_row textarea {
  border:1px solid #dfe5e1 !important; border-radius:10px !important; outline:none;
}
.pw_dir_search_input:focus, .friend_manage_search_input:focus, .pw_comment_write_row textarea:focus { border-color:#9aabb7 !important; box-shadow:0 0 0 3px rgba(102,127,145,.10) !important; }
.pw_login_btn {
	display:inline-block; margin-left:10px; background:#007bff; color:#fff;
	padding:6px 16px; border-radius:6px; font-weight:bold; font-size:14px;
}

/* 상단 탭: 나의 메모리 / 친구 메모리 / 이웃 메모리 / 전체 메모리
   [2026-08 디자인 통일] 펫 커뮤니티(friend01)와 동일하게 아이콘이 원형 배지로 위에, 라벨이
   아래에 오는 카드형 아이콘 탭으로 재스타일. 마크업(4개 탭)과 아이콘은 기존과 동일, CSS만 교체. */
.pw_top_tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}
.pw_tab_my_wrap {
	flex: 1 1 auto;
	min-width: 90px;
	position: relative;
	display: flex;
	box-sizing: border-box;
}
.pw_tab_btn {
	flex: 1 1 auto;
	min-width: 90px;
	padding: 14px 6px;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	background: #f8f9fb;
	color: #555;
	border: 1px solid #eef0f3;
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.15s;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	font-family: inherit;
}
.pw_tab_btn i {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #e9ecf5;
	color: #5b6b9e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all 0.15s;
}
.pw_tab_btn:hover,
.pw_tab_btn.active {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}
.pw_tab_btn:hover i,
.pw_tab_btn.active i {
	background: rgba(255,255,255,0.25);
	color: #fff;
}

@media screen and (max-width: 768px) {
	.pw_top_tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		margin-bottom: 20px;
	}
	.pw_tab_my_wrap {
		display: flex;
		width: 100%;
	}
	.pw_tab_btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 54px;
		padding: 12px 10px;
		font-size: 12.5px;
		font-weight: bold;
		text-align: center;
		background: #f8f9fb;
		color: #555;
		border: 1px solid #eef0f3;
		border-radius: 12px;
		text-decoration: none;
		transition: all 0.15s;
		box-sizing: border-box;
		line-height: 1.3;
	}
}

/* ----------------------------------------------------------------------- */
/* 아래부터는 '나의 펫 다이어리'의 설정(공개 범위)/친구 관리 UI를 그대로 이식한 스타일.       */
/* 클래스명을 동일하게 맞춰서(펫 다이어리 skin과는 별개 CSS 파일이라 충돌 없음) 디자인을     */
/* 100% 동일하게 유지함.                                                                    */
/* ----------------------------------------------------------------------- */

/* PC 버전 톱니바퀴 아이콘 스타일 */
.pc_setting_cog {
	position: absolute;
	bottom: -6px;
	right: -4px;
	background: #fff;
	color: #495057;
	border: 1px solid #ced4da;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	z-index: 10;
	transition: all 0.2s;
}
.pc_setting_cog:hover {
	background: #007bff;
	color: #fff;
	border-color: #007bff;
}

/* PC 버전 톱니바퀴 클릭 시 나타나는 팝오버 메뉴 */
.pc_setting_popup {
	display: none;
	position: absolute;
	top: 105%;
	left: 0;
	width: 260px;
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	padding: 14px;
	z-index: 100;
	text-align: left;
}
.setting_popup_info {
	font-size:13.5px;
	color: #666;
	background: #f8f9fa;
	padding: 6px 8px;
	border-radius: 4px;
	margin-bottom: 10px;
	line-height: 1.4;
}
.pc_setting_popup .popup_title {
	font-size:14.5px;
	font-weight: bold;
	color: #333;
	margin-bottom: 8px;
	border-bottom: 1px solid #eee;
	padding-bottom: 4px;
}

/* 토글 버튼 디자인 (PC 및 공통) */
.toggle_btn_group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}
.toggle_option_btn {
	width: 100%;
	padding: 8px 10px;
	font-size:14.5px;
	font-weight: bold;
	text-align: center;
	background: #f1f3f5;
	color: #495057;
	border: 1px solid #ced4da;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}
.toggle_option_btn.active {
	background: #007bff;
	color: #fff;
	border-color: #0056b3;
}

/* [쓰기 권한 설정 통합] '펫 친구' 버튼 옆 '공유 작업 가능/불가' 토글 - 예전 별도 '쓰기 권한' 팝업의
   '나만 쓰기'/'친구와 함께 쓰기' 두 버튼과 같은 기능을 스위치 하나로 줄여서 옆에 붙임 */
.pw_share_perm_row { display:flex; align-items:stretch; gap:6px; }
.pw_share_perm_row .toggle_option_btn { flex:1 1 auto; margin-bottom:0; min-width:0; }
.pw_write_toggle_btn {
	flex:0 0 auto; white-space:nowrap; padding:8px 12px; font-size:13px; font-weight:bold;
	border-radius:4px; border:1px solid #ced4da; background:#f1f3f5; color:#868e96; cursor:pointer;
	transition: all 0.2s;
}
.pw_write_toggle_btn.pw_write_toggle_on { background:#28a745; border-color:#218838; color:#fff; }
.pw_write_count_hint { font-size:11.5px; color:#868e96; margin:-2px 0 6px; text-align:right; }
.mobile_popup_box .pw_write_toggle_btn { padding:14px 12px; font-size:13.5px; }

/* 적용하기 버튼 스타일 */
.apply_setting_btn {
	width: 100%;
	padding: 8px;
	background: #28a745;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size:14.5px;
	font-weight: bold;
	cursor: pointer;
}
.apply_setting_btn:hover {
	background: #218838;
}

/* 모바일 전용 설정 레이어 팝업 스타일 - 여는 버튼은 이제 PC와 같은 톱니바퀴(.pc_setting_cog)
   하나뿐이라 별도 트리거 버튼 스타일(.mobile_setting_wrap/.btn_mobile_setting_trigger)은 삭제함 */
#pw_mobile_layer_popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	/* [팝업이 그림판 버튼에 가려지던 문제 수정] 그림 영역의 잠금/숨김/게시/배경색 아이콘, 상하
	   화살표 버튼(z-index:1000000)보다 항상 위에 떠야 하므로 그보다 훨씬 크게 잡음 */
	z-index: 2000000;
	align-items: center;
	justify-content: center;
}
.mobile_popup_box {
	background: #fff;
	width: 90%;
	max-width: 340px;
	border-radius: 8px;
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.mobile_popup_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 12px;
	font-weight: bold;
	font-size: 1.05rem;
	color: #333;
}
.mobile_popup_close {
	background: none;
	border: none;
	font-size: 1.2rem;
	cursor: pointer;
	color: #666;
}
/* 모바일용 토글 버튼은 사이즈를 더 큼직하게 키움 */
.mobile_popup_box .toggle_option_btn {
	padding: 14px 12px;
	font-size: 15px;
}
.mobile_popup_box .apply_setting_btn {
	padding: 12px;
	font-size: 15px;
}

/* 설정 팝업 안 '내 친구 수' 옆 관리 버튼 */
.friend_manage_open_btn {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 10px;
	font-size: 0.78rem;
	font-weight: bold;
	background: #fff;
	color: #495057;
	border: 1px solid #ced4da;
	border-radius: 20px;
	cursor: pointer;
}

/* 친구 관리 팝업 */
.friend_manage_popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	/* [팝업이 그림판 버튼에 가려지던 문제 수정] 그림 영역의 잠금/숨김/게시/배경색 아이콘, 상하
	   화살표 버튼(z-index:1000000)보다 항상 위에 떠야 하므로 그보다 훨씬 크게 잡음 */
	z-index: 2000000;
	align-items: center;
	justify-content: center;
}
/* [하단 취소/적용 버튼 항상 고정] 예전엔 박스 전체(.friend_manage_box)가 통째로 스크롤되면서 그
   안에 있던 하단 취소/적용 버튼도 함께 스크롤되어 사라졌는데, 박스를 세로 flex로 바꾸고 검색/필터/
   목록/페이저는 안쪽 스크롤 영역(.friend_manage_scroll_wrap)에만 몰아넣어서, 그 바깥(형제)에 있는
   하단 액션 바(#pw_fm_bottom_actions)는 목록을 아무리 스크롤해도(모바일 무한 스크롤 포함) 항상
   박스 맨 아래 같은 자리에 고정되어 보이게 함 - 나의 메모리 보존 목록 팝업의 닫기 버튼과 같은 원리 */
.friend_manage_box {
	background: #fff;
	width: 90%;
	max-width: 380px;
	max-height: 80vh;
	border-radius: 8px;
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
	display: flex;
	flex-direction: column;
}
.friend_manage_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 12px;
	font-weight: bold;
	font-size: 1.05rem;
	color: #333;
	flex: none;
}
.friend_manage_close {
	background: none;
	border: none;
	font-size: 1.2rem;
	cursor: pointer;
	color: #666;
}
.friend_manage_scroll_wrap {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
}
.friend_manage_actions {
	display: flex;
	gap: 8px;
	margin: 12px 0 0;
	flex: none;
}
.friend_manage_cancel_btn,
.friend_manage_apply_btn {
	flex: 1;
	padding: 10px 0;
	border-radius: 4px;
	font-weight: bold;
	cursor: pointer;
	font-size: 0.9rem;
}
.friend_manage_cancel_btn {
	border: 1px solid #ccc;
	background: #f1f3f5;
	color: #333;
}
.friend_manage_apply_btn {
	border: none;
	background: #2563eb;
	color: #fff;
}

/* 검색(아이디/닉네임) 행 - 예전 상단 취소/적용 버튼이 있던 자리 */
.friend_manage_search_row { display: flex; gap: 6px; margin-bottom: 10px; }
.friend_manage_search_input {
	flex: 1 1 auto; min-width: 0; border: 1px solid #ced4da; border-radius: 4px;
	padding: 8px 10px; font-size: 0.9rem; box-sizing: border-box;
}
.friend_manage_search_btn, .friend_manage_search_clear_btn {
	flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px;
	border-radius: 4px; font-size: 0.85rem; font-weight: bold; cursor: pointer; white-space: nowrap;
}
.friend_manage_search_btn { border: 1px solid #2563eb; background: #2563eb; color: #fff; }
.friend_manage_search_btn:hover { background: #1d4ed8; }
.friend_manage_search_clear_btn { border: 1px solid #ced4da; background: #f1f3f5; color: #495057; }
.friend_manage_search_clear_btn:hover { background: #e9ecef; }

/* 서로 친구 목록만 보기 */
.friend_manage_filter_row { margin-bottom: 10px; }
.friend_manage_mutual_toggle_btn {
	width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ced4da; background: #f8f9fa;
	color: #495057; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: all 0.15s;
}
.friend_manage_mutual_toggle_btn.active { background: #28a745; border-color: #218838; color: #fff; }

.friend_manage_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.friend_manage_empty {
	text-align: center;
	color: #999;
	padding: 24px 0;
	font-size: 0.9rem;
}
.friend_manage_infinite_loading {
	text-align: center; color: #999; font-size: 0.85rem; padding: 10px 0; list-style: none;
}
.friend_manage_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}
/* 친구 아이디(누르면 상세 팝업)/서로 친구 배지(.pw_friend_status_badge 재사용)/닉네임을 한 줄로 */
.friend_manage_id_row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.friend_manage_id_btn {
	background: none; border: none; padding: 0; font-size: 0.95rem; font-weight: bold; color: #2563eb;
	cursor: pointer; text-decoration: underline;
}
.friend_manage_nick { font-size: 0.85rem; color: #868e96; }
.friend_remove_toggle_btn {
	flex: none;
	padding: 6px 16px;
	font-size: 0.85rem;
	font-weight: bold;
	border: 1px solid #ccc;
	background: #f8f9fa;
	color: #666;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.15s;
}
.friend_remove_toggle_btn.active {
	background: #dc3545;
	color: #fff;
	border-color: #dc3545;
}

/* PC 전용 페이지 번호 - 모바일은 무한 스크롤이라 JS에서 아예 비워둠(pwFmRenderPager) */
.friend_manage_pager { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.friend_manage_page_num {
	width: 26px; height: 26px; border-radius: 50%; border: 1px solid #ced4da; background: #fff;
	color: #495057; font-size: 0.8rem; cursor: pointer; padding: 0;
}
.friend_manage_page_num.active { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: bold; }

/* 친구 상세 팝업(아이디/닉네임/활동지역 + 쪽지 보내기) - 다른 팝업과 같은 .pw_popup_overlay 구조를
   재사용하되, 친구 관리 팝업 위에 한 번 더 뜨는 레이어라 z-index를 한 단계 더 높임 */
#pw_friend_detail_popup { z-index: 2000001; }
.friend_detail_row { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #eee; font-size: 0.9rem; }
.friend_detail_label { flex: 0 0 70px; color: #868e96; font-weight: bold; }
.friend_detail_value { flex: 1; min-width: 0; color: #333; word-break: break-all; }
.friend_detail_memo_btn {
	width: 100%; margin-top: 14px; padding: 10px; border-radius: 6px; border: none; background: #2563eb;
	color: #fff; font-weight: bold; cursor: pointer;
}
.friend_detail_memo_btn:hover { background: #1d4ed8; }
.friend_detail_memo_box { margin-top: 12px; }
.friend_detail_memo_box textarea {
	width: 100%; height: 70px; border: 1px solid #ddd; border-radius: 6px; padding: 8px; font-size: 0.9rem;
	resize: none; box-sizing: border-box; margin-bottom: 8px; font-family: inherit;
}
/* [쪽지 취소/보내기] 왼쪽정렬 + 고정폭(다른 팝업 하단 버튼과 동일 규칙, 예전엔 flex:1로 늘어나 있었음) */
.friend_detail_memo_btn_row { display: flex; gap: 10px; }
#pw_fd_close { display: block; flex: none; width: auto; min-width: 130px; margin: 16px auto 0; padding: 12px 30px; font-size: 15.5px; }

/* 다른 사람 메모리를 볼 때 헤더에 표시되는 '친구 추가' 버튼 / '친구'·'서로 친구' 배지
   (나의 펫 다이어리 view.skin.php와 동일한 디자인) */
.pw_friend_add_btn {
	display: inline-block; margin-left: 6px; padding: 3px 10px; font-size: 0.8rem; font-weight: bold;
	background: #fff; color: #2563eb; border: 1px solid #2563eb; border-radius: 20px; cursor: pointer;
	vertical-align: middle;
}
.pw_friend_status_badge {
	display: inline-block; margin-left: 6px; padding: 3px 10px; font-size: 0.8rem; font-weight: bold;
	color: #28a745; border: 1px solid #28a745; border-radius: 20px; vertical-align: middle;
}

@media (max-width: 768px) {
	.friend_remove_toggle_btn { padding: 10px 18px; font-size: 0.95rem; }
	.friend_manage_cancel_btn, .friend_manage_apply_btn { padding: 12px 0; font-size: 1rem; }

	/* [모바일도 PC와 동일한 톱니바퀴 사용] 예전엔 여기서 .pc_setting_cog를 숨기고 별도의 넓은
	   '내 메모리 설정' 트리거 버튼을 노출했는데, 이제 그 트리거 버튼 자체를 없애고 PC와 완전히
	   같은 톱니바퀴를 모바일에서도 그대로 노출함('나의 작업실' 버튼 오른쪽 하단, 위치도 PC와 동일) -
	   그래서 이 미디어쿼리에는 더 이상 톱니바퀴/트리거 버튼 관련 규칙이 필요 없음 */

	/* [친구 관리 팝업 - 모바일] PC는 10명씩+페이지 번호, 모바일은 5명씩+무한 스크롤(JS가 화면 폭을
	   보고 알아서 나눠 받아옴) - 페이지 번호 UI 자체는 모바일에서 아예 숨겨서 무한 스크롤과 헷갈리지
	   않게 함(JS도 pwFmRenderPager에서 모바일이면 페이지 번호를 그리지 않지만, 그리기 전 잠깐이라도
	   보이지 않도록 CSS로도 이중 안전장치를 둠). 검색/필터 버튼도 누르기 쉽게 살짝 키움 */
	.friend_manage_pager { display: none; }
	.friend_manage_search_btn, .friend_manage_search_clear_btn { padding: 10px 14px; font-size: 0.9rem; }
	.friend_manage_mutual_toggle_btn { padding: 11px; font-size: 0.9rem; }
	.friend_manage_search_input { padding: 10px 12px; font-size: 0.95rem; }
}

/* 메모리 목록(디렉토리) 그리드 */
/* [2026-08] 회원 이름 / 메모리 제목 검색창 스타일을 펫 커뮤니티(friend01)의 pc_community_sch
   검색 디자인과 동일하게 맞춤(마크업 구조/검색 동작 자체는 그대로 - 회원명/제목 검색이라는
   본래 기능 차이는 유지, 오직 시각 스타일만 통일). */
.pw_dir_search { float:none; clear:both; width:100%; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin: 4px 0 16px; }
.pw_dir_search_input {
	flex:1 1 160px; min-width:120px; height:38px; box-sizing:border-box;
	border:1px solid #ced4da; border-radius:4px; padding:0 12px; font-size:14px; font-family:inherit;
}
.pw_dir_search_btn {
	flex:0 0 auto; height:38px; padding:0 18px; border:0; border-radius:4px;
	background:#007bff; color:#fff; font-size:14px; font-weight:bold; cursor:pointer;
	display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.pw_dir_search_btn:hover { background:#0069d9; }
.pw_dir_search_clear { flex:0 0 auto; font-size:14px; color:#868e96; text-decoration:none; white-space:nowrap; }
.pw_dir_search_clear:hover { color:#495057; text-decoration:underline; }
@media (max-width:480px) {
	.pw_dir_search_input { flex:1 1 100%; }
	.pw_dir_search_btn { flex:1 1 100%; justify-content:center; }
}

/* [모바일(세로로 긴 캡처)과 PC(가로로 넓은 캡처) 카드가 자연스럽게 섞이도록 마젠리(masonry) 레이아웃으로 변경]
   원래는 고정된 행(row) 단위 그리드라서, 한 행에 세로로 긴 카드가 하나만 있어도 그 행 전체 높이가
   거기에 맞춰 늘어나 옆의 짧은 카드들 밑에 빈 공간이 크게 남아 목록이 깨져 보였음.
   [CSS 다단(column) 방식에서 자바스크립트 방식으로 변경한 이유] 처음엔 순수 CSS 다단(column-count)
   레이아웃으로 만들었는데, 이 방식은 브라우저가 "각 단의 높이를 최대한 비슷하게" 맞추는 balance
   알고리즘을 쓰기 때문에, 등록된 메모리가 몇 개 안 될 때는(예: 5개) 4단을 다 채우지 않고 3단만
   쓰고 마는 경우가 있었음(4단으로 나눠봐야 높이 균형에 딱히 도움이 안 된다고 판단하면 브라우저가
   그냥 3단만 씀 - 실제 라이브 사이트에서 재현/확인함). 그래서 아래 <script>(목록 아래 참고)에서
   카드들을 직접 "지금까지 가장 짧은 열"에 순서대로 끼워넣는 진짜 마젠리 배치로 바꿔서, 항목 개수가
   적어도 화면 폭이 허용하는 열 개수를 항상 다 채워 쓰도록 함. .pw_dir_grid는 그 스크립트가 만드는
   .pw_dir_col(열) 여러 개를 가로로 나열하는 틀 역할만 하고, 실제 세로 쌓임은 .pw_dir_col 안에서
   일어남 */
.pw_dir_grid { display:flex; align-items:flex-start; gap:14px; }
.pw_dir_col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:14px; }
.pw_dir_empty { flex:1 1 100%; }
.pw_dir_card {
	display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
	background:#fff; border:1px solid #eee; border-radius:12px; padding:12px 10px 16px;
	box-shadow:0 2px 6px rgba(0,0,0,0.06); text-decoration:none; color:#333;
}
.pw_dir_card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.12); transform:translateY(-2px); }

/* 메모리 전체 모습 미리보기 - 실제 보드와 같은 배경에, 항목들을 실제 위치(x/y %) 그대로 살려
   작게 줄여서 보여줌(사진/그림은 미니 이미지, 스티커는 작은 아이콘, 글은 짧게 줄인 실제 글자) */
.pw_dir_wall_preview {
	position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
	background:#f2e8d5; background-image:radial-gradient(#ddcfab 1px, transparent 1px); background-size:9px 9px;
	border-radius:8px; border:1px solid #e2d9c8; flex-shrink:0;
}
/* [실제 위치와 다르게 보이는 문제 수정] 실제 담벼락의 오브젝트는 저장된 x/y(%)가 그 오브젝트의
   왼쪽위 모서리 위치이고 별도의 중앙정렬 이동이 없는데, 미리보기만 translate(-50%,-50%)로 x/y를
   "중심점"인 것처럼 다뤄서 실제 모습과 위치가 어긋났음 - 그 이동을 없애 실제 보드와 같은 기준으로 맞춤 */
.pw_dir_mini_item { position:absolute; }
/* width/height를 %+aspect-ratio 조합으로 주면 절대배치 안에서 높이가 0으로 찌그러져 사진/그림이
   안 보이는 경우가 있었음 - 고정 픽셀 크기로 바꿔서 항상 실제 이미지 내용이 보이도록 함 */
.pw_dir_mini_photo {
	display:block; width:34px; height:34px; object-fit:cover;
	border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,0.35);
}
/* [실제 모습과 다르게 보이는 문제 수정] 색 점 하나로만 표시하던 것을 실제 스티커 아이콘(모양+색)
   그대로 작게 줄여서 보여주도록 바꿈 */
.pw_dir_mini_sticker { display:flex; align-items:center; justify-content:center; width:13px; height:13px; }
/* [실제 모습과 다르게 보이는 문제 수정] 빈 색 박스 대신 실제 글자색/배경색을 살린 짧은 실제
   글자를 보여주도록 바꿈 */
.pw_dir_mini_text {
	display:inline-block; max-width:32px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	font-size:6.5px; line-height:1.4; padding:1px 3px; border-radius:2px; font-weight:bold;
}
.pw_dir_wall_preview_empty {
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	color:#d9730d; font-size:26px;
}
/* [실제 모습과 다르게 보이는 문제 근본 해결] 주인이 '썸네일 저장'으로 화면을 그대로 캡처해 둔
   이미지 - 오브젝트를 다시 흉내내어 그리지 않고 실제 캡처본을 그대로 보여줌. 위 .pw_dir_wall_preview의
   박스 비율이 이제 항상 실제 캡처 비율과 똑같이 맞춰지므로(list.skin.php), 억지로 자르거나 늘릴 필요
   없이 잘리는 부분 없이 전체가 다 보이는 object-fit:contain을 그대로 사용 */
.pw_dir_wall_thumb_img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.pw_dir_nick { font-size:14px; font-weight:bold; word-break:break-word; width:100%; box-sizing:border-box; }
/* 친구/이웃/전체 메모리 목록에도 함께 노출되는 '내' 카드 표시 */
.pw_dir_card_me { border-color:#f0c374; box-shadow:0 2px 6px rgba(232,89,12,0.18); }
.pw_dir_me_badge {
	display:inline-block; background:#e8590c; color:#fff; font-size:12px; font-weight:bold;
	border-radius:999px; padding:1px 7px; vertical-align:middle; margin-left:2px;
}
/* [메모리 제목] 닉네임 줄 바로 아래, 활동시간(관리자 전용)보다 위에 표시 */
/* [줄임 처리 실제 적용] .pw_dir_card가 column 방향 flex + align-items:center라서, 자식 요소는
   기본적으로 내용 크기만큼만 차지하고(카드 너비로 늘어나지 않음) - width:100%를 명시해야 카드
   너비에 맞춰지고, 그래야 overflow:hidden/text-overflow:ellipsis가 실제로 잘라내는 효과를 냄
   (아이템샵 카드 제목이 길 때 그리드가 깨졌던 것과 같은 원인의 문제라 같은 방식으로 고침) */
.pw_dir_title { font-size:13px; color:#666; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; box-sizing:border-box; }
.pw_dir_activity { font-size:13.5px; color:#adb5bd; }

.pw_header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pw_header_title { font-size:18px; font-weight:bold; color:#333; }
.pw_header_title i { color:#d9730d; margin-right:6px; }

/* [제목 옆 쪽지/친구 아이콘] 위 .pw_header_title i 규칙(핀 아이콘용 주황색)이 모든 <i>에
   적용되는 걸 막고, 이 아이콘들만 원래 의미대로(파랑=쪽지/친구추가, 초록=이미 친구) 보이게 함.
   배경/테두리 박스 없이 아이콘 자체만 두므로 padding/border를 주지 않음 */
.pw_header_title .pc_memo_icon_btn,
.pw_header_title .pw_header_icon_link {
	display:inline-block; vertical-align:middle; font-size:15px; margin-left:2px; cursor:pointer;
}
.pw_header_title .pc_memo_icon_btn i { color:#007bff; margin-right:0; }
.pw_header_title .pw_header_friend_add_icon i { color:#2563eb; margin-right:0; }
.pw_header_title .pw_header_friend_icon i { color:#28a745; margin-right:0; }
.pw_header_title .pw_header_friend_icon { cursor:default; }
/* [서로 친구] 눈에 띄도록 오렌지색 + 깜박임 애니메이션, 툴팁으로 상태를 알려줌(title 속성) */
.pw_header_title .pw_header_friend_mutual_icon i {
	color:#e8590c; margin-right:0; animation: pwFriendMutualBlink 1.2s ease-in-out infinite;
}
.pw_header_title .pw_header_friend_mutual_icon { cursor:default; }
@keyframes pwFriendMutualBlink {
	0%, 100% { opacity:1; }
	50% { opacity:0.25; }
}
.pw_write_hint { font-size:14.5px; color:#868e96; }

/* [삭제됨] .pw_writers_btn / .pw_writers_empty - 예전 '쓰기 권한' 버튼/팝업 전용 스타일이었으나,
   같은 기능이 '내 메모리 공유 설정' 팝업 안 토글(.pw_write_toggle_btn)로 옮겨가며 더 쓰지 않음 */

.pw_toolbar { display:flex; gap:8px; margin-bottom:14px; }
.pw_toolbar button {
	flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
	background:#f8f9fa; color:#495057; border:1.5px solid #dee2e6; border-radius:8px;
	padding:12px 10px; font-size:15px; font-weight:bold; cursor:pointer;
}
.pw_toolbar button:hover { background:#eef2f6; }
.pw_toolbar button:active { background:#007bff; color:#fff; border-color:#007bff; }

#pw_board_scroll_wrap { position:relative; }
#pw_board_scroll {
	/* [내용보다 아래로 길게 남는 빈 배경 문제의 진짜 원인] 여러 메모리를 스크롤로 넘겨보기 위해
	   고정 높이(예전엔 height:560px)로 감싸 둔 컨테이너인데, 이미지 등 실제 내용이 그보다 짧으면
	   그 차액만큼 이 컨테이너 자신의 점무늬 배경색이 그대로 빈 채로 남아 보였음(.pw_board_area
	   쪽 min-height를 풀어도 이 바깥 래퍼가 여전히 고정 높이라 소용없었음). max-height로 바꾸면
	   내용이 짧을 땐 딱 맞게 줄어들고, 여러 메모리가 쌓여 원래 높이를 넘길 때만 지금처럼 스크롤이
	   생기는 것은 그대로 유지됨 */
	/* [상세화면 게시 이미지 하단 잘림 수정] 본문 폭을 900px→1100px로 넓히면서 게시된 캡처 이미지
	   (.pw_board_content_img, width:100%;height:auto - 폭에 비례해 세로도 함께 커짐)가 예전보다
	   약 1.22배 더 커졌는데, 이 max-height는 예전 900px 폭 기준(560px)으로 고정돼 있어 커진 이미지의
	   아래쪽이 스크롤 영역 밖으로 밀려나 잘려 보였음 - 늘어난 폭 비율(1100/900)만큼 이 값도 함께
	   키워서, 예전과 동일한 비율만큼은 스크롤 없이 보이도록 맞춤 */
	max-height:685px; overflow-y:auto; border-radius:10px; border:1px solid #e2d9c8;
	background:#f2e8d5;
	background-image: radial-gradient(#ddcfab 1px, transparent 1px);
	background-size: 18px 18px;
}
/* [모바일에서 세로로 긴 캡처 이미지가 잘려 보이는 문제 수정] 위 #pw_board_scroll은 원래 여러
   메모리를 내부 스크롤로 넘기던 시절 흔적인 고정 높이(max-height)+overflow-y:auto가 남아있는데,
   지금은 wheel/touch 핸들러가 이 박스 안의 스크롤을 전부 페이지 스크롤로 돌려버려서 모바일에서는
   이 내부 스크롤에 사실상 손댈 방법이 없음. '게시된 캡처 이미지만 보여주는' 읽기전용 화면
   (list.skin.php에서 pw_board_scroll_readonly 클래스를 붙여줌)에서는 높이 제한을 풀어서, 세로로
   긴 모바일 캡처 이미지도 잘리지 않고 전체가 보이며 페이지 자체 스크롤로 끝까지 볼 수 있게 함.
   ID+class 선택자라 위/아래 미디어쿼리의 일반 #pw_board_scroll 규칙보다 항상 우선 적용됨 */
#pw_board_scroll.pw_board_scroll_readonly { max-height:none; overflow-y:visible; }
#pw_loading_top { text-align:center; padding:10px; font-size:14.5px; color:#8a7550; }

/* 상하 화살표 버튼 - 마우스 휠/손가락 드래그(오브젝트 이동과 겹침)를 대신할 스크롤 이동 수단 */
.pw_scroll_arrow_btn {
	position:absolute; right:14px; z-index:1000000; width:38px; height:38px; border-radius:50%;
	border:1.5px solid #d9c9a3; background:rgba(255,255,255,0.92); color:#8a7550;
	display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer;
	box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.pw_scroll_arrow_btn:hover { background:#fff; border-color:#c7b285; color:#6b5a3a; }
.pw_scroll_arrow_up { top:12px; }
.pw_scroll_arrow_down { bottom:12px; }
/* [이전/다음 메모리 없음] 숨기지 않고 그대로 두되 흐리게 표시 + 클릭 무시 */
.pw_scroll_arrow_btn.pw_scroll_arrow_disabled { opacity:0.3; cursor:default; box-shadow:none; }
.pw_scroll_arrow_btn.pw_scroll_arrow_disabled:hover { background:rgba(255,255,255,0.92); border-color:#d9c9a3; color:#8a7550; }
/* [이전 메모리가 있다는 신호] 위 화살표가 커졌다 작아졌다 - 한 번 누르면 그 뒤로는 다시 켜지지 않음
   (pwScrollUpPulseSeen 플래그로 제어, JS에서 클릭 시 즉시 이 클래스를 뗌) */
.pw_scroll_arrow_btn.pw_scroll_arrow_pulse { animation: pwScrollArrowPulse 1.3s ease-in-out infinite; }
@keyframes pwScrollArrowPulse {
	0%, 100% { transform:scale(1); }
	50% { transform:scale(1.35); }
}

/* 메모리 댓글(방명록) */
#pw_comment_section { margin-top:22px; padding-top:16px; border-top:1px solid #e9ecef; }
.pw_comment_title { font-size:15px; font-weight:bold; color:#495057; margin-bottom:10px; }
.pw_comment_write_row { display:flex; gap:8px; align-items:flex-start; margin-bottom:14px; }
.pw_comment_write_row textarea {
	flex:1; resize:vertical; min-height:44px; max-height:120px; border:1.5px solid #dee2e6;
	border-radius:8px; padding:10px 12px; font-size:14px; font-family:inherit;
}
#pw_comment_submit {
	background:#007bff; color:#fff; border:none; border-radius:8px; padding:0 18px; height:44px;
	font-size:14px; font-weight:bold; cursor:pointer; flex-shrink:0;
}
#pw_comment_submit:hover { background:#0069d9; }
.pw_comment_login_msg { font-size:14.5px; color:#868e96; margin-bottom:14px; }
.pw_comment_login_msg a { color:#007bff; text-decoration:underline; }
.pw_comment_empty { font-size:14.5px; color:#adb5bd; padding:14px 0; text-align:center; }
.pw_comment_item { padding:10px 0; border-bottom:1px solid #f1f3f5; }
.pw_comment_item:last-child { border-bottom:0; }
.pw_comment_head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.pw_comment_nick { font-size:14.5px; font-weight:bold; color:#495057; }
.pw_comment_time { font-size:12.5px; color:#adb5bd; margin-right:auto; }
.pw_comment_edit_btn, .pw_comment_del_btn {
	border:none; background:transparent; color:#ced4da; cursor:pointer;
	font-size:13.5px; padding:2px 4px;
}
.pw_comment_edit_btn:hover { color:#007bff; }
.pw_comment_del_btn:hover { color:#e03131; }
.pw_comment_body { font-size:14px; color:#212529; line-height:1.5; word-break:break-all; }
.pw_comment_edit_area { margin-top:4px; }
.pw_comment_edit_area textarea {
	width:100%; resize:vertical; min-height:44px; max-height:120px; border:1.5px solid #dee2e6;
	border-radius:8px; padding:8px 10px; font-size:14px; font-family:inherit; box-sizing:border-box;
}
.pw_comment_edit_btns { display:flex; gap:6px; justify-content:flex-end; margin-top:6px; }
.pw_comment_edit_save, .pw_comment_edit_cancel {
	border:none; border-radius:6px; padding:6px 14px; font-size:13.5px; font-weight:bold; cursor:pointer;
}
.pw_comment_edit_save { background:#007bff; color:#fff; }
.pw_comment_edit_cancel { background:#e9ecef; color:#495057; }

.pw_segment { padding:20px 16px 40px; border-bottom:2px dashed #d9c9a3; }
.pw_segment:last-child { border-bottom:0; }
/* 라벨 형식: 메모리 #00 : 제목 - 보존처리 날짜 (보존 여부와 상관없이 제목은 항상 표시,
   제목 없으면 '제목없음'. 보존됐을 때만 뒤에 보존 처리일을 붙임) */
.pw_segment_label {
	font-size:13.5px; color:#8a7550; font-weight:bold;
	margin-bottom:10px; letter-spacing:0.5px; padding:4px 0;
}
.pw_seg_label_main { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; }
.pw_seg_title_text { color:#5c4a2a; font-weight:normal; }
button.pw_seg_title_btn.pw_seg_title_text {
	background:none; border:none; padding:0; font-size:13.5px; letter-spacing:0.5px; cursor:pointer;
}
button.pw_seg_title_btn.pw_seg_title_text:hover { text-decoration:underline; }
button.pw_seg_title_btn.pw_seg_title_text:disabled { cursor:not-allowed; opacity:0.6; text-decoration:none; }
/* '제목없음' 옆의 '입력' 버튼 - 다른 작은 버튼들과 똑같이 누르기 쉬운 알약 모양으로 처리 */
.pw_seg_title_input_btn {
	background:#fff; border:1.5px solid #d9c9a3; border-radius:14px; color:#8a7550;
	font-size:13px; font-weight:bold; padding:3px 11px; cursor:pointer; line-height:1.4;
}
.pw_seg_title_input_btn:hover { background:#fbf6ea; border-color:#c7b285; color:#6b5a3a; }
.pw_seg_preserved_date { color:#b8720a; font-weight:normal; }
.pw_board_area { position:relative; width:100%; min-height:480px; }
/* [화면 폭이 좁아지면 이미지 아래 빈 여백이 길게 남는 문제 수정] 라이브 편집 화면(오브젝트가
   절대좌표로 배치됨)은 480px 최소 높이가 꼭 필요하지만, 게시된 캡처 이미지나 '아직 게시 안 됨'
   안내문만 보여주는 화면(pw_board_area_capture)은 실제 내용 높이에 맞춰 딱 맞게 줄어들어야 함 -
   이미지가 반응형으로(width:100%; height:auto) 폭에 맞춰 줄어들 때 배경 영역도 함께 줄어들게 함 */
.pw_board_area.pw_board_area_capture { min-height:0; }
/* [배경설정 - 모바일용] 배경설정을 '모바일용'으로 고르면 캔버스 중앙에 모바일 세로 비율(9:16) 안전영역만
   남기고 나머지는 반투명 어둡게 덮어 "여기까지만 게시됩니다"를 안내함. 실제 크기/위치는 JS의
   pwUpdateMobileFrame()이 캔버스 크기에 맞춰 계산해서 인라인 스타일로 넣어 줌(여기서는 기본 골격만).
   overflow:hidden은 아래 박스의 커다란 box-shadow(스포트라이트 기법으로 어둡게 덮는 부분)가 캔버스
   바깥으로 새어나가지 않게 캔버스 경계에서 잘라내기 위함 */
.pw_board_area.pw_bg_device_mobile { overflow:hidden; }
.pw_mobile_frame_overlay {
	position:absolute; inset:0; z-index:600000; display:none; pointer-events:none;
}
.pw_board_area.pw_bg_device_mobile .pw_mobile_frame_overlay { display:block; }
/* 안전영역 박스 자신은 완전히 투명하게 비워 두고, 그 바깥 전체를 큰 box-shadow의 퍼짐(spread)으로
   어둡게 채우는 방식(스포트라이트 기법) - 박스 크기가 바뀌어도 매번 어두운 오버레이 div를 4개로
   쪼개 재배치할 필요 없이 box-shadow 한 줄로 항상 정확히 딱 맞게 덮임 */
/* [배경설정 - 모바일용 좌표 기준] 오브젝트(사진/스티커/글/그림)의 x/y(%) 위치는 배경설정이
   '모바일용'일 때 이 박스 자신을 기준(0~100%)으로 계산됨(list.skin.php의 pwBuildItemEl 호출부들
   참고) - 화면 폭이 다른 기기(PC 등)에서 봐도 오브젝트가 계속 박스 안 같은 자리에 보이게 하려면,
   박스 바깥(반투명 어두운 부분)이 아니라 항상 박스 자신이 좌표 기준이어야 함. 그래서 이 박스는
   더 이상 순수 안내선 전용이 아니라 실제로 오브젝트를 담는 컨테이너 역할도 겸함 - 그래서 클릭/
   드래그가 통하도록 pointer-events:auto로 되돌리고(부모 .pw_mobile_frame_overlay는 여전히 none),
   오브젝트가 박스 경계를 살짝 넘어가도 편집 화면에서부터 박스 안쪽까지만 보이도록 overflow:hidden */
.pw_mobile_frame_box {
	position:absolute; box-sizing:border-box; overflow:hidden; pointer-events:auto;
	box-shadow:0 0 0 2000px rgba(0,0,0,0.55);
	border:2px dashed rgba(255,255,255,0.85); border-radius:4px;
}
/* [배경설정 - 지금 기준 화면 표시] 작업영역 오른쪽 아래 여백에 항상 떠 있는 작은 글자 라벨 - 팝업을
   열어보지 않아도 지금 배경설정이 PC용인지 모바일용인지 한눈에 알 수 있게 함. 오브젝트(최대
   z-index:500000)와 모바일 안내 오버레이(600000)보다는 위, 잠금/숨김/게시 아이콘 등
   (pw_board_owner_topleft, 1000000)보다는 아래 */
.pw_bgdevice_label {
	/* [위치 조정] bottom:8px였을 때는 캔버스 아래쪽 테두리/상하 이동 화살표 버튼과 거의 붙어 보여서
	   마치 캔버스 밖(바깥 여백)에 있는 것처럼 보인다는 피드백을 받아, 테두리에서 확실히 떨어지도록
	   여백을 늘림 */
	position:absolute; right:12px; bottom:20px; z-index:700000; pointer-events:none;
	font-size:12px; color:#8a7550; background:rgba(255,255,255,0.88);
	padding:3px 10px; border-radius:12px; border:1px solid #e2d9c8; white-space:nowrap;
}
/* [삭제 요청] 보존(잠금) 처리 시 배경에 대각선 줄무늬를 덧씌워 "잠김" 표시를 하던 규칙이었는데,
   사용자가 보존 누르면 배경색이 바뀌는 게 싫다고 해서 제거함 - 잠금 여부는 라벨의 자물쇠
   아이콘/버튼 비활성화로만 표시하고, 배경은 원래 고른 색/무늬 그대로 유지되게 함 */

/* [모바일/기기마다 화면이 깨지는 문제 해결] 주인이 아닌 열람(친구/이웃/전체 메모리 등)에서는
   오브젝트를 절대좌표로 다시 그리지 않고 '게시하기'로 캡처해 둔 화면 이미지 하나만 보여줌 - 어떤
   화면 너비에서도 이미지가 비율을 유지한 채 그대로 줄어들 뿐, 배치가 어긋나 깨지는 일이 없음 */
.pw_board_content_img { display:block; width:100%; height:auto; }
/* [모바일에서 캡처한 이미지가 너무 커 보이는 문제 수정] 모바일은 화면이 세로로 길어 캡처 이미지도
   세로로 긴데, 상세화면(PC 기준 1100px 폭)에 그대로 꽉 채우면 지나치게 커 보여서 폭을 70%로 줄이고
   가운데 정렬함(PC로 만든 메모리는 위 기본 규칙 그대로 100%).
   [보는 화면이 모바일일 때는 다시 100%로] 위 70%는 '넓은 PC 화면에서 볼 때' 세로로 긴 이미지가
   과하게 커 보이는 걸 줄이려는 목적이었는데, 반대로 좁은 모바일 화면으로 볼 때는 폭 자체가 이미
   좁아서(화면폭에 맞춰 자동으로 줄어듦, .pw_board_content_img 기본 규칙) 70%까지 더 줄이면 오히려
   너무 작고 좁게 보임 - 그래서 실제로 보고 있는 화면이 모바일 크기(아래 미디어쿼리, 768px 이하)일
   때는 100%로 되돌림. 즉 이 70% 축소는 'PC처럼 넓은 화면으로 볼 때만' 적용됨 */
.pw_board_content_img.pw_board_content_img_mobile { width:60%; margin:0 auto; }

/* 그림 영역 왼쪽 상단 - 보관설정/숨김설정 아이콘을 세로로. 클릭이 쉽도록 모든 오브젝트보다 항상
   위(z-index)에 두고, 흰색 사각 배경으로 감싸서 어떤 사진/그림 위에 있어도 잘 보이게 함 */
.pw_board_owner_topleft { position:absolute; top:8px; left:8px; z-index:1000000; display:flex; flex-direction:column; gap:8px; }

/* 그림 영역 왼쪽 아래 - 빠른 메뉴(붓+연필 아이콘). 마찬가지로 항상 최상단 */
.pw_board_bgcolor_wrap { position:absolute; bottom:8px; left:8px; z-index:1000000; }

/* [빠른 메뉴] 왼쪽 아래 아이콘을 누르면 오른쪽으로 스르륵 펼쳐지는 메뉴 - 상단 툴바와 같은
   사진/스티커/글쓰기/그림/템플릿 + 배경색상 아이콘을 여기서도 바로 쓸 수 있게 함.
   [정리] 예전엔 큰 아이콘 위에 작은 배지 아이콘을 겹쳐 쌓은 구조였는데, 배지 없이 큰 아이콘
   하나만 쓰도록 단순화(버튼 안에 <i> 하나만 두면 .pw_icon_sq_btn이 알아서 가운데 정렬함) */
.pw_quickmenu_wrap { display:flex; align-items:center; }
.pw_quickmenu_flyout {
	display:flex; align-items:center; gap:6px; margin-left:0; max-width:0; overflow:hidden; opacity:0;
	transition:max-width .32s ease, opacity .22s ease, margin-left .32s ease;
}
.pw_quickmenu_wrap.pw_quickmenu_open .pw_quickmenu_flyout { max-width:400px; opacity:1; margin-left:8px; }
.pw_quickmenu_btn {
	width:36px; height:36px; border-radius:50%; border:1.5px solid #d9c9a3; background:#fff; flex:none;
	color:#8a7550; display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer;
	padding:0; box-shadow:0 2px 6px rgba(0,0,0,0.18);
}
.pw_quickmenu_btn:hover { background:#fbf6ea; }
.pw_quickmenu_btn:disabled { opacity:0.4; cursor:not-allowed; background:#f1f1f1; }
/* [아이콘 이미지 교체] 사진/스티커/글쓰기/그림/템플릿/배경 6개 버튼을 폰트어썸 대신 img/draw_icon/ 이미지로 표시 */
.pw_quickmenu_btn img.pw_quickmenu_icon { width:24px; height:24px; object-fit:contain; pointer-events:none; }
.pw_quickmenu_btn:disabled img.pw_quickmenu_icon { opacity:0.5; }

.pw_icon_sq_btn {
	width:36px; height:36px; border-radius:7px; border:1.5px solid #d9c9a3; background:#fff;
	color:#8a7550; display:flex; align-items:center; justify-content:center; font-size:15px;
	cursor:pointer; padding:0; box-shadow:0 2px 6px rgba(0,0,0,0.18);
}

/* [게시 버튼이 눈에 잘 안 띈다는 요청] 다른 아이콘 버튼과 똑같은 흰색이라 존재감이 약했던 것을,
   주황색 배경 + 은은하게 퍼지는 빛(pulse)으로 항상 시선이 가도록 함 */
@keyframes pwPublishPulse {
	0%, 100% { box-shadow:0 2px 6px rgba(0,0,0,0.18), 0 0 0 0 rgba(232,89,12,0.55); }
	50% { box-shadow:0 2px 6px rgba(0,0,0,0.18), 0 0 0 7px rgba(232,89,12,0); }
}
.pw_seg_publish_btn {
	background:#e8590c; border-color:#e8590c; color:#fff;
	animation: pwPublishPulse 1.8s ease-in-out infinite;
}
.pw_seg_publish_btn:hover { background:#d14f0a; border-color:#d14f0a; color:#fff; }
.pw_seg_publish_btn:disabled { animation:none; }

/* [게시된 상태 표시] 지금 화면 그대로 이미 게시되어 있으면(오브젝트 추가/이동/삭제 등으로 아직
   손대지 않았으면) 더 이상 눈에 띌 필요가 없으므로 은은한 회색으로 가라앉히고 반짝임도 멈춤.
   다시 오브젝트를 추가/이동/확대축소하는 순간 위 강조 스타일로 즉시 되돌아감(JS에서 클래스 토글) */
.pw_seg_publish_btn.pw_published_current {
	background:#9e9e9e; border-color:#9e9e9e; color:#fff;
	animation:none; box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
.pw_seg_publish_btn.pw_published_current:hover { background:#888; border-color:#888; color:#fff; }

/* 게시 버튼 안내 박스(아이콘 설명) - 그림 영역 위, 주인 본인에게만 노출.
   [레이아웃 개선] 세 줄을 한 flex row로 나란히 붙여 좁은 화면에서 읽기 어려웠던 문제를,
   줄마다 세로로 쌓고(flex-direction:column) 아이콘 열을 고정폭으로 왼쪽 정렬해 표처럼
   또박또박 읽히도록 정리함. 강조 단어는 굵게(strong) 표시해 스캔하기 쉽게 함. */
.pw_publish_hint {
	display:flex; flex-direction:column; background:#fff6ec; border:1px solid #f0c374;
	border-radius:10px; padding:2px 14px; margin-bottom:14px; font-size:14px; color:#7a4d16;
	line-height:1.5;
}
.pw_hint_row {
	display:flex; align-items:flex-start; gap:10px; padding:10px 0;
}
.pw_hint_row + .pw_hint_row { border-top:1px dashed #f0c374; }
.pw_hint_icons {
	flex-shrink:0; display:flex; align-items:center; gap:4px; min-width:36px;
	font-size:16px; padding-top:1px;
}
.pw_hint_icons i { color:#e8590c; }
.pw_hint_text { flex:1 1 auto; min-width:0; }
.pw_hint_text strong { color:#c2540a; }
@media (max-width:480px) {
	.pw_publish_hint { font-size:13.5px; }
	.pw_hint_icons { min-width:32px; font-size:15px; }
}

/* [모바일 전용 (i) 버튼] 제목 행(.pw_seg_label_main) 오른쪽 끝에 붙는 안내 팝업 열기 버튼.
   PC에서는 위 .pw_publish_hint 박스가 항상 그대로 보이므로 이 버튼은 기본적으로 숨겨두고,
   768px 이하(다른 모바일 분기점과 동일한 기준)에서만 .pw_publish_hint를 숨기고 이 버튼을 보여줌 */
.pw_seg_info_btn {
	display:none; margin-left:auto; flex:none; width:20px; height:20px; border-radius:50%;
	border:1.5px solid #e8590c; background:#fff6ec; color:#e8590c; font-size:11px;
	align-items:center; justify-content:center; cursor:pointer; padding:0; line-height:1;
}
.pw_seg_info_btn:hover { background:#ffe9d2; }
@media (max-width:768px) {
	.pw_publish_hint { display:none; }
	.pw_seg_info_btn { display:flex; }
}

.pw_icon_sq_btn:hover { background:#fbf6ea; }
.pw_icon_sq_btn:disabled { opacity:0.4; cursor:not-allowed; background:#f1f1f1; }
/* 보관(보존) 처리됨: 잠긴 열쇠 / 안 됨: 열린 열쇠. 숨김 처리됨: 눈 감김 / 안 됨: 눈 모양 */
.pw_seg_preserve_btn.pw_icon_sq_btn[data-preserved="1"] { background:#fff4e0; border-color:#f0c374; color:#b8720a; }
.pw_seg_hide_btn.pw_icon_sq_btn[data-hidden="1"] { background:#f1f3f5; border-color:#ccc; color:#555; }

/* 보존 처리된 페이지는 오브젝트를 옮기거나 항목별 편집/레이어 버튼을 못 누르게 시각적으로도 잠금
   (서버에서도 동일하게 막고 있음 - 이건 사용자에게 미리 알려주는 보조 장치) */
.pw_segment_preserved .pw_item { cursor:default !important; }
.pw_segment_preserved .pw_item_controls,
.pw_segment_preserved .pw_item_del,
.pw_segment_preserved .pw_item_lock_btn,
.pw_segment_preserved .pw_rotate_handle,
.pw_segment_preserved .pw_resize_handle,
.pw_segment_preserved .pw_text_width_handle { display:none !important; }

/* 도구모음 잠금 안내(보존된 '현재' 페이지에 새 내용을 추가하려 할 때) */
.pw_toolbar_locked_hint {
	display:flex; align-items:center; justify-content:center; gap:8px;
	background:#fff8ec; border:1.5px dashed #f0c374; border-radius:8px;
	color:#8a5b0a; font-size:15px; font-weight:bold; padding:12px 14px; margin-bottom:14px;
	text-align:center;
}

/* 공유 버튼 */
.pw_share_btn {
	display:flex; align-items:center; gap:5px; background:#f8f9fa; color:#495057;
	border:1.5px solid #dee2e6; border-radius:20px; padding:6px 12px; font-size:14.5px;
	font-weight:bold; cursor:pointer;
}
.pw_share_btn:hover { background:#eef2f6; }

/* '나의 메모리' 보존 목록 패널 */
.pw_preserved_panel {
	background:#fffaf1; border:1px solid #f0dfb8; border-radius:10px;
	padding:14px 16px; margin-bottom:16px;
}
/* [클릭시에만 노출] 제목 자체도 클릭할 수 있게 커서 표시 - PC에서 제목/[보기] 버튼 중 아무거나
   눌러도 아래 목록이 펼쳐짐(자세한 동작은 아래 .pw_preserved_open 규칙 참고) */
/* [휴지통] pw_trash_title은 보존 목록과 같은 모양을 쓰되, 클릭 토글 JS 핸들러가 서로 다른 패널을
   가리켜야 해서(둘 다 클래스 기준 위임 이벤트) 클래스 이름 자체는 분리해 둠 - 스타일만 같이 씀 */
.pw_preserved_title, .pw_trash_title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:14.5px; font-weight:bold; color:#8a5b0a; margin-bottom:0; cursor:pointer; }
.pw_preserved_title i, .pw_trash_title i { margin-right:4px; }
/* [PC/모바일 공통] 제목 옆 [보기] 버튼 - 항상 보이며, 제목 전체를 눌러도 같은 동작(목록 열기/닫기)을 함 */
.pw_preserved_view_btn {
	display:inline-flex; align-items:center; justify-content:center;
	margin-left:auto; background:#fff; color:#8a5b0a; border:1.5px solid #f0c374;
	border-radius:16px; padding:5px 14px; font-size:13px; font-weight:bold; cursor:pointer;
}
.pw_preserved_view_btn:hover { background:#fff4e0; }
/* [평소 상태] 배경/닫기 버튼(모바일 팝업 전용)과 목록 본문은 열기 전엔 항상 숨김 */
#pw_preserved_mobile_backdrop, #pw_preserved_mobile_close { display:none; }
.pw_preserved_body { display:none; }
/* [PC 전용 기본값] 웹에서는 팝업이 아니라 제목 바로 아래에 목록이 펼쳐짐(보존 메모리가 많을 때
   페이지 번호(pager)가 함께 잘 보이도록 - 작은 팝업 안에서는 페이지 번호까지 넣기엔 비좁음).
   모바일은 무한 스크롤 위주 UI라 화면 중앙 팝업이 더 어울려서, 아래 @media(max-width:768px)에서
   이 자리를 고정 위치 팝업 스타일로 덮어씀(같은 클래스 .pw_preserved_open, 화면폭에 따라 다르게 보임). */
.pw_preserved_panel.pw_preserved_open .pw_preserved_body {
	display:flex; flex-direction:column; margin-top:10px;
}
.pw_preserved_list { display:flex; flex-direction:column; gap:6px; }
.pw_preserved_empty { font-size:14.5px; color:#8a7550; padding:8px 2px; line-height:1.5; }
.pw_preserved_item {
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	background:#fff; border:1px solid #f0dfb8; border-radius:8px; padding:9px 12px;
	text-decoration:none; color:#4a3c22; font-size:15px;
}
.pw_preserved_item:hover { background:#fff4e0; }
.pw_preserved_item_title { display:flex; align-items:center; gap:6px; font-weight:bold; }
.pw_preserved_item_title i { color:#b8720a; }
.pw_preserved_item_date { font-size:13.5px; color:#a08a5f; white-space:nowrap; }

/* 페이지 이동: 이전/다음이 주(主) 이동 수단이라 크고 누르기 쉽게, 숫자는 보조 수단이라 작게 */
.pw_preserved_pager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pw_preserved_nav_btn {
	display:flex; align-items:center; gap:6px; background:#fff; color:#8a5b0a;
	border:1.5px solid #f0c374; border-radius:22px; padding:10px 18px; font-size:14px;
	font-weight:bold; cursor:pointer; min-height:40px;
}
.pw_preserved_nav_btn:hover:not(:disabled) { background:#fff4e0; }
.pw_preserved_nav_btn:disabled { opacity:0.35; cursor:not-allowed; }
.pw_preserved_page_nums { display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center; }
.pw_preserved_page_num, .pw_trash_page_num {
	width:26px; height:26px; border-radius:50%; border:1px solid #e6d6ac; background:#fff;
	color:#a08a5f; font-size:13px; cursor:pointer; padding:0;
}
.pw_preserved_page_num.active, .pw_trash_page_num.active { background:#f0c374; border-color:#f0c374; color:#fff; font-weight:bold; }

/* [휴지통] 목록 항목의 '복원' 버튼 - 보존 목록 항목(그냥 링크)과 달리 항목 하나에 제목/남은 보관일/
   버튼 3요소가 함께 있어야 해서 flex-shrink:0으로 좁아지지 않게 함 */
.pw_trash_restore_btn {
	display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
	background:#fff; color:#2f7a3c; border:1.5px solid #7fbf8f; border-radius:16px;
	padding:5px 12px; font-size:13px; font-weight:bold; cursor:pointer;
}
.pw_trash_restore_btn:hover:not(:disabled) { background:#eef8f0; }
.pw_trash_restore_btn:disabled { opacity:0.5; cursor:not-allowed; }

/* [2026-08 휴지통 UI 개편] 상단 상시노출 패널 → 작업영역 하단 휴지통 버튼(#pw_btn_trash)을 눌러야
   뜨는 팝업으로 변경. '보존된 메모리' 패널의 PC(인라인)/모바일(팝업) 화면폭 분기 클래스와 완전히
   분리된 전용 클래스라, 화면 크기와 상관없이 항상 화면 중앙 고정 팝업으로만 뜸 */
#pw_trash_overlay, #pw_trash_panel { display:none; }
#pw_trash_overlay.pw_trash_visible {
	display:block; position:fixed; top:0; left:0; width:100%; height:100%;
	background:rgba(0,0,0,0.5); z-index:2000000;
}
#pw_trash_panel.pw_trash_visible {
	display:flex; flex-direction:column; position:fixed; top:50%; left:50%;
	transform:translate(-50%, -50%); z-index:2000001; width:90%; max-width:400px; max-height:80vh;
	background:#fffaf1; border:1px solid #f0dfb8; border-radius:12px; padding:18px;
	box-shadow:0 4px 15px rgba(0,0,0,0.25);
}
.pw_trash_modal_head { display:flex; align-items:center; gap:8px; }
.pw_trash_modal_head .pw_trash_title { margin-bottom:0; cursor:default; }
.pw_trash_close_btn {
	margin-left:auto; background:none; border:none; color:#a08a5f; font-size:18px;
	cursor:pointer; padding:4px 6px; line-height:1;
}
.pw_trash_close_btn:hover { color:#c0392b; }
.pw_trash_modal_hint { font-size:13px; color:#a08a5f; line-height:1.5; margin:6px 0 12px; }
#pw_trash_scroll_wrap { flex:1 1 auto; overflow-y:auto; min-height:0; }

@media (max-width: 480px) {
	.pw_preserved_pager { justify-content:center; }
	.pw_preserved_nav_btn { flex:1; justify-content:center; }
}

/* [모바일 전용] 보존 메모리 목록을 [보기] 버튼/제목을 눌렀을 때 화면 중앙 고정 팝업으로 띄움
   (768px 이하에서만 - PC는 위 기본값대로 제목 아래 인라인으로 펼쳐짐, 페이지 번호가 잘 보이게).
   모바일은 무한 스크롤 위주라 팝업 안에서도 페이지 번호 없이 스크롤로 넘기는 UI라 팝업이 더 적합함.
   목록(#pw_preserved_list)/페이지 이동 버튼은 DOM과 JS(pwLoadPreservedPage 등)를 그대로 두고
   겉모습만 CSS로 바꾸는 방식 - #pw_preserved_scroll_wrap만 스크롤되고, 닫기 버튼은 그 바깥(형제)에
   있어 목록을 아무리 스크롤해도 항상 팝업 하단 중앙 같은 자리에 고정되어 보임 */
@media (max-width:768px) {
	#pw_preserved_mobile_backdrop {
		display:none; position:fixed; top:0; left:0; width:100%; height:100%;
		background:rgba(0,0,0,0.5); z-index:2000000;
	}
	.pw_preserved_panel.pw_preserved_open #pw_preserved_mobile_backdrop { display:block; }

	.pw_preserved_panel.pw_preserved_open .pw_preserved_body {
		display:flex; flex-direction:column; position:fixed; top:50%; left:50%;
		transform:translate(-50%, -50%); z-index:2000001; width:90%; max-width:360px; max-height:80vh;
		margin-top:0; background:#fff; border-radius:12px; padding:18px; box-shadow:0 4px 15px rgba(0,0,0,0.2);
	}
	.pw_preserved_panel.pw_preserved_open #pw_preserved_scroll_wrap {
		flex:1 1 auto; overflow-y:auto; min-height:0;
	}
	.pw_preserved_panel.pw_preserved_open #pw_preserved_mobile_close {
		display:block; flex:none; width:auto; min-width:130px; margin:14px auto 0;
		padding:12px 30px; font-size:15.5px; border-radius:6px; border:none;
		background:#6c757d; color:#fff; font-weight:bold; cursor:pointer;
	}
}

/* 현재 메모리 삭제/휴지통 버튼(왼쪽 끝에 묶어서 배치) / 실행취소·다시 실행 / 새 메모리 버튼(오른쪽) -
   [2026-08 개편] 요청에 따라 삭제 버튼을 맨 왼쪽으로 옮기고 바로 옆에 휴지통 버튼을 추가함.
   버튼이 5개로 늘어나 space-between 대신 flex-start로 왼쪽부터 순서대로 묶어 배치하고, 새 메모리
   버튼만 margin-left:auto로 오른쪽 끝에 고정해 기존 '왼쪽 조작 버튼들 / 오른쪽 새 메모리' 구도를 유지함.
   배경 색상 지정은 그림 영역 왼쪽 아래의 아이콘 버튼(.pw_board_bgcolor_btn)으로 옮겨감 */
.pw_new_page_wrap { display:flex; justify-content:flex-start; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
#pw_btn_new_page, #pw_btn_delete_current_page, #pw_btn_trash, #pw_btn_undo, #pw_btn_redo {
	display:flex; align-items:center; gap:6px;
	background:#fff; border-radius:8px;
	padding:10px 20px; font-size:14px; font-weight:bold; cursor:pointer;
}
/* [2026-08 신규] 실행취소/다시 실행 버튼 - 그림판처럼 짝을 이루는 아이콘(fa-undo/fa-repeat)이라
   같은 파란 계열로 통일. 되돌리거나(취소) 다시 적용할(실행) 작업이 없을 때(disabled)는 흐리게 표시 */
#pw_btn_undo, #pw_btn_redo { color:#4a6fa5; border:1.5px dashed #b3c6e6; }
#pw_btn_undo:hover:not(:disabled), #pw_btn_redo:hover:not(:disabled) { background:#eef3fb; border-color:#4a6fa5; color:#2c4a75; }
#pw_btn_undo:disabled, #pw_btn_redo:disabled { opacity:0.35; cursor:not-allowed; }

/* [신규] 작업창 아래 작은 이동 버튼 3개(친구들/이웃의/모두의 메모리) - 상단 탭과 같은 목적지로
   이동하는 단축 버튼. 위 새 메모리/삭제 버튼보다 한 단계 작고 수수하게, 가운데 정렬로 배치 */
.pw_studio_nav_wrap {
	display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.pw_studio_nav_btn {
	display:inline-flex; align-items:center; gap:5px; background:#fff; border:1.5px solid #e9ecef;
	border-radius:16px; padding:6px 14px; font-size:12.5px; font-weight:bold; color:#8a7550;
	text-decoration:none; cursor:pointer;
}
.pw_studio_nav_btn:hover { border-color:#f0c374; background:#fff8ec; }
.pw_studio_nav_btn i { font-size:11.5px; color:#e8590c; }
/* [요청에 따라 맨 오른쪽 고정] 새 메모리 */
#pw_btn_new_page { color:#8a7550; border:1.5px dashed #d9c9a3; margin-left:auto; }
#pw_btn_new_page:hover { background:#fbf6ea; border-color:#c7b285; color:#6b5a3a; }
/* [요청에 따라 맨 왼쪽으로 이동] 현재 메모리 삭제 */
#pw_btn_delete_current_page { color:#c0392b; border:1.5px dashed #e6b3ab; }
#pw_btn_delete_current_page:hover { background:#fdecea; border-color:#e03131; color:#e03131; }
/* [2026-08 신규] 휴지통 버튼 - 삭제 버튼 바로 옆, '보존된 메모리'와 같은 계열의 따뜻한 색으로 구분 */
#pw_btn_trash { color:#8a5b0a; border:1.5px dashed #e6d09a; }
#pw_btn_trash:hover { background:#fff8ec; border-color:#c7972e; color:#6b4700; }

/* [2026-08 하단 작업 도구 정리] 흩어져 있던 관리/편집/공개범위/공유/새 메모리 버튼을
   하나의 반응형 액션바로 통합한다. 기존 버튼 ID는 그대로 유지해 JS 동작에는 영향을 주지 않는다. */
.pw_toolbar_action_source { display:none !important; }
.pw_wall_top_tabs { margin-bottom:16px; }
.pw_studio_actionbar {
	--pw-cream:#f7f0df;
	--pw-gold:#d8c89e;
	--pw-brown:#6f5c3e;
	--pw-coral:#e96536;
	--pw-peach:#fbe7da;
	display:flex; align-items:flex-end; gap:18px; width:100%; margin-top:14px; padding:18px 20px;
	box-sizing:border-box; background:rgba(255,253,248,.98); border:1px solid #e6d8b7;
	border-radius:14px; box-shadow:0 5px 16px rgba(111,92,62,.09);
}
.pw_action_group { display:flex; flex-direction:column; gap:8px; min-width:0; }
.pw_action_group + .pw_action_group { padding-left:18px; border-left:1px solid #eadfc8; }
.pw_action_group_label { color:#9a8155; font-size:12px; font-weight:700; line-height:1; }
.pw_action_group_controls, .pw_action_primary { display:flex; align-items:center; gap:8px; }
.pw_action_primary { margin-left:auto; flex:none; }
.pw_studio_actionbar button, .pw_studio_actionbar .pw_studio_nav_btn {
	min-height:46px; box-sizing:border-box; white-space:nowrap; transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.pw_studio_actionbar button:focus-visible, .pw_studio_actionbar .pw_studio_nav_btn:focus-visible {
	outline:3px solid rgba(233,101,54,.22); outline-offset:2px;
}
.pw_studio_actionbar #pw_btn_delete_current_page,
.pw_studio_actionbar #pw_btn_trash,
.pw_studio_actionbar #pw_btn_undo,
.pw_studio_actionbar #pw_btn_redo,
.pw_studio_actionbar #pw_btn_share,
.pw_studio_actionbar #pw_btn_new_page {
	margin:0; padding:0 14px; border-radius:10px; border-style:solid; background:#fffdf8; font-size:14px;
}
.pw_studio_actionbar #pw_btn_delete_current_page { color:#b64b3e; border-color:#ddb0a7; }
.pw_studio_actionbar #pw_btn_trash { color:#7b633a; border-color:#d8c89e; }
.pw_studio_actionbar #pw_btn_undo, .pw_studio_actionbar #pw_btn_redo { color:#6f5c3e; border-color:#d8c89e; }
.pw_studio_actionbar #pw_btn_undo:disabled, .pw_studio_actionbar #pw_btn_redo:disabled { color:#b9b0a1; background:#f6f3ec; border-color:#e6e0d5; opacity:1; }
.pw_studio_actionbar #pw_btn_share { color:#6f5c3e; border-color:#d8c89e; }
.pw_studio_actionbar #pw_btn_new_page { color:#fff; background:#e96536; border-color:#e96536; padding:0 18px; box-shadow:0 4px 10px rgba(233,101,54,.2); }
.pw_studio_actionbar #pw_btn_new_page:hover { color:#fff; background:#d9572c; border-color:#d9572c; transform:translateY(-1px); }
.pw_trash_count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; margin-left:3px; border-radius:10px; background:#efe3c8; color:#6f5c3e; font-size:11px; }
.pw_studio_actionbar .pw_studio_nav_wrap { display:flex; flex-wrap:nowrap; gap:0; margin:0; border:1px solid #d8c89e; border-radius:10px; overflow:hidden; }
.pw_studio_actionbar .pw_studio_nav_btn { justify-content:center; gap:6px; min-width:78px; padding:0 13px; border:0; border-radius:0; background:#fffdf8; color:#6f5c3e; }
.pw_studio_actionbar .pw_studio_nav_btn + .pw_studio_nav_btn { border-left:1px solid #d8c89e; }
.pw_studio_actionbar .pw_studio_nav_btn i { color:#9a8155; font-size:13px; }
.pw_studio_actionbar .pw_studio_nav_btn:hover { background:#fff7ef; border-color:#d8c89e; }
.pw_studio_actionbar .pw_studio_nav_btn.pw_studio_nav_active { background:#fbe7da; color:#6f5c3e; }

@media (max-width:1180px) {
	/* 중간 폭: 관리/편집의 실제 너비만큼 공개 메모리 열을 맞추고,
	   공유/새 메모리는 별도의 오른쪽 열에 고정한다. */
	.pw_studio_actionbar {
		display:grid;
		grid-template-columns:max-content max-content minmax(24px,1fr) auto;
		grid-template-rows:auto auto;
		align-items:end;
		column-gap:18px;
		row-gap:18px;
	}
	.pw_action_group_manage { grid-column:1; grid-row:1; }
	/* 구분선은 공개 메모리 앞이 아니라 편집 영역의 오른쪽 끝에 둔다. */
	.pw_action_group_edit { grid-column:2; grid-row:1; padding-right:18px; border-right:1px solid #eadfc8; }
	/* 공개 메모리는 메모리 관리와 같은 왼쪽 기준선에서 시작한다. */
	.pw_studio_actionbar .pw_action_group_explore { grid-column:1 / 3; grid-row:2; width:100%; padding-left:0; border-left:0; }
	.pw_action_primary { grid-column:4; grid-row:2; margin-left:0; }
	.pw_studio_actionbar .pw_studio_nav_wrap { width:100%; }
	.pw_studio_actionbar .pw_studio_nav_btn { flex:1 1 33.333%; }
}

@media (max-width:720px) {
	.pw_studio_actionbar { display:grid; grid-template-columns:1fr auto; gap:14px 10px; padding:14px; border-radius:12px; }
	.pw_action_group { gap:7px; }
	.pw_action_group + .pw_action_group { padding-left:0; border-left:0; }
	.pw_action_group_manage { grid-column:1 / -1; grid-row:3; padding-top:12px; border-top:1px solid #eadfc8; }
	.pw_action_group_edit { grid-column:1; grid-row:1; padding-right:0; border-right:0; }
	.pw_action_group_explore { grid-column:1 / -1; grid-row:2; }
	.pw_action_primary { grid-column:2; grid-row:1; align-self:end; }
	.pw_action_group_controls { gap:6px; }
	.pw_studio_actionbar button, .pw_studio_actionbar .pw_studio_nav_btn { min-height:44px; }
	.pw_studio_actionbar #pw_btn_delete_current_page,
	.pw_studio_actionbar #pw_btn_trash,
	.pw_studio_actionbar #pw_btn_undo,
	.pw_studio_actionbar #pw_btn_redo,
	.pw_studio_actionbar #pw_btn_share,
	.pw_studio_actionbar #pw_btn_new_page { padding:0 12px; }
	.pw_studio_actionbar #pw_btn_undo .pw_action_text,
	.pw_studio_actionbar #pw_btn_redo .pw_action_text,
	.pw_studio_actionbar #pw_btn_share .pw_action_text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
	.pw_studio_actionbar #pw_btn_undo, .pw_studio_actionbar #pw_btn_redo, .pw_studio_actionbar #pw_btn_share { width:44px; padding:0; justify-content:center; }
	.pw_studio_actionbar .pw_studio_nav_wrap { width:100%; }
	.pw_studio_actionbar .pw_studio_nav_btn { flex:1 1 33.333%; min-width:0; padding:0 8px; }
}

@media (max-width:390px) {
	.pw_studio_actionbar { grid-template-columns:1fr; }
	.pw_studio_actionbar .pw_action_group_edit { grid-column:1; grid-row:1; }
	.pw_action_primary { grid-column:1; grid-row:2; justify-content:flex-end; }
	.pw_studio_actionbar .pw_action_group_explore { grid-column:1; grid-row:3; }
	.pw_studio_actionbar .pw_action_group_manage { grid-column:1; grid-row:4; }
	.pw_studio_actionbar #pw_btn_delete_current_page, .pw_studio_actionbar #pw_btn_trash { flex:1 1 50%; justify-content:center; }
}

/* 공유 버튼 - 그림판 상단에서 하단 중앙으로 이동(작성자 본인만 노출) */
.pw_share_wrap { display:flex; justify-content:center; margin-top:12px; }

/* 목록 버튼 - 나의 메모리가 아닌 친구/이웃/전체 메모리 상세보기 하단에서 목록 페이지로 돌아가기 */
.pw_list_btn_wrap { display:flex; justify-content:center; margin-top:12px; }
.pw_list_btn {
	display:flex; align-items:center; gap:6px; background:#fff; color:#495057;
	border:1.5px solid #dee2e6; border-radius:20px; padding:10px 22px; font-size:14px;
	font-weight:bold; cursor:pointer; text-decoration:none;
}
.pw_list_btn:hover { background:#eef2f6; }

/* [친구 작업실 방문] 서로 펫 친구이고 페이지가 잠겨있지 않을 때, 상세보기 하단에서 라이브 편집
   화면으로 들어갈 수 있는 버튼 */
.pw_friend_visit_wrap { display:flex; justify-content:center; margin-top:12px; }
.pw_friend_visit_btn {
	display:flex; align-items:center; gap:6px; background:#e8590c; color:#fff;
	border:1.5px solid #e8590c; border-radius:20px; padding:10px 22px; font-size:14px;
	font-weight:bold; cursor:pointer; text-decoration:none;
}
.pw_friend_visit_btn:hover { background:#d14f0a; border-color:#d14f0a; }

/* [내 작업실 이동] 친구/이웃/전체 메모리 탭에서 내 카드를 눌러 들어온 상세 화면(캡처 이미지만
   보이는 화면)에서, 실제로 오브젝트를 편집하려면 '나의 작업실'로 이동해야 함을 안내하는 버튼 */
.pw_my_studio_move_wrap { display:flex; justify-content:center; margin-top:12px; }

/* [공유 버튼 위치 이동] 내 작업실이 아닌 곳에서 내 메모리 상세를 볼 때는, 공유 버튼을 '내 작업실
   이동' 버튼과 같은 줄 왼쪽 끝에 나란히 둠 */
.pw_my_studio_row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }
.pw_my_studio_row .pw_share_btn { margin:0; }
.pw_my_studio_row .pw_my_studio_move_btn { margin:0; }
.pw_my_studio_move_btn {
	display:flex; align-items:center; gap:6px; background:#fff; color:#e8590c;
	border:1.5px solid #e8590c; border-radius:20px; padding:10px 22px; font-size:14px;
	font-weight:bold; cursor:pointer; text-decoration:none;
}
.pw_my_studio_move_btn:hover { background:#fff6ec; }

/* [친구 흔적 보기] 나의 작업실에서, 친구가 이 페이지에 남긴 흔적을 날짜/닉네임으로 모아 보여줌 */
.pw_friend_traces_wrap { display:flex; justify-content:center; margin-top:12px; }
.pw_friend_traces_btn {
	display:flex; align-items:center; gap:6px; background:#fff; color:#495057;
	border:1.5px solid #dee2e6; border-radius:20px; padding:10px 22px; font-size:14px;
	font-weight:bold; cursor:pointer;
}
.pw_friend_traces_btn:hover { background:#eef2f6; }
.pw_friend_trace_list { max-height:320px; overflow-y:auto; margin:10px 0; }
.pw_friend_trace_item {
	padding:10px 12px; border-bottom:1px solid #f1f3f5; font-size:15px; color:#495057;
}
.pw_friend_trace_item:last-child { border-bottom:none; }
.pw_friend_trace_item b { color:#333; }

.pw_item {
	position:absolute; cursor:grab; user-select:none;
	-webkit-user-select:none; -webkit-touch-callout:none;
}
/* touch-action:none은 내가 옮기거나 회전/크기조절 할 수 있는 항목(pw_manageable)에만 적용한다.
   남이 그린 그림/사진 위에 이 속성이 걸려 있으면 모바일에서 그 영역을 손가락으로 쓸어올려도
   페이지 스크롤이 아예 안 먹혀서, 다른 사람의 그림이 있는 메모리를 볼 때 그 부분만 스크롤이
   안 되는 문제가 있었음 (권한이 없는 항목은 어차피 드래그로 움직이지 않으므로 touch-action을
   막을 이유가 없음). */
.pw_item.pw_manageable { touch-action:none; }
.pw_item:active { cursor:grabbing; }
/* 모바일에서 사진/그림을 손가락으로 잠깐만 눌러도(길게 누르기 전에) 브라우저가 자체적으로
   '이미지 저장/복사' 메뉴를 띄우려는 낌새를 보이는 경우가 있어서, 오브젝트 선택이 잘 안 되는
   원인이었음 - 이미지에도 명시적으로 콜아웃/드래그를 꺼서 항상 우리 쪽 탭 선택이 먼저 먹히게 함 */
.pw_item img, .pw_item svg {
	-webkit-user-drag:none; user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; -o-user-drag:none;
	-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.pw_item.pw_selected > .pw_item_inner { outline:2px dashed #007bff; outline-offset:6px; border-radius:4px; }
/* 선택된 항목은 실제 저장된 레이어 순서(wi_zindex)와 무관하게 다른 항목들보다는 항상 맨 위로 띄워서,
   겹쳐 있어도 삭제/회전/크기조절/앞으로·뒤로 버튼이 가려지지 않게 함. 단, 왼쪽 상단 보관/숨김
   아이콘·왼쪽 하단 배경색 아이콘(z-index:1000000)보다는 항상 아래에 있어야 함 - 예전에 둘 다
   999999로 같아서, 큰 템플릿 이미지를 선택(드래그)하면 DOM 순서상 그 이미지가 위쪽 아이콘 버튼을
   가려버리는 문제가 있었음 */
.pw_item.pw_selected { z-index:500000 !important; }

.pw_item_controls {
	display:none; position:absolute; bottom:-38px; left:50%; transform:translateX(-50%);
	background:#fff; border-radius:20px; padding:4px 6px; box-shadow:0 2px 8px rgba(0,0,0,0.22);
	gap:2px; white-space:nowrap; z-index:5;
}
.pw_item.pw_selected .pw_item_controls { display:flex; }
.pw_item_ctrl {
	width:26px; height:26px; border-radius:50%; border:none; background:transparent;
	color:#495057; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; padding:0;
}
.pw_item_ctrl:hover { background:#f1f3f5; }
.pw_item_ctrl[data-act="layer-front"], .pw_item_ctrl[data-act="layer-back"] { color:#007bff; }
.pw_item_ctrl[data-act="edit"] { color:#2f9e44; }

/* 회전/크기 조절 핸들 - pw_item_inner 안쪽에 위치해서 오브젝트와 함께 회전/확대됨 */
/* touch-action은 CSS 상속 속성이 아니라서 부모(.pw_item)에만 none을 줘도 이 손잡이들에는
   적용되지 않음 - 각 핸들에 직접 명시해야 모바일에서 브라우저 기본 스크롤 제스처가
   드래그를 가로채지 않음 */
.pw_manageable .pw_item_inner { touch-action:none; }
.pw_rotate_handle {
	display:none; position:absolute; left:50%; top:-34px; width:24px; height:24px;
	margin-left:-12px; border-radius:50%; background:#007bff; color:#fff;
	align-items:center; justify-content:center; font-size:11px; cursor:grab;
	box-shadow:0 2px 6px rgba(0,0,0,0.25); z-index:6;
	touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.pw_rotate_handle::after {
	content:''; position:absolute; left:50%; top:24px; width:2px; height:12px;
	background:#007bff; margin-left:-1px;
}
.pw_resize_handle {
	display:none; position:absolute; right:-9px; bottom:-9px; width:18px; height:18px;
	border-radius:50%; background:#fff; border:3px solid #007bff; cursor:nwse-resize;
	box-shadow:0 2px 5px rgba(0,0,0,0.25); z-index:6;
	touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
/* 글 박스 좌우 너비 조절 손잡이 - 오른쪽 가운데. 글꼴 크기는 그대로 두고 박스 폭(줄바꿈 위치)만 바꿈 */
.pw_text_width_handle {
	display:none; position:absolute; right:-9px; top:50%; margin-top:-9px; width:18px; height:18px;
	border-radius:50%; background:#fff; border:3px solid #007bff; cursor:ew-resize;
	box-shadow:0 2px 5px rgba(0,0,0,0.25); z-index:6;
	touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.pw_item.pw_selected .pw_rotate_handle { display:flex; }
.pw_item.pw_selected .pw_resize_handle { display:block; }
.pw_item.pw_selected .pw_text_width_handle { display:block; }

/* [수정] filter:drop-shadow는 스티커(svg)/사진(img)에는 캡처에서도 살아있었지만, 순수 <div>인
   폴라로이드 카드에는 안 먹혔고(캡처에서 그림자가 다시 사라짐) 오히려 캡처 속도만 크게 느려지는
   부작용이 있었음 - filter를 포기하고 box-shadow로 되돌림(화면에서는 정상 표시). 캡처용 그림자는
   list.skin.php의 html2canvas onclone에서 실제 div를 심는 방식으로 별도 처리함 */
.pw_polaroid { background:#fff; padding:8px 8px 22px; box-shadow:0 3px 8px rgba(0,0,0,0.25); border-radius:2px; width:140px; }
/* [게시 캡처용 그림자 - 세 번째 수정, 최종] CSS radial-gradient는 html2canvas 1.4.1 버그로 캡처 시
   아예 안 그려졌고(niklasvh/html2canvas#2391), 그 다음 단색으로 바꿨더니 이번엔 하드엣지 사각형으로
   딱딱하게 보인다는 피드백을 받음. 최종적으로 list.skin.php의 html2canvas onclone에서 canvas API로
   그라데이션을 진짜 PNG 이미지로 구워서 background-image로 심는 방식으로 변경(CSS 그라데이션 해석
   버그를 완전히 우회) - 여기 CSS는 위치/반복 규칙만 담당하고 실제 이미지/크기/위치는 JS가 지정함 */
.pw_polaroid_capture_shadow { position:absolute; background-repeat:no-repeat; background-size:100% 100%; }
/* [수정] 사진을 처음 올릴 때부터 원본 비율 그대로(자르지 않고) 보이도록 <img>를 그냥 카드 너비에
   맞춰 자연스럽게 줄이기만 함(width:100%, height:auto) - 예전엔 140x110 고정 박스에 잘라 넣는
   .pw_polaroid_photo(배경 이미지 방식)를 썼는데, 새로고침 후 다시 불러올 때(PHP 렌더러)는 처음부터
   이 <img> 방식이라 "새로고침해야 비율이 맞게 보인다"는 불일치가 있었음 - 이제 둘 다 같은 방식으로
   통일함. object-fit을 쓰지 않는 단순한 크기 조절이라 html2canvas 게시 캡처에도 문제없음(과거
   object-fit:cover 방식에서만 있었던 문제) */
.pw_polaroid img {
	display:block; width:100%; height:auto;
	-webkit-user-drag:none; user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; -o-user-drag:none;
	-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
/* [예전 방식, 더 이상 새로 쓰이지 않음] 혹시 남아있는 참조를 위해 규칙만 유지 */
.pw_polaroid_photo {
	display:block; width:100%; height:110px;
	background-size:cover; background-position:center; background-repeat:no-repeat;
	-webkit-user-drag:none; user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; -o-user-drag:none;
	-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}

/* 손그림(투명 배경 PNG) - 카드 없이 그림자만 줘서 메모리 위에 바로 그린 것처럼 보이게 함.
   [수정] max-width/max-height로 둘 다 140 안에 가두면 웬만한 그림은 여전히 정사각형 박스 느낌으로
   보여서(비율에 따라 눈에 띄게 달라 보이지 않음) - 사진(.pw_polaroid img)과 완전히 같은 방식으로
   폭만 140px로 고정하고 높이는 제한 없이 auto로 둠. 가로로 넓게 그리면 넓적하게, 세로로 길게
   그리면 길게 - 비율 그대로 다르게 보임. object-fit을 쓰지 않는 단순한 크기 조절이라 html2canvas
   게시 캡처에도 안전함 */
.pw_drawing_img {
	display:block; width:140px; height:auto;
	filter:drop-shadow(0 3px 6px rgba(0,0,0,0.25));
	-webkit-user-drag:none; user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; -o-user-drag:none;
	-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}

.pw_item_sticker svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); }

.pw_item_text_inner {
	display:inline-block; max-width:220px; background:#fffdf5; border:1px solid rgba(0,0,0,0.08);
	box-shadow:0 3px 6px rgba(0,0,0,0.15); border-radius:4px; padding:10px 14px;
	font-weight:bold; line-height:1.4; word-break:break-word;
	font-family:'Gaegu',inherit; font-size:17px;
}

/* [2026-08 긴급 수정] 삭제(×) 버튼이 선택 여부와 상관없이 모든 항목에 항상 떠 있었던 버그 -
   기본 z-index가 wi_id(최근에 그린 항목일수록 큼, list.skin.php pwBuildItemEl 참고)라서, 항목들이
   화면에서 겹치면 더 최근 항목이 항상 위에 쌓이고, 그 항목의 × 버튼이 그 아래 깔린 오래된 항목의
   × 버튼 자리를 가려버림 - 그 결과 사용자는 오래된 항목의 ×를 눌렀다고 생각했지만 실제로는 위에
   덮여 있던 최신 항목의 ×가 클릭되어 방금 그린 그림이 대신 삭제되는 사고로 이어졌다(실제 신고
   사례). 잠금 버튼(.pw_item_lock_btn)/조작 버튼(.pw_item_controls)이 이미 쓰고 있는 것과 동일하게
   "먼저 선택 → 그 다음 삭제" 2단계로 바꿔서, 선택된 항목만(z-index:500000으로 항상 맨 위로 뜸)
   × 버튼이 보이도록 한다 - 겹친 다른 항목의 버튼을 잘못 누를 여지 자체를 없앤다. */
.pw_item_del {
	display:none; position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:50%;
	background:#495057; color:#fff; border:none; font-size:11px; line-height:20px; padding:0;
	cursor:pointer; align-items:center; justify-content:center; z-index:7;
}
.pw_item.pw_selected .pw_item_del { display:flex; }

/* [신규] 오브젝트 잠금 아이콘 - 선택박스(pw_selected) 왼쪽 위. 삭제(×) 버튼과 대칭되는 자리에 둠.
   잠긴 상태는 자물쇠가 잠긴 아이콘 + 주황색으로 눈에 띄게 구분 */
.pw_item_lock_btn {
	display:none; position:absolute; top:-8px; left:-8px; width:20px; height:20px; border-radius:50%;
	background:#495057; color:#fff; border:none; font-size:10px; padding:0;
	cursor:pointer; align-items:center; justify-content:center; z-index:7;
}
.pw_item.pw_selected .pw_item_lock_btn { display:flex; }
.pw_item.pw_item_locked .pw_item_lock_btn { background:#e8590c; }
/* 잠긴 오브젝트는 선택되어 있어도 회전/크기조절/너비조절 손잡이를 아예 숨기고, 드래그해도
   움직이지 않으므로 커서도 '잡기' 모양 대신 기본 커서로 바꿔서 고정됐음을 알림 */
.pw_item.pw_item_locked .pw_rotate_handle,
.pw_item.pw_item_locked .pw_resize_handle,
.pw_item.pw_item_locked .pw_text_width_handle { display:none !important; }
.pw_item.pw_item_locked,
.pw_item.pw_item_locked:active { cursor:default; }

.pw_popup_overlay {
	position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);
	/* [팝업이 그림판 버튼에 가려지던 문제 수정] 그림 영역의 잠금/숨김/게시/배경색 아이콘과 상하
	   화살표 버튼은 오브젝트보다 항상 위에 있도록 z-index:1000000으로 고정해 둬서, 스티커/글쓰기/
	   그림/템플릿 같은 팝업의 예전 z-index(9999)보다 더 위에 떠 그 버튼들이 팝업 위로 뚫고 나와
	   보이는 문제가 있었음. 팝업은 화면 전체를 덮는 최상위 레이어여야 하므로 그 어떤 버튼보다도
	   위에 오도록 훨씬 크게 잡음 */
	z-index:2000000; justify-content:center; align-items:center;
}
.pw_popup_box { background:#fff; width:90%; max-width:360px; max-height:88vh; overflow-y:auto; border-radius:12px; padding:20px; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
.pw_popup_box h3 { margin:0 0 15px; font-size:16px; color:#333; font-weight:bold; text-align:center; }

/* [모바일 전용] 게시된 캡처 이미지가 작아서 글씨/사진이 잘 안 보이는 문제 - 탭하면 전체화면으로
   크게 보여주고, 화면보다 큰 이미지를 손가락으로 좌우/상하로 끌어서(팬) 살펴볼 수 있게 하는 라이트박스.
   다른 팝업들과 같은 최상위 레이어 규칙을 따르되 그보다 한 단계 더 위(항상 최상단이어야 함) */
.pw_content_img_lightbox {
	position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.92);
	z-index:2000001; display:none; align-items:center; justify-content:center;
	touch-action:none; overscroll-behavior:none;
}
.pw_content_img_lightbox_scroll {
	width:100%; height:100%; overflow:hidden; touch-action:none; overscroll-behavior:none;
	display:flex; align-items:center; justify-content:center;
}
/* 팝업이 열린 동안 모바일 브라우저의 가로 당김(뒤로/앞으로 가기)이 시작되지 않도록 문서
   루트까지 가로 오버스크롤을 차단한다. */
html.pw_lightbox_open, html.pw_lightbox_open body {
	overflow:hidden; overscroll-behavior-x:none;
}
/* [핀치 확대/축소 + 이동] 기존에는 이미지를 항상 220% 고정폭으로 키워놓고 네이티브 스크롤로만
   좌우/상하 이동이 가능했는데, 실제 두 손가락 핀치 확대/축소는 안 됐음. 이제 이미지는 화면에 맞는
   기본 크기로 두고, JS(pwApplyContentImgZoomTransform)가 transform:translate()+scale()로 확대/축소와
   이동을 직접 처리함(핀치, 더블탭, 확대 상태에서 한 손가락 드래그로 이동) */
.pw_content_img_lightbox_scroll img {
	/* 모바일 화면의 세로 높이에 맞춰 이미지를 꽉 채운다. 이미지 비율에 따라 가로가 화면 밖으로
	   넘칠 수 있으며, 넘친 부분은 한 손가락 패닝으로 좌우 이동해 확인한다. */
	display:block; width:auto; height:100%; max-width:none; max-height:100%; margin:auto;
	transform-origin:center center; will-change:transform;
	touch-action:none; overscroll-behavior:none; -webkit-user-drag:none;
	-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
/* [항상 누를 수 있는 위치로 이동] 오른쪽 위 구석은 기기 노치/상태바/브라우저 아이콘에 가려
   손가락이 잘 닿지 않는 경우가 있어, 화면 중앙 하단에 항상 떠 있는 알약 모양 버튼으로 옮김.
   env(safe-area-inset-bottom)로 아이폰 하단 홈 인디케이터 영역도 피해서 배치함 */
.pw_content_img_lightbox_close {
	position:fixed; left:50%; bottom:22px; bottom:calc(22px + env(safe-area-inset-bottom));
	transform:translateX(-50%); z-index:2000002;
	display:flex; align-items:center; gap:6px; padding:11px 24px; border-radius:999px;
	border:none; background:rgba(0,0,0,0.78); color:#fff; font-size:15px; font-weight:bold;
	box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.pw_content_img_lightbox_close i { font-size:14px; }
/* PC(넓은 화면)에서는 이 기능 자체를 열지 않으므로(JS에서 768px 초과면 차단) 커서도 일반 상태로 둠 -
   모바일 폭에서만 이미지에 확대 가능한 느낌을 주기 위해 커서 힌트 추가 */
@media (max-width:768px) {
	.pw_board_content_img { cursor:zoom-in; }
}

.pw_sticker_grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:15px; }
.pw_sticker_opt {
	background:#f8f9fa; border:1.5px solid #dee2e6; border-radius:8px; padding:12px;
	display:flex; align-items:center; justify-content:center; color:#e8590c; cursor:pointer;
}
.pw_sticker_opt:hover { background:#eef2f6; }

#pw_text_input {
	width:100%; height:80px; border:1px solid #ddd; border-radius:6px; padding:10px;
	font-size:14px; resize:none; margin-bottom:12px; box-sizing:border-box;
}

/* [신규] 글 팝업 '글꼴' 드롭다운 - 다른 입력 필드와 통일된 라운드 테두리 + 포커스시 파란 테두리 */
.pw_font_select {
	width:100%; border:1px solid #ddd; border-radius:6px; padding:10px 12px;
	font-size:14.5px; color:#333; margin-bottom:8px; box-sizing:border-box;
	background:#fff; cursor:pointer; appearance:auto;
}
.pw_font_select:focus { outline:none; border-color:#007bff; }
.pw_popup_label { font-size:13.5px; color:#868e96; font-weight:bold; margin:0 0 4px; text-align:center; }
/* [캔버스 아이콘 - 현재 작업영역 안내] 캔버스 크기 패널을 열었을 때 지금 선택된 해상도를
   숫자(px)로도 함께 보여주는 라벨 - 옆 토글 버튼의 active 표시와 중복 안내라 보통 글자보다 옅게 처리 */
.pw_draw_current_size_label { font-weight:normal; color:#adb5bd; font-size:12.5px; }

.pw_color_row { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:8px; }
.pw_color_opt { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }

/* [신규] 글 팝업 글자색/배경색 - '현재 색상' 스와치(왼쪽) + 표준컬러 프리셋(오른쪽)을 한 줄에
   나란히 배치(이미지 시안 참고). 캡션 글자는 없애고 스와치를 살짝 키워 눈에 잘 띄게 함
   (크기/모양 override인 .pw_current_color_btn_lg는 기본 .pw_current_color_btn 규칙보다 뒤에 둬야
   같은 우선순위에서 확실히 덮어써짐 - 아래쪽 기본 규칙 뒤에 이어서 정의함) */
.pw_color_picker_row { display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; }
.pw_color_picker_row .pw_color_row { flex:1; justify-content:flex-start; margin-bottom:0; }
.pw_color_opt.active { border-color:#333; }

/* [현재 색상 표시 + 직접 선택] 그림판 색상 프리셋 위에, 지금 선택된 색을 항상 보여주는 스와치.
   오른쪽 아래 작은 연필 배지로 "눌러서 직접 고를 수 있다"는 걸 프리셋 스와치들과 구분해서 알려줌 */
.pw_current_color_row { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:6px; }
.pw_current_color_caption { font-size:13px; color:#868e96; font-weight:bold; }
.pw_current_color_btn {
	position:relative; width:32px; height:32px; border-radius:50%; border:2px solid #dee2e6; cursor:pointer;
	padding:0; background:#fff;
}
.pw_current_color_dot { display:block; width:100%; height:100%; border-radius:50%; background:#333333; }
.pw_current_color_btn::after {
	content:"\f040"; font-family:"FontAwesome"; position:absolute; right:-4px; bottom:-4px; width:16px; height:16px;
	border-radius:50%; background:#495057; color:#fff; font-size:9px; line-height:16px; text-align:center;
	box-shadow:0 0 0 2px #fff;
}
/* [신규] 글 팝업 전용 - 스와치를 좀 더 크고 사각형(둥근 모서리)으로 표시(이미지 시안 참고) */
.pw_current_color_btn_lg { width:52px; height:52px; border-radius:10px; flex:none; }
.pw_current_color_btn_lg .pw_current_color_dot { border-radius:8px; }
.pw_current_color_btn_lg::after { right:-3px; bottom:-3px; }

/* 색상 직접 선택(HSB) 팝업 - 서브페이지 타이틀 배너 관리자 설정의 색상 선택기와 같은 구조/동작 */
.pw_hsb_picker { width:100%; max-width:260px; margin:0 auto 14px; }
.pw_sv_square { position:relative; width:100%; height:150px; border-radius:8px; margin-bottom:10px; cursor:crosshair; overflow:hidden; }
.pw_sv_white_layer { position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.pw_sv_black_layer { position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(to top, #000, rgba(0,0,0,0)); }
.pw_sv_pointer {
	position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid #fff;
	box-shadow:0 0 0 1px rgba(0,0,0,0.4); transform:translate(-7px,-7px); pointer-events:none; left:0; top:0;
}
.pw_hue_bar {
	position:relative; width:100%; height:16px; border-radius:8px; margin-bottom:12px; cursor:pointer;
	background:linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.pw_hue_pointer {
	position:absolute; top:-2px; width:20px; height:20px; border-radius:50%; border:2px solid #fff;
	box-shadow:0 0 0 1px rgba(0,0,0,0.4); background:transparent; transform:translateX(-10px); pointer-events:none; left:0;
}
.pw_hsb_result { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pw_hsb_swatch { display:inline-block; width:30px; height:30px; border-radius:6px; border:1px solid #ddd; flex-shrink:0; }
.pw_hsb_result input { flex:1; padding:8px 10px; border:1px solid #ddd; border-radius:6px; font-size:14px; }

/* 배경색 스와치 - 텍스트 팝업 전용, pw_color_opt와 모양은 같지만 사각형(작은 카드 느낌)으로 구분 */
.pw_bg_opt {
	width:28px; height:28px; border-radius:6px; border:2px solid #e9ecef; cursor:pointer; padding:0;
	background:#fff;
}
.pw_bg_opt.active { border-color:#333; }
.pw_bg_opt_none {
	background:linear-gradient(135deg, transparent 0%, transparent 46%, #e03131 46%, #e03131 54%, transparent 54%, transparent 100%), #fff;
	background-size:100% 100%;
}

/* [신규] 글 팝업 '현재 색상'(배경색) 스와치가 '배경 없음' 상태일 때 - pw_bg_opt_none과 같은 대각선 표시 */
.pw_current_color_dot_none {
	background:linear-gradient(135deg, transparent 0%, transparent 46%, #e03131 46%, #e03131 54%, transparent 54%, transparent 100%), #fff !important;
	background-size:100% 100%;
}

/* 글꼴/굵기·기울임 선택 버튼 - 국내/해외 토글과 같은 온오프 버튼 느낌 */
.pw_toggle_row { display:flex; gap:8px; justify-content:center; margin-bottom:8px; flex-wrap:wrap; }
/* [신규] 색 채우기 도구 아이콘(인라인 SVG, 롤러 모양) - 옆 텍스트/폰트 아이콘과 세로 정렬 맞춤 */
.pw_svg_icon { vertical-align:-2px; flex:none; }
.pw_toggle_row:last-of-type { margin-bottom:8px; }
.pw_toggle_opt {
	flex:1; max-width:110px; background:#f8f9fa; border:1.5px solid #dee2e6; border-radius:8px;
	padding:8px 6px; font-size:14.5px; color:#495057; cursor:pointer;
}
.pw_toggle_opt.active { background:#007bff; border-color:#007bff; color:#fff; }

/* [신규] 그림판 크기 선택 프롬프트 - 큰 글씨(기본/중간/큰) 아래 실제 px 값을 작은 글씨로 함께 보여줌 */
.pw_draw_size_prompt_row .pw_toggle_opt { padding:14px 6px; font-size:15px; font-weight:bold; line-height:1.6; }
.pw_draw_size_prompt_px { font-size:12.5px; font-weight:normal; color:#868e96; }
.pw_draw_size_prompt_row .pw_toggle_opt.active .pw_draw_size_prompt_px { color:#eaf2ff; }

/* 자유 그림 팝업 */
.pw_draw_popup_box { max-width:340px; }
/* 타이틀 폰트 높이(1em)에 맞춰 자동으로 커지고 작아짐 - 팝업마다 폰트 크기가 달라도(13px~1.05rem 등) 항상 글자 높이와 비례를 유지함 */
.pw_draw_title_logo { height:1em; width:auto; vertical-align:-0.15em; margin-right:4px; }
/* 그림 영역(가상 캔버스)이 확대 단계에 따라 화면보다 커질 수 있어서, 바깥(wrap)은 항상 고정된
   크기의 '창'으로 두고 안쪽(scroll)만 실제 캔버스 크기에 맞춰 스크롤되게 함 - 형태/지우기 버튼은
   wrap의 자식(스크롤 밖)이라 확대해서 스크롤해도 항상 같은 모서리에 고정되어 보임 */
/* [모바일 세로 공간 확보] 아래 설정 영역이 아이콘+레이어팝업 방식으로 바뀌면서 생긴 여유를
   캔버스 자체를 세로로 더 키우는 데 씀 - 실제 그리는 좌표(비트맵)는 항상 정사각형이라 그대로고,
   이 값은 어디까지 스크롤 없이 한 번에 보이는지를 정하는 '창(뷰포트)' 크기일 뿐이라 정사각형일
   필요가 없음 */
.pw_draw_canvas_wrap { position:relative; width:280px; height:400px; aspect-ratio:auto; margin:0 auto 10px; }
/* [실제로 그릴 수 있는 영역이 어디까지인지 안 보이는 문제 수정] 축소 단계에서는 실제 캔버스가 이
   창(뷰포트)보다 작아져서 캔버스 바깥쪽 여백이 남는데, 그 여백과 캔버스가 똑같이 흰색이라 어디까지
   그릴 수 있는지 구분이 안 됐음 - 바깥 여백(scroll의 배경)만 회색으로 바꿔서 흰 캔버스와 뚜렷하게
   구분되게 함(캔버스가 창보다 커지는 확대 단계에서는 이 회색 여백이 보이지 않음) */
.pw_draw_canvas_scroll {
	position:relative; width:100%; height:100%; overflow:auto; background:#dee2e6; border:1px solid #ddd; border-radius:8px;
}
/* [신규] 펜/지우개 굵기 미리보기 점선 원 - 실제 그리기와 무관한 화면 안내용 레이어라 클릭/그리기를
   가로막지 않도록 pointer-events:none, 캔버스보다 위(하지만 모서리 버튼들보다는 아래)에 둠.
   transform으로 중심을 마우스 포인터 위치에 정확히 맞춤(left/top은 원의 왼쪽 위가 아니라 중심 기준) */
.pw_draw_cursor_ring {
	position:absolute; left:0; top:0; display:none; pointer-events:none; z-index:4;
	border:1.5px dashed #495057; border-radius:50%; box-sizing:border-box;
	transform:translate(-50%, -50%);
}
/* 배경의 옅은 격자 무늬는 순전히 화면 참고용(지금 얼마나 확대됐는지 가늠하는 용도)이고, 실제
   저장되는 그림(canvas 비트맵)에는 전혀 포함되지 않음 - CSS 배경은 canvas의 그리기 내용과 완전히
   분리된 별도 레이어라, toBlob()/저장 시 그려진 내용만 캡처되고 이 배경 무늬는 절대 같이 저장되지
   않기 때문에 안전하게 쓸 수 있음. background-size를 %로 줘서 캔버스가 확대/축소될 때(CSS 크기가
   바뀔 때) 격자 칸도 항상 같은 비율로 함께 커지고 작아지게 함 */
#pw_draw_canvas {
	display:block; background-color:#fff;
	background-image:
		linear-gradient(to right, rgba(0,0,0,0.09) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0,0,0,0.09) 1px, transparent 1px);
	background-size: 10% 10%, 10% 10%;
	touch-action:none; cursor:crosshair; -webkit-user-select:none; user-select:none;
}
/* 화면이동(손바닥) 모드일 때 커서 모양 - 그리기가 아니라 화면을 옮긴다는 것을 알 수 있게 함 */
#pw_draw_canvas.pw_draw_pan_cursor { cursor:grab; }
.pw_draw_clear_btn {
	position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:50%;
	background:rgba(255,255,255,0.92); border:1px solid #dee2e6; color:#495057; cursor:pointer;
	display:flex; align-items:center; justify-content:center; font-size:13px;
}
/* [위치 이동] 원래 top:6px(좌상단)이었는데, 좌하단 펜 아이콘(.pw_draw_pen_quick_btn, bottom:6px)
   바로 위에 붙도록 좌하단 열로 옮김: 펜 버튼(30px 높이) + 6px 여백 = bottom:42px */
.pw_draw_shape_btn {
	position:absolute; bottom:42px; left:6px; width:30px; height:30px; border-radius:50%;
	background:rgba(255,255,255,0.92); border:1px solid #dee2e6; color:#495057; cursor:pointer;
	display:flex; align-items:center; justify-content:center; font-size:13px; z-index:6;
}
/* 지금 도구가 '펜'(=자유 그리기가 활성 상태)일 때 펜/지우개 빠른전환 버튼과 같은 방식으로 강조 표시 */
.pw_draw_shape_btn.pw_quick_tool_active { background:#007bff; border-color:#007bff; color:#fff; }
/* '자유' 상태 커스텀 이미지 아이콘 - 버튼(30x30) 안에 여백을 두고 꽉 차게 표시 */
.pw_draw_shape_free_icon { width:17px; height:17px; object-fit:contain; pointer-events:none; }
/* '그리기 타입' 패널 안 '자유' 토글 버튼(아이콘+글자)용 - 옆 텍스트와 나란히 보이도록 인라인 크기로 */
.pw_toggle_free_icon { width:14px; height:14px; object-fit:contain; vertical-align:-2px; }
/* [신규] 웹 전용 좌측 아이콘 레일의 '그리기 타입' 아이콘(38px 원형 버튼) 안에 표시되는 '자유' 커스텀
   이미지 - 패널이 열려 배경이 파랗게 바뀌면 흰색 반전 파일로 직접 교체됨(list.skin.php 참고) */
.pw_draw_shapetype_icon_free_img { width:16px; height:16px; object-fit:contain; pointer-events:none; }

/* 확대/축소(돋보기) 버튼 - 6단계, 기본 3단계 */
.pw_draw_zoom_row { display:flex; align-items:center; justify-content:center; gap:10px; width:auto; max-width:none; margin:0; }
.pw_draw_zoom_btn {
	width:32px; height:32px; border-radius:50%; background:#f8f9fa; border:1px solid #dee2e6;
	color:#495057; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none;
}
.pw_draw_zoom_btn:hover:not(:disabled) { background:#eef2f6; }
.pw_draw_zoom_btn:disabled { opacity:0.35; cursor:not-allowed; }
.pw_draw_zoom_label { font-size:14px; color:#868e96; font-weight:bold; min-width:46px; text-align:center; }
/* 화면이동(손바닥) 버튼 - 켜져 있는 동안(active)은 다른 확대/축소 버튼과 다른 색으로 구분되게 표시 */
#pw_draw_pan_btn.active { background:#007bff; border-color:#007bff; color:#fff; }
/* 화면이동 모드가 켜진 동안 아래 그리기 도구(형태/지우기/펜·지우개/색상/굵기/투명도)는 흐리게
   비활성화해서, 지금은 드래그로 화면을 옮기는 중이라는 것과 그림 도구를 쓸 수 없다는 것을 함께 알림 */
.pw_draw_tool_dimmed { opacity:0.35; pointer-events:none; }

/* 지금 그린 그림을 템플릿으로 저장 - 취소/붙이기 바로 위, 눈에 띄게 아웃라인 스타일로 구분 */
.pw_draw_add_template_btn {
	display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
	background:#fff; border:1.5px dashed #d9c9a3; border-radius:8px; color:#8a7550;
	font-size:14.5px; font-weight:bold; padding:9px; cursor:pointer; margin-bottom:10px;
}
.pw_draw_add_template_btn:hover { background:#fbf6ea; border-color:#c7b285; color:#6b5a3a; }

/* 실행취소/다시실행 버튼 */
.pw_draw_undo_row { display:flex; gap:8px; justify-content:center; width:auto; max-width:none; margin:0; }
.pw_draw_undo_btn {
	flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
	background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; color:#495057;
	padding:7px 6px; font-size:13.5px; font-weight:bold; cursor:pointer;
}
.pw_draw_undo_btn:hover { background:#eef2f6; }
.pw_draw_undo_btn:disabled { opacity:0.4; cursor:not-allowed; }

.pw_opacity_row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pw_opacity_row input[type="range"] { flex:1; }
.pw_opacity_row span { font-size:14.5px; color:#495057; width:40px; text-align:right; flex:none; }

/* 지우개 도구를 고르면 색상/투명도는 의미가 없으므로 흐리게 표시하고 조작을 막음 */
.pw_disabled_row { opacity:0.35; pointer-events:none; }

/* =====================================================================
   [팝업 하단 버튼 통일 규칙] 사이트 전체 팝업에서 제각각이던 하단 버튼 색상/배치를 하나로 정리.
   - 닫기 버튼 혼자만 있는 팝업: 회색(.pw_popup_cancel) + 가운데 정렬(.pw_popup_solo_close)
   - 닫기 + 기능버튼이 함께 있는 팝업: 왼쪽 정렬(.pw_popup_btn_row, 버튼은 늘어나지 않고 내용에
     맞는 고정폭), 주요 기능버튼은 파란색(.pw_popup_confirm), 나머지 기능버튼은 흰색+테두리
     (.pw_popup_secondary), 닫기 버튼은 있을 때든 혼자든 항상 회색으로 통일
   ===================================================================== */
.pw_popup_btn_row { display:flex; gap:10px; justify-content:center; }
.pw_popup_cancel, .pw_popup_confirm, .pw_popup_secondary {
	flex:none; min-width:100px; padding:12px 20px; border-radius:8px; font-size:14px; font-weight:bold;
	cursor:pointer; box-sizing:border-box;
}
.pw_popup_cancel { background:#6c757d; color:#fff; border:none; }
.pw_popup_confirm { background:#007bff; color:#fff; border:none; }
/* [나머지 기능버튼] 기능버튼이 여러 개일 때 주요 버튼(파란색) 외 나머지에 씀 - 흰 배경 + 테두리 */
.pw_popup_secondary { background:#fff; color:#495057; border:1px solid #ced4da; }
.pw_popup_secondary:hover { background:#f8f9fa; }
/* [닫기 버튼 혼자] 여러 팝업이 각자 따로 만들어 두던 "회색+가운데정렬+고정폭" 규칙을 공용
   클래스 하나로 통합(전에는 팝업마다 #id 선택자로 8곳 가까이 똑같은 규칙을 중복 작성했었음) */
.pw_popup_solo_close {
	display:block; margin:16px auto 0; min-width:130px; padding:12px 30px; font-size:15.5px;
}
.pw_mobile_edit_warning_text {
	font-size:14.5px; line-height:1.6; color:#444; margin:4px 0 0;
}
.pw_popup_confirm { background:#007bff; color:#fff; }
.pw_popup_cancel:disabled, .pw_popup_confirm:disabled, .pw_popup_secondary:disabled { opacity:0.4; cursor:not-allowed; }

/* [신규] 글 팝업(#pw_text_popup) 하단 취소/남기기 - 폭을 넓히고 가운데 정렬, 위 요소와 여백을 더 둠
   (다른 팝업들이 공용으로 쓰는 .pw_popup_btn_row 기본 동작은 그대로 두고, 이 팝업 전용 id로만 덮어씀)
   [주의] 웹 화면(769px 이상)에서는 그림판 팝업 전용 레이아웃 규칙이 .pw_popup_btn_row 전체에
   display:contents를 걸어 껍데기를 지워버리므로(아래 @media screen and (min-width:769px) 블록 참고),
   id 선택자로 display:flex를 다시 명시해서 이 팝업에서는 그 규칙에 영향받지 않도록 함(id가 class보다
   우선순위가 높아 같은 속성이라도 항상 이 규칙이 이김) */
#pw_text_btn_row { display:flex; justify-content:center; gap:14px; margin-top:22px; }
#pw_text_btn_row .pw_popup_cancel,
#pw_text_btn_row .pw_popup_confirm { flex:none; min-width:150px; padding:12px 10px; }

/* [자주 사용하는 소스] 하단 '선택 삭제'/'선택 붙이기' 버튼 - 순서를 삭제->붙이기로 두고 중앙정렬.
   id 선택자로 display:flex를 다시 못박아 데스크톱 폭(769px 이상)에서 .pw_popup_btn_row를
   display:contents로 지워버리는 그림판 팝업 전용 규칙의 영향을 받지 않게 함(구매목록 팝업과 동일한 이유) */
#pw_template_action_btn_row { display:flex; justify-content:center; gap:10px; }
#pw_template_action_btn_row .pw_popup_cancel,
#pw_template_action_btn_row .pw_popup_confirm { flex:none; min-width:130px; padding:12px 10px; }

/* [이미 구매하셨습니다 안내 팝업] '닫기'/'내 구매목록' 버튼 - 위 팝업들과 동일하게 중앙정렬 +
   두 버튼 크기를 같게 맞춤(기존엔 flex:1로 늘어나 폭이 서로 달라 보였음) */
#pw_shop_already_btn_row { display:flex; justify-content:center; gap:10px; }
#pw_shop_already_btn_row .pw_popup_cancel,
#pw_shop_already_btn_row .pw_popup_confirm { flex:none; min-width:130px; padding:12px 10px; }

/* '템플릿'(자주 사용하는 소스) 팝업 */
.pw_popup_desc { font-size:14px; color:#868e96; text-align:center; line-height:1.5; margin:-6px 0 14px; }
.pw_template_popup_box { max-width:340px; }
.pw_template_list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; max-height:260px; overflow-y:auto; }
.pw_template_item {
	display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; border:1.5px solid #e9ecef; border-radius:8px; padding:6px 10px;
}
.pw_template_item.selected { border-color:#f0c374; background:#fff8ec; }
.pw_template_thumb { width:34px; height:34px; object-fit:cover; border-radius:6px; flex-shrink:0; background:#f1f3f5; }
.pw_template_btn_row { margin-left:auto; display:flex; gap:6px; flex-shrink:0; }
.pw_template_select_btn, .pw_template_frame_btn {
	background:#fff; border:1.5px solid #d9c9a3; border-radius:16px; color:#8a7550;
	font-size:13px; font-weight:bold; padding:5px 10px; cursor:pointer; white-space:nowrap;
}
.pw_template_select_btn.active { background:#f0c374; border-color:#f0c374; color:#fff; }
/* '프레임 추가'는 일반 '선택'과 다른 색으로 구분해서 지금 이 옵션이 켜져 있는지 헷갈리지 않게 함 */
.pw_template_frame_btn.active { background:#5c9ded; border-color:#5c9ded; color:#fff; }
/* [아이템샵] 판매 신청/판매중 버튼 - 위 두 버튼과 같은 기본 톤을 쓰되, '판매중'일 때는 눈에 띄게
   초록 계열로 바꿔서 지금 이 템플릿이 판매 등록되어 있음을 한눈에 알 수 있게 함 */
.pw_template_sell_btn {
	background:#fff; border:1.5px solid #d9c9a3; border-radius:16px; color:#8a7550;
	font-size:13px; font-weight:bold; padding:5px 10px; cursor:pointer; white-space:nowrap;
}
.pw_template_sell_btn.selling { background:#2e9e6b; border-color:#2e9e6b; color:#fff; }
/* [외부 파일 판매 제한] '소스 추가'로 등록한 외부 파일은 판매 신청 버튼 대신 이 비활성 스타일로
   '판매불가'를 표시함(관리자에게는 적용 안 됨 - JS/PHP에서 애초에 이 클래스 대신 정상 버튼을 그림) */
.pw_template_sell_btn.pw_template_sell_disabled {
	background:#f1f3f5; border-color:#dee2e6; color:#adb5bd; cursor:not-allowed;
}
.pw_template_add_btn {
	display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
	background:#fff; border:1.5px dashed #d9c9a3; border-radius:8px; color:#8a7550;
	font-size:15px; font-weight:bold; padding:10px; cursor:pointer; margin-bottom:14px;
}
.pw_template_add_btn:hover { background:#fbf6ea; }
.pw_template_add_btn:disabled { opacity:0.4; cursor:not-allowed; }
/* 닫기 버튼 - 위 [선택 붙이기]/[선택 삭제] 버튼 행과 상하 간격을 띄우고, 두 버튼을 합친
   가로 크기(=팝업 안쪽 전체 너비)와 같아지도록 가로로 꽉 채움 */
.pw_template_popup_box #pw_template_close,
.pw_template_popup_box #pw_shop_purchases_close { display:block; width:100%; box-sizing:border-box; margin-top:14px; }
/* [구매 아이템함] '선택 삭제'/'선택 붙이기' 버튼 - 자주 사용하는 소스 팝업의 #pw_template_action_btn_row와
   동일하게 중앙정렬 + 두 버튼 크기를 같게 맞춤(아래 '닫기'는 전체폭으로 별도 줄에 둠) */
#pw_shop_purchase_action_btn_row { display:flex; justify-content:center; gap:10px; }
#pw_shop_purchase_action_btn_row .pw_popup_cancel,
#pw_shop_purchase_action_btn_row .pw_popup_confirm { flex:none; min-width:130px; padding:12px 10px; }

/* 배경 색상 지정 팝업 */
.pw_bgcolor_swatch_row { flex-wrap:wrap; }
.pw_bgcolor_swatch { width:34px; height:34px; border-radius:8px; border:2px solid #e9ecef; cursor:pointer; padding:0; }
.pw_bgcolor_swatch:hover { border-color:#c7b285; }

/* [배경 무늬 지정] 색상 스와치 바로 아래, 같은 팝업 안에 배치. 무늬는 반투명 배경이미지라 옅은
   종이색(#fdfbf3) 위에서 미리보기하고, 실제 적용될 때는 그 페이지에 고른 색 위에 겹쳐짐 */
.pw_bgpattern_row { flex-wrap:wrap; }
.pw_bgpattern_swatch {
	width:34px; height:34px; border-radius:8px; border:2px solid #e9ecef; cursor:pointer; padding:0;
	background-color:#fdfbf3;
}
.pw_bgpattern_swatch:hover { border-color:#c7b285; }
.pw_bgpattern_swatch.active { border-color:#333; }
/* '없음' - 다른 배경 없음 표시(.pw_bg_opt_none)와 같은 대각선 빗금 */
.pw_bgpattern_swatch_none {
	background:linear-gradient(135deg, transparent 0%, transparent 46%, #e03131 46%, #e03131 54%, transparent 54%, transparent 100%), #fff;
	background-size:100% 100%;
}

/* [배경 무늬] .pw_board_area(실제 캔버스)와 팝업 안 미리보기 스와치가 이 클래스들을 공유함.
   앞 4종(없음/노트/격자/흐린 동그라미)은 CSS 그라데이션이고, 뒤 4종은 테마 폴더 img/draw_BG/ 안의
   실제 이미지 파일을 배경에 타일로 반복시키는 방식임. 스와치는 34px로 작아서 큰 캔버스용 간격
   그대로 쓰면 무늬가 거의 안 보이므로, 아래 .pw_bgpattern_swatch.pw_bg_pattern_* 규칙에서
   CSS 패턴은 간격을 줄이고, 이미지 패턴은 cover로 확대해 스와치 안에서도 무늬가 한눈에 보이도록 함 */
.pw_bg_pattern_lines {
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(70,100,170,0.22) 28px);
}
.pw_bg_pattern_grid {
	background-image:
		repeating-linear-gradient(to right, rgba(0,0,0,0.09) 0, rgba(0,0,0,0.09) 1px, transparent 1px, transparent 20px),
		repeating-linear-gradient(to bottom, rgba(0,0,0,0.09) 0, rgba(0,0,0,0.09) 1px, transparent 1px, transparent 20px);
}
/* [흐린 동그라미] 처음엔 '종이 질감'으로 여러 겹의 미세한 점을 불규칙하게 깔았는데, 크기가 작은
   스와치에서는 격자무늬와 구분이 잘 안 된다는 피드백에 따라 하나의 은은한 원형 점을 일정한
   간격으로 반복하는 또렷한 물방울(도트) 패턴으로 바꿈 */
.pw_bg_pattern_paper {
	background-image: radial-gradient(circle, rgba(0,0,0,0.11) 2.5px, transparent 2.5px);
	background-size: 22px 22px;
}
/* [이미지 타일 무늬 4종] 테마 폴더 img/draw_BG/ 안의 실제 이미지 파일을 원본 크기 그대로
   반복시켜 배경 전체를 타일로 채움. 이미지가 모두 불투명이라 위에서 고른 배경 색상은
   가려지므로 색상 선택은 사실상 무의미해짐(별도 처리 없이 자연스럽게 이미지가 우선함) */
.pw_bg_pattern_tile_grass {
	background-image: url(../../../img/draw_BG/grass_tile.png);
	background-repeat: repeat;
}
.pw_bg_pattern_tile_hanji {
	background-image: url(../../../img/draw_BG/hanji_tile.png);
	background-repeat: repeat;
}
.pw_bg_pattern_tile_roughpaper {
	background-image: url(../../../img/draw_BG/roughpaper_tile.jpg);
	background-repeat: repeat;
}
.pw_bg_pattern_tile_sand {
	background-image: url(../../../img/draw_BG/sand_tile.png);
	background-repeat: repeat;
}
.pw_bg_pattern_tile_ocean {
	background-image: url(../../../img/draw_BG/ocean_tile.png);
	background-repeat: repeat;
	background-size: 400px 400px;
}

/* [작은 스와치 전용 축소판] 34px 안에서도 무늬가 잘 보이도록 반복 간격을 큰 캔버스 버전보다 줄임 */
.pw_bgpattern_swatch.pw_bg_pattern_lines {
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 6px, rgba(70,100,170,0.28) 7px);
}
.pw_bgpattern_swatch.pw_bg_pattern_grid {
	background-image:
		repeating-linear-gradient(to right, rgba(0,0,0,0.12) 0, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 7px),
		repeating-linear-gradient(to bottom, rgba(0,0,0,0.12) 0, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 7px);
}
.pw_bgpattern_swatch.pw_bg_pattern_paper {
	background-image: radial-gradient(circle, rgba(0,0,0,0.18) 2px, transparent 2px);
	background-size: 9px 9px;
}
/* 스와치 안에서는 타일 반복 대신 이미지 전체를 확대해서 보여줘야 어떤 무늬인지 알아보기 쉬움 */
.pw_bgpattern_swatch.pw_bg_pattern_tile_grass,
.pw_bgpattern_swatch.pw_bg_pattern_tile_hanji,
.pw_bgpattern_swatch.pw_bg_pattern_tile_roughpaper,
.pw_bgpattern_swatch.pw_bg_pattern_tile_sand,
.pw_bgpattern_swatch.pw_bg_pattern_tile_ocean {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
/* 닫기 버튼 - 가운데 정렬 + 누르기 쉽게 확대 */
#pw_bgcolor_close { display:block; width:auto; min-width:180px; margin:14px auto 0; padding:12px 30px; font-size:15px; }

/* 스티커 팝업 취소 버튼 - 가운데 정렬 + 누르기 쉽게 확대 */
#pw_sticker_cancel { display:block; width:auto; min-width:180px; margin:0 auto; padding:12px 30px; font-size:15px; }

@media screen and (max-width:768px) {
	#pw_board_scroll { max-height:70vh; }
	/* [배경설정 - 지금 기준 화면 표시] 이 라벨은 좁은 화면(=이미 모바일로 보고 있음)에서는 굳이
	   필요 없다고 판단해 숨김 - PC처럼 넓은 화면에서 볼 때만 참고용으로 보여주면 충분함 */
	.pw_bgdevice_label { display:none; }
	/* [보는 화면이 모바일일 때는 캡처 이미지를 다시 100%로] 위 .pw_board_content_img_mobile의 70%는
	   PC처럼 넓은 화면에서 세로로 긴 이미지가 과하게 커 보이는 걸 줄이기 위한 것 - 화면 자체가 이미
	   좁은 모바일에서는 그대로 두면 오히려 너무 작아 보이므로 원래 100%로 되돌림 */
	.pw_board_content_img.pw_board_content_img_mobile { width:100%; margin:0; }
	.pw_scroll_arrow_btn { width:44px; height:44px; font-size:18px; right:8px; }
	/* [모바일 전용] 상단 사진/스티커/글쓰기/그림/템플릿 아이콘 툴바는 숨김 - 그림 영역 왼쪽 아래
	   빠른 메뉴(.pw_quickmenu_wrap)가 같은 기능을 이미 대신하고 있어 중복임 */
	#pw_toolbar_wrap { display:none; }
	.pw_toolbar button { font-size:14px; padding:14px 8px; min-height:48px; }
	.pw_polaroid { width:120px; }
	/* [수정] 예전에 남아있던 height:95px 고정값을 지움 - 폭(120px)만 좁히고 높이는 auto로 그대로
	   둬야 모바일에서도 데스크톱과 똑같이 원본 비율 그대로 보임(고정 높이를 주면 다시 잘려 보임) */
	.pw_drawing_img { width:120px; }
	.pw_rotate_handle { width:32px; height:32px; margin-left:-16px; top:-40px; font-size:14px; }
	.pw_rotate_handle::after { top:32px; height:10px; }
	.pw_resize_handle { width:26px; height:26px; right:-13px; bottom:-13px; border-width:4px; }
	.pw_text_width_handle { width:26px; height:26px; right:-13px; margin-top:-13px; border-width:4px; }
	.pw_item_ctrl { width:32px; height:32px; font-size:14px; }
}

@media screen and (max-width:420px) {
	.pw_toolbar { flex-wrap:wrap; }
	.pw_toolbar button { flex:1 1 45%; }
	.pw_draw_canvas_wrap { width:100%; max-width:280px; height:360px; }
}

/* [그림판 하단 - 펜/지우개/캔버스/그리기타입 아이콘 + 레이어 팝업] 이제 모바일도 웹과 똑같이
   아이콘을 눌러야 그 설정이 카드 형태 레이어 팝업으로 떠오르는 방식을 씀(예전엔 모바일만 모든
   설정 구역이 캔버스 아래 항상 펼쳐져 있어서 세로 공간을 많이 차지했음) - 그래서 이 규칙들은
   모바일/웹 공통 기본값이고, 데스크톱 전용 배치(옆에 떠 있는 레일 등)만 아래 min-width:769px에서
   추가로 덮어씀 */
.pw_draw_bottombar {
	position:relative; display:flex; flex-wrap:wrap; align-items:center;
	justify-content:center; gap:8px 10px; margin-bottom:8px;
}
.pw_draw_zoom_row, .pw_draw_undo_row { flex:0 1 auto; }
.pw_draw_icon_toolbar {
	display:flex; gap:10px; justify-content:center; margin:0;
	flex:1 0 100%; order:3; /* 항상 손/실행취소 줄 아래 새 줄로 내려가도록 */
}
.pw_tool_icon_btn {
	position:relative; width:38px; height:38px; border-radius:50%; border:1.5px solid #dee2e6; background:#f8f9fa;
	cursor:pointer; display:flex; align-items:center; justify-content:center; color:#495057; font-size:14px; padding:0;
}
.pw_tool_icon_btn:hover { background:#eef2f6; }
.pw_tool_icon_btn.pw_tool_icon_open { background:#007bff; border-color:#007bff; color:#fff; }
/* [신규] 지금 켜져 있는 도구(펜/채우기/지우개)를 설정 패널이 닫혀 있어도 항상 파란 테두리로 표시 -
   패널이 열려 배경까지 파랗게 채워진 상태(.pw_tool_icon_open)보다는 약하게, 테두리만 강조함 */
.pw_tool_icon_btn.pw_tool_icon_active { border-color:#007bff; border-width:2px; }
/* 패널까지 열려 있으면(배경이 이미 파란색) 테두리색은 자동으로 맞춰지므로 굳이 겹쳐 그릴 필요 없음 -
   .pw_tool_icon_open이 border-color를 이미 지정하므로 이 규칙이 뒤에 있어도 결과는 동일함 */
/* 펜 아이콘(도구줄 + 캔버스 안 빠른전환 아이콘 공용) 우측 하단에 겹쳐 보이는 작은 동그라미 -
   지금 선택된 펜 색상을 항상 그대로 보여줌 */
.pw_pen_color_dot {
	position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border-radius:50%;
	background:#333333; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,0.15); pointer-events:none;
}
.pw_tool_section { display:none; padding-top:6px; }
.pw_tool_section.active { display:block; }
/* 펜/지우개 전환은 이제 아이콘(도구줄 + 캔버스 안 빠른전환)으로 하므로, 패널 안의 옛 토글 행은
   중복이라 항상 숨김 */
.pw_tool_section_desktop_hide { display:none !important; }
/* 굵기 슬라이더 좌우 -/+ 버튼 */
.pw_size_step_btn {
	display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
	border:1px solid #dee2e6; background:#f8f9fa; color:#495057; font-size:16px; cursor:pointer; flex:none; padding:0;
}
.pw_size_step_btn:hover { background:#eef2f6; }
/* [모바일/웹 공용] 도구 설정 레이어 팝업 - 아이콘 줄 바로 위에 카드 형태로 떠오름(밀어내지 않음).
   order:99를 줘서 안의 섹션들(order 1~4)이 다 뒤섞여도 이 확인 버튼만은 항상 맨 아래에 오게 함
   (예전엔 order가 없어 기본값 0으로 다른 섹션들보다 먼저(위에) 그려지는 버그가 있었음) */
.pw_draw_tools_panel {
	position:absolute; left:0; right:0; bottom:100%; margin-bottom:6px;
	background:#fff; border-radius:12px; box-shadow:0 -8px 28px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.05);
	z-index:50; display:flex; flex-direction:column;
	max-height:0; overflow:hidden; opacity:0; pointer-events:none; padding:0 16px;
	transform:translateY(6px);
	transition:max-height .25s ease, opacity .2s ease, transform .25s ease, padding .25s ease;
}
.pw_draw_tools_panel.pw_tools_open {
	max-height:65vh; overflow-y:auto; opacity:1; pointer-events:auto; padding:10px 16px; transform:translateY(0);
}
.pw_tool_panel_confirm_btn {
	display:block; width:100%; margin:8px 0 0; padding:8px; border:none; border-radius:8px;
	background:#007bff; color:#fff; font-size:14.5px; font-weight:bold; cursor:pointer; order:99;
}
.pw_tool_panel_confirm_btn:hover { background:#0069d9; }

/* [신규] 캔버스 안(모서리) 빠른전환 아이콘 - 펜/지우개를 설정창 없이 바로 전환만 함(그림 그리다
   빠르게 도구만 바꿀 때 씀). 그리기타입/지우기 버튼과 같은 자리(모서리)에 나머지 두 모서리를 씀 */
.pw_draw_quick_tool_btn {
	position:absolute; bottom:6px; width:30px; height:30px; border-radius:50%;
	background:rgba(255,255,255,0.92); border:1px solid #dee2e6; color:#495057; cursor:pointer;
	display:flex; align-items:center; justify-content:center; font-size:13px; z-index:6;
}
.pw_draw_pen_quick_btn { left:6px; }
.pw_draw_eraser_quick_btn { right:6px; }
.pw_draw_quick_tool_btn.pw_quick_tool_active { background:#007bff; border-color:#007bff; color:#fff; }
.pw_draw_quick_tool_btn.pw_quick_tool_active .pw_pen_color_dot { border-color:#007bff; }

@media screen and (min-width:769px) {
	/* [그림판 웹 전용 - 풀블리드 레이아웃] 팝업 전체 영역을 캔버스로 쓰고, 제목/아이콘들은
	   캔버스 스크롤·확대와 무관하게 항상 같은 화면 위치에 고정되는 "레이어"로 얹음.
	   이를 위해 아이콘들을 감싸던 껍데기(그림판 팝업 안의 .pw_draw_bottombar, .pw_popup_btn_row)는
	   display:contents로 완전히 지워서(=자기 자신은 레이아웃에서 사라지고 자식만 남음)
	   그 자식들이 바로 .pw_draw_popup_box(position:relative)의 위치 기준 자식이 되게 하고,
	   각 아이콘/그룹을 position:absolute로 원하는 자리에 고정함. 모바일은 이 media query
	   밖이라 지금까지처럼 세로로 쌓인 일반 레이아웃 그대로 유지됨 */
	.pw_draw_popup_box {
		max-width:900px; width:92vw; height:85vh; max-height:85vh;
		padding:0; overflow:hidden; display:flex; flex-direction:column; position:relative;
	}
	.pw_draw_popup_box > h3 {
		flex:none; margin:0; padding:14px 54px; border-bottom:1px solid #eee;
		background:#fff; position:relative; z-index:8;
	}

	/* 캔버스 영역이 헤더 아래 남은 공간을 전부 채움(풀블리드) - 정사각형 고정비율을 버리고
	   실제로 남는 만큼 가로/세로를 채우도록 함. [손바닥(화면이동) 도구가 세로로는 안 움직이던 버그
	   수정] flex 컨테이너 안의 세로축 아이템은 기본 min-height가 'auto'라서, 안에 든 캔버스가 크면
	   그 콘텐츠 크기만큼 자기 자신도 키(높이)를 늘려버려 정작 세로 스크롤이 생길 여지가 없어짐(가로는
	   flex의 교차축이라 이 문제가 없어서 가로 이동만 되던 것) - min-height:0으로 그 기본값을 없애서
	   항상 flex가 배정한 높이만큼만 차지하고, 넘치는 부분은 안쪽 .pw_draw_canvas_scroll이 스크롤로
	   처리하게 함 */
	.pw_draw_canvas_wrap {
		width:100%; height:auto; flex:1 1 auto; min-height:0; aspect-ratio:auto; margin:0; max-width:none;
	}
	.pw_draw_canvas_scroll { border-radius:0; border-width:0; }
	.pw_draw_shape_btn { display:none; }

	/* 좌측 아이콘 레일 위쪽 시작점(캔버스 wrap 기준) - 이 아래 세 그룹(이동/펜·지우개·캔버스/
	   템플릿·저장)이 이 값을 기준으로 순서대로 쌓임 */
	.pw_draw_clear_btn {
		top:auto; right:auto; bottom:18px; left:16px; width:40px; height:40px; border-radius:10px;
		background:#222; border-color:#222; color:#fff; font-size:16px; z-index:6;
	}

	/* 아이콘 줄들을 감싸던 껍데기 두 개를 레이아웃에서 지워서, 자식들이 팝업 박스 기준으로
	   자유롭게 절대 위치를 잡을 수 있게 함 */
	.pw_draw_popup_box .pw_draw_bottombar, .pw_draw_popup_box .pw_popup_btn_row { display:contents; }
	.pw_btn_label { display:none; }

	/* 왼쪽 위: 손(이동) + 확대/축소 */
	.pw_draw_zoom_row {
		position:absolute; left:16px; top:70px; z-index:6;
		flex-direction:column; width:auto; max-width:none; margin:0; gap:8px;
	}
	.pw_draw_zoom_label { display:none; }

	/* 그 아래: 펜 / 채우기 / 지우개 / 캔버스 / 그리기 타입 아이콘(5개로 늘어남) */
	.pw_draw_icon_toolbar {
		position:absolute; left:16px; top:206px; z-index:6;
		display:flex; flex-direction:column; gap:8px; margin:0;
	}

	/* 그 아래: 템플릿 추가 / 저장(붙이기) - 모바일의 가로 꽉 채움 텍스트 버튼 대신 원형 아이콘 버튼으로.
	   아이콘 줄이 5개(펜/채우기/지우개/캔버스/그리기 타입)로 늘어난 만큼 시작 위치를 아래로 내려서 겹치지 않게 함 */
	.pw_draw_add_template_btn {
		position:absolute; left:16px; top:452px; z-index:6;
		width:38px; height:38px; padding:0; margin:0; border-radius:50%;
		display:flex; align-items:center; justify-content:center; font-size:15px; gap:0;
	}
	#pw_draw_confirm {
		position:absolute; left:16px; top:498px; z-index:6;
		width:38px; height:38px; min-width:0; padding:0; margin:0; border-radius:50%; flex:none;
		display:flex; align-items:center; justify-content:center; font-size:15px;
	}

	/* 하단 중앙: 실행취소 / 다시실행 */
	.pw_draw_undo_row {
		position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:6;
		width:auto; max-width:none; margin:0; gap:8px;
	}
	.pw_draw_undo_btn { flex:none; width:38px; height:38px; border-radius:50%; padding:0; justify-content:center; }

	/* 헤더 오른쪽 위: 닫기(취소) - 작은 × 아이콘으로, 모달 닫기 관례대로 배치 */
	#pw_draw_cancel {
		position:absolute; top:10px; right:14px; z-index:10;
		width:34px; height:34px; min-width:0; padding:0; margin:0; border-radius:50%; flex:none;
		display:flex; align-items:center; justify-content:center; font-size:14px;
		background:#f1f3f5; color:#495057;
	}

	/* [웹 전용 - 도구 설정 레이어 팝업] 이전에는 하단 바 기준으로 위쪽에 떠올랐지만, 하단 바가
	   display:contents로 사라졌으므로 이제 팝업 박스 기준으로 좌측 아이콘 열 옆(오른쪽)에 뜨도록
	   바꿈. 펜/지우개/캔버스 아이콘을 누르면 그 옆에서 살짝 나타났다 사라지는 느낌만 주면 되므로
	   레이아웃을 흔드는 max-height 애니메이션 대신 opacity/transform으로만 전환함 */
	.pw_draw_tools_panel {
		position:absolute; left:66px; top:206px; right:auto; bottom:auto; margin:0;
		width:300px; max-width:min(320px, 55vw); max-height:calc(85vh - 250px); overflow-y:auto;
		background:#fff; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.05);
		z-index:50; display:flex; flex-direction:column;
		opacity:0; pointer-events:none; visibility:hidden; padding:16px 18px;
		transform:translateX(-8px);
		transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.pw_draw_tools_panel.pw_tools_open {
		opacity:1; pointer-events:auto; visibility:visible; transform:translateX(0);
		transition:opacity .2s ease, transform .2s ease, visibility 0s;
	}
	/* 섹션 표시(display:none/.active) + 굵기 -/+ 버튼 + 확인 버튼(order:99) 스타일은 이제 base
	   규칙(모바일/웹 공통)에 있음 - 여기서는 order로 섹션들의 웹 전용 배치 순서만 정함 */
	#pw_tool_section_width { order:1; }
	#pw_tool_section_shape { order:2; }
	#pw_tool_section_color { order:3; }
	#pw_tool_section_opacity { order:4; }
	#pw_tool_section_size { order:1; }

	/* 현재 색상/배경색 스와치 - "사각 박스로 조금 더 크게" 요청에 따라 웹에서는 둥근 스와치 대신
	   더 큰 사각형으로 표시 */
	.pw_current_color_btn { border-radius:8px; width:50px; height:50px; }
	.pw_current_color_dot { border-radius:6px; }

	/* 그리기 타입 토글 4개(자유/직선/사각형/동그라미)가 좁은 패널 폭에서도 한 줄에 들어가도록 살짝 축소 */
	#pw_draw_shapetype_row .pw_toggle_opt { font-size:13px; padding:8px 4px; }

	/* 캔버스 안(모서리) 펜/지우개 빠른전환 아이콘은 모바일 전용 - 데스크톱은 이미 왼쪽 레일에
	   항상 보이는 펜/지우개 아이콘이 있어서 중복이므로 숨김 */
	.pw_draw_pen_quick_btn, .pw_draw_eraser_quick_btn { display:none; }
}

/* =====================================================================
   [아이템샵] 다른 회원이 만든 꾸미기 아이템(포토프레임/오브젝트)을 포인트로 사고파는 기능.
   기존 팝업(.pw_popup_overlay/.pw_popup_box)/토글(.pw_toggle_row)/템플릿 목록(.pw_template_item)
   스타일을 그대로 재사용하고, 아이템샵 전용 요소만 아래에 추가함
   ===================================================================== */
.pw_shop_popup_box { max-width:480px; }

.pw_shop_top_row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.pw_shop_cat_row { margin-bottom:0; flex:1; min-width:180px; }
.pw_shop_point_row { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:bold; color:#8a7550; white-space:nowrap; }
/* [내 포인트 클릭] 포인트 표시를 누르면 적립/차감 기준 안내 팝업(사이트 전역, tail.sub.php에
   렌더링됨)이 열림을 알려주는 커서. 팝업 자체 스타일은 tail.sub.php 안에 자체 포함되어 있음
   (이 페이지의 style.css가 로드되지 않는 다른 페이지에서도 떠야 하므로) */
.pw_shop_point_display { cursor:pointer; }
.pw_shop_point_display:hover { text-decoration:underline; }
/* [정산/내 구매목록 버튼] 기본은 노란 테두리(#d9c9a3)로 내부를 채운 스타일(아이콘 흰색) */
.pw_shop_point_row button {
	background:#d9c9a3; border:1.5px solid #d9c9a3; border-radius:50%; width:26px; height:26px;
	color:#fff; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:12px;
}
.pw_shop_point_row button:hover { background:#c9b385; border-color:#c9b385; }
/* [정산 버튼만] 흰 배경 + 테두리(라인)만 있는 스타일로 되돌림(내 구매목록 버튼은 채운 스타일 유지) */
#pw_shop_settlement_btn { background:#fff; color:#8a7550; }
#pw_shop_settlement_btn:hover { background:#fbf6ea; color:#8a7550; }

.pw_shop_section_label {
	font-size:13px; font-weight:bold; color:#8a7550; margin:12px 0 6px; display:flex; align-items:center; gap:5px;
}
.pw_shop_section_label:first-child { margin-top:2px; }
.pw_shop_section_label i { font-size:12px; color:#e8590c; }
/* [더보기 검색] '전체 아이템' 라벨 행만 오른쪽 끝에 돋보기 아이콘을 넣어야 해서 양끝 정렬로 확장 */
.pw_shop_section_label_search { justify-content:space-between; }
.pw_shop_search_icon_btn {
	background:none; border:none; color:#8a7550; font-size:14px; cursor:pointer; padding:2px 4px;
}
.pw_shop_search_icon_btn:hover { color:#c9b385; }

/* [아이템 검색 팝업] 등록자 아이디/아이템명 입력 필드 - 다른 팝업 입력 필드와 통일된 스타일 */
.pw_shop_search_field {
	width:100%; border:1px solid #ddd; border-radius:6px; padding:10px 12px; font-size:14px;
	box-sizing:border-box; margin-bottom:10px;
}
/* [검색 결과 화면] 하단 버튼이 '검색 초기화'로 바뀌었을 때, 평소 '처음으로'와 구분되게 강조색 부여 */
.pw_shop_more_btn.pw_shop_search_active { background:#e8590c; color:#fff; border-color:#e8590c; }
/* [아이템 검색 팝업] 닫기/검색 버튼 - 다른 팝업들과 동일하게 중앙정렬 + 폭 확대 */
#pw_shop_search_btn_row { display:flex; justify-content:center; gap:10px; }
#pw_shop_search_btn_row .pw_popup_cancel,
#pw_shop_search_btn_row .pw_popup_confirm { flex:none; min-width:130px; padding:12px 10px; }

.pw_shop_grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:4px; }
/* [버그 수정] 오브젝트 이름이 길면 아이템 카드(grid item이자 flex 컨테이너)의 기본 최소너비가
   글자 길이만큼 늘어나서 4칸 그리드 폭 배분이 깨지는 문제(grid/flex item의 기본 min-width:auto
   때문에 white-space:nowrap 글자가 줄어들지 않고 칸을 밀어냄) - min-width:0으로 항상 칸 너비에
   맞춰 줄어들게 하고, 그 안의 제목(.pw_shop_item_title)은 그 줄어든 폭 안에서 말줄임(...)됨 */
.pw_shop_item {
	border:1.5px solid #e9ecef; border-radius:12px; padding:6px; display:flex; flex-direction:column; gap:4px; background:#fff;
	min-width:0;
}
/* [수정] 아이템 박스 이미지를 썸네일 배경으로 깔면 등록된 오브젝트/프레임이 가려 보이지 않는다는
   피드백에 따라 배경 적용을 제거함(JS pwRenderShopGrid에서도 background-image 지정 코드 제거).
   대신 아이템 그림이 카드 안에서 최대한 크고 선명하게 보이도록 배경은 단순 카드색으로, 이미지 비율은 키움 */
.pw_shop_item_thumb {
	aspect-ratio:1; border-radius:8px; background-color:#f8f3e6; display:flex; align-items:center; justify-content:center;
	overflow:hidden; cursor:pointer; /* 클릭하면 원본 크기로 크게 보여줌(#pw_shop_item_lightbox) */
}
.pw_shop_item_thumb img { width:82%; height:82%; object-fit:contain; }
.pw_shop_item_title { font-size:12px; font-weight:bold; color:#333; line-height:1.3; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pw_shop_item_seller { font-size:11px; color:#adb5bd; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pw_shop_buy_btn {
	background:#f0c374; border:1.5px solid #f0c374; border-radius:16px; color:#fff; font-size:12px; font-weight:bold;
	padding:6px 4px; cursor:pointer;
}
.pw_shop_buy_btn:hover { background:#e8b75e; }
.pw_shop_buy_btn:disabled { background:#f1f3f5; border-color:#e9ecef; color:#adb5bd; cursor:not-allowed; }

.pw_shop_empty { text-align:center; color:#adb5bd; font-size:13px; padding:24px 0; }

/* [더보기/전체 페이징] 인기+최신(4+4=8개, 2줄)까지만 기본으로 보여주고, 그 아래 나머지 전체
   아이템은 '더보기'를 눌러야 보이게 함 - 모바일 화면에서 4열 그리드가 여러 줄 이어지면 화면
   아래로 너무 길어져 스크롤 부담이 커지므로, 항목 수를 화면 안에서 감당 가능한 만큼만 기본 노출 */
#pw_shop_rest_view { display:none; }
.pw_shop_pager { display:flex; align-items:center; justify-content:center; gap:14px; margin:10px 0 4px; }
.pw_shop_pager_btn {
	background:#fff; border:1.5px solid #d9c9a3; border-radius:50%; width:30px; height:30px;
	color:#8a7550; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:13px;
}
.pw_shop_pager_btn:hover { background:#fbf6ea; }
.pw_shop_pager_btn:disabled { opacity:0.35; cursor:not-allowed; }
#pw_shop_rest_page_label { font-size:12.5px; font-weight:bold; color:#8a7550; min-width:52px; text-align:center; }

/* 하단 닫기+더보기 버튼을 한 줄에 나란히 */
.pw_shop_bottom_row { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.pw_shop_more_btn {
	display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:none; width:auto; min-width:130px;
	padding:12px 26px; font-size:15.5px; border-radius:20px; border:1.5px solid #f0c374;
	background:#fff; color:#8a7550; font-weight:bold; cursor:pointer; box-sizing:border-box;
}
.pw_shop_more_btn:hover { background:#fbf6ea; }
.pw_shop_more_btn.pw_shop_more_active { background:#f0c374; color:#fff; }

.pw_shop_settlement_total { text-align:center; font-size:32px; font-weight:bold; color:#8a7550; margin:10px 0 16px; }
.pw_shop_settlement_total::after { content:'P'; font-size:16px; margin-left:2px; color:#c9b48a; }

/* '구매 아이템' 보관함 - 기존 .pw_template_item 목록 스타일 재사용 + 잔여횟수 배지만 추가 */
.pw_shop_remain_badge {
	font-size:12px; font-weight:bold; color:#5c9ded; background:#eaf2ff; border-radius:12px; padding:3px 9px;
}
.pw_shop_remain_badge.low { color:#c0392b; background:#fdeceb; }

/* 판매 신청 팝업 */
.pw_shop_sell_preview { display:flex; justify-content:center; margin-bottom:10px; }
.pw_shop_sell_preview img {
	width:96px; height:96px; object-fit:contain; border-radius:10px; background:#f8f3e6; padding:8px; box-sizing:border-box;
}
.pw_shop_sell_price_val { text-align:center; font-size:14px; font-weight:bold; color:#8a7550; margin:2px 0 10px; }
.pw_shop_sell_warning { background:#fdeceb; color:#c0392b; font-size:12.5px; line-height:1.5; border-radius:8px; padding:8px 10px; margin-bottom:10px; text-align:center; }
.pw_shop_replace_label { font-size:12.5px; color:#555; flex:1; }

#pw_shop_sell_title { margin-bottom:10px; }

/* [아이템샵 팝업 닫기 버튼] 다른 팝업들(#pw_draw_shape_close 등)과 동일한 패턴으로
   중앙정렬 + 확대. 기본 .pw_popup_cancel(폭100%, 왼쪽정렬)을 이 id로 덮어씀 */
.pw_shop_bottom_row #pw_shop_close {
	display:inline-flex; align-items:center; justify-content:center; flex:none; width:auto; min-width:130px; margin:0;
	padding:12px 26px; font-size:15.5px;
}
/* [모바일에서 두 줄로 떨어지는 문제] 화면이 좁은 기기에서는 '닫기'+'더보기' 두 버튼의 최소 너비
   합이 팝업 폭보다 커져서 줄바꿈되므로, 버튼 가로 폭을 기존(130px)보다 10% 줄임(117px) */
@media (max-width:480px) {
	.pw_shop_bottom_row .pw_shop_more_btn,
	.pw_shop_bottom_row #pw_shop_close {
		min-width:117px;
	}
}

/* [검색창 옆 아이템 박스 트리거] 검색 인풋과 같은 줄, 그 바로 앞에 독립된 알약(pill) 모양
   박스로 배치(검색 인풋과 비슷한 높이/테두리 톤을 맞춰 한 세트처럼 보이게 함).
   이미지는 항상 위아래로 살살 흔들리고(.pw_shop_trigger_imgwrap의 애니메이션), 마우스를 올리면
   그 안의 이미지 자체가 커짐(hover-scale) - 두 transform을 서로 다른 요소에 나눠서 충돌을 피함 */
.pw_shop_search_trigger {
	display:inline-flex; align-items:center; gap:6px; cursor:pointer; flex:none;
	position:relative; z-index:1; border:1.5px solid #dee2e6; border-radius:20px;
	background:#fff; padding:6px 14px 6px 8px; box-sizing:border-box;
}
.pw_shop_search_trigger:hover { border-color:#f0c374; }
.pw_shop_trigger_imgwrap {
	display:inline-flex; flex:none; animation:pwShopFloatBob 2.4s ease-in-out infinite;
}
.pw_shop_search_trigger img {
	width:26px; height:26px; object-fit:contain; transition:transform 0.15s ease; flex:none;
}
.pw_shop_search_trigger:hover img { transform:scale(3.2); }
.pw_shop_search_trigger span {
	font-size:13.5px; font-weight:bold; color:#8a7550; white-space:nowrap;
}

/* [퀵메뉴 위 둥실거리는 아이템 박스 아이콘] .pw_quickmenu_wrap(position:absolute) 내부에
   함께 두어 세그먼트가 바뀌어도(새 메모리 생성 등) 항상 같은 위치에서 위아래로 살살 움직임.
   확대는 안쪽 img에만 걸어서(바깥 button의 bob 애니메이션과 같은 transform을 두고 다투지 않게) 둠 */
.pw_shop_float_btn {
	position:absolute; bottom:100%; left:0; margin-bottom:10px;
	width:38px; height:38px; padding:0; border:none; background:transparent; cursor:pointer;
	z-index:1000000; animation:pwShopFloatBob 2.4s ease-in-out infinite;
}
.pw_shop_float_btn img {
	width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25));
	transition:transform 0.15s ease;
}
.pw_shop_float_btn:hover img { transform:scale(1.35); }
@keyframes pwShopFloatBob {
	0%, 100% { transform:translateY(0); }
	50% { transform:translateY(-7px); }
}

/* 2026-08-22 screenshot-tuned final cascade: soft pet-memory identity */
#pet_wall_wrap { color:#303832; }
.pw_top_tabs { gap:10px !important; margin-bottom:18px !important; }
.pw_tab_btn {
	min-height:76px !important; padding:12px 10px !important;
	border:1px solid #e3e7e5 !important; border-radius:12px !important;
	background:#fafbfa !important; color:#5d6761 !important;
	box-shadow:none !important; transform:none !important;
}
.pw_tab_btn i {
	background:#f0f2f6 !important; color:#78849a !important;
}
.pw_tab_btn:hover {
	background:#f5f3f8 !important; border-color:#ddd6e6 !important;
	color:#756983 !important; transform:translateY(-1px) !important;
}
.pw_tab_btn:hover i {
	background:#fff !important; color:#756983 !important;
}
.pw_tab_btn.active,
.pw_tab_btn.active:hover {
	background:#efedf4 !important; border-color:#d8d1e2 !important;
	color:#6d627a !important; box-shadow:inset 0 0 0 1px rgba(117,105,131,.04) !important;
}
.pw_tab_btn.active i,
.pw_tab_btn.active:hover i {
	background:#fff !important; color:#6d627a !important;
}
.pw_dir_search_btn,
.pc_side_write_btn,
#pw_comment_submit,
.apply_setting_btn,
.friend_manage_apply_btn,
.friend_manage_search_btn,
.friend_detail_memo_btn {
	display:inline-flex !important; align-items:center !important; justify-content:center !important;
	gap:7px !important; line-height:1.2 !important; text-align:center !important;
	background:#667f91 !important; border-color:#667f91 !important; color:#fff !important;
	border-radius:10px !important; box-shadow:0 5px 14px rgba(102,127,145,.15) !important;
}
.pw_dir_search_btn:hover,
.pc_side_write_btn:hover,
#pw_comment_submit:hover,
.apply_setting_btn:hover,
.friend_manage_apply_btn:hover,
.friend_manage_search_btn:hover,
.friend_detail_memo_btn:hover {
	background:#586f80 !important; border-color:#586f80 !important;
	color:#fff !important; transform:translateY(-1px);
}
.pw_dir_search_btn i, .pc_side_write_btn i { margin:0 !important; line-height:1 !important; }
.pw_dir_search_input {
	height:42px !important; border:1px solid #dfe4e1 !important;
	border-radius:10px !important; background:#fff !important;
}
.pw_dir_search_input:focus {
	border-color:#9eafb9 !important; box-shadow:0 0 0 3px rgba(102,127,145,.09) !important;
}
.pw_shop_search_trigger {
	height:42px; border:1px solid #e3ded2 !important; border-radius:21px !important;
	background:#fbfaf7 !important;
}
.pw_shop_search_trigger:hover { border-color:#d9cbae !important; background:#f8f5ee !important; }
.pw_shop_search_trigger span { color:#827354 !important; }
.pw_dir_card,
.pc_side_card {
	border:1px solid #e4e8e6 !important; border-radius:14px !important;
	background:#fff !important; box-shadow:0 4px 14px rgba(46,61,54,.055) !important;
}
.pw_dir_card:hover {
	border-color:#d7ded9 !important; background:#fbfcfb !important;
	box-shadow:0 7px 18px rgba(46,61,54,.075) !important;
	transform:translateY(-1px) !important;
}
.pw_dir_card_me {
	border-color:#decda9 !important; box-shadow:0 4px 14px rgba(130,105,63,.08) !important;
}
.pc_side_card { border-radius:13px !important; }
.pw_notice_box {
	background:#f4f6fa !important; border:1px solid #dce3ef !important;
	color:#56677d !important; border-radius:12px !important;
}
.pc_setting_cog {
	background:#fff !important; border:1px solid #dfe4e1 !important;
	color:#6a756e !important; box-shadow:0 3px 9px rgba(46,61,54,.08) !important;
}
.pc_setting_cog:hover { background:#f4f6f5 !important; color:#536159 !important; }

/* 2026-08 펫 메모리 쿨톤 리뉴얼: 답답한 황토·노랑 계열을 맑은 청록·블루그레이로 교체 */
.pw_header_title i { color:#4f8792; }
.pw_segment_label,
.pw_seg_title_text { color:#496b72; }

.pw_preserved_panel {
	background:#f5f9f9; border-color:#c7dcde;
	box-shadow:0 4px 14px rgba(63,103,112,.045);
}
.pw_preserved_title, .pw_trash_title { color:#426f78; }
.pw_preserved_view_btn {
	background:#fff; color:#426f78; border-color:#9fc4c9;
}
.pw_preserved_view_btn:hover { background:#edf6f6; }
.pw_preserved_empty { color:#688087; }
.pw_preserved_item {
	background:#fff; border-color:#cfe0e2; color:#3f5d64;
}
.pw_preserved_item:hover { background:#eef7f7; }
.pw_preserved_item_title i { color:#4f8792; }
.pw_preserved_item_date { color:#71898f; }
.pw_preserved_nav_btn { color:#426f78; border-color:#9fc4c9; }
.pw_preserved_nav_btn:hover:not(:disabled) { background:#edf6f6; }
.pw_preserved_page_num, .pw_trash_page_num {
	border-color:#bed5d8; color:#668087;
}
.pw_preserved_page_num.active, .pw_trash_page_num.active {
	background:#5f8f99; border-color:#5f8f99; color:#fff;
}

.pw_toolbar_locked_hint {
	background:#f3f8f9; border-color:#9fc7cc; color:#466f78;
}
.pw_publish_hint {
	background:#f5f9fa; border-color:#a9cbd0; color:#45656d;
}
.pw_hint_row + .pw_hint_row { border-top-color:#bfd7da; }
.pw_hint_icons i { color:#4f8792; }
.pw_hint_text strong { color:#326f7b; }
.pw_seg_info_btn {
	border-color:#5f929c; background:#f3f8f9; color:#4f8792;
}
.pw_seg_info_btn:hover { background:#e5f2f3; }

.pw_studio_actionbar {
	--pw-cream:#eef6f6;
	--pw-gold:#b9d2d5;
	--pw-brown:#49676e;
	--pw-peach:#e2f0f1;
	background:rgba(248,252,252,.98);
	border-color:#c7dcde;
	box-shadow:0 5px 16px rgba(63,103,112,.075);
}
.pw_action_group + .pw_action_group { border-color:#d4e3e4; }
.pw_action_group_label { color:#5c7c83; }
.pw_studio_actionbar #pw_btn_trash,
.pw_studio_actionbar #pw_btn_undo,
.pw_studio_actionbar #pw_btn_redo,
.pw_studio_actionbar #pw_btn_share {
	color:#4d6d74; border-color:#bdd3d6; background:#fff;
}
.pw_studio_actionbar #pw_btn_undo:disabled,
.pw_studio_actionbar #pw_btn_redo:disabled {
	color:#9baaad; background:#f1f5f5; border-color:#d8e2e3;
}
.pw_studio_actionbar .pw_studio_nav_wrap { border-color:#b9d2d5; }
.pw_studio_actionbar .pw_studio_nav_btn {
	background:#fff; color:#4d6d74;
}
.pw_studio_actionbar .pw_studio_nav_btn + .pw_studio_nav_btn { border-left-color:#b9d2d5; }
.pw_studio_actionbar .pw_studio_nav_btn i { color:#5f8f99; }
.pw_studio_actionbar .pw_studio_nav_btn:hover { background:#eef7f7; border-color:#b9d2d5; }
.pw_studio_actionbar .pw_studio_nav_btn.pw_studio_nav_active { background:#e2f0f1; color:#3f6972; }
.pw_trash_count { background:#e2eff0; color:#426f78; }

/* 작업 영역 프레임: 기존 베이지 점무늬를 밝은 아이스 블루·청록 계열로 통일 */
#pw_board_scroll {
	border-color:#bdd4d8;
	background-color:#edf5f6;
	background-image:radial-gradient(#b7d0d4 1px, transparent 1px);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 5px 18px rgba(63,103,112,.07);
}
.pw_segment { border-bottom-color:#bdd4d8; }
#pw_loading_top { color:#5f7e85; }
.pw_scroll_arrow_btn {
	border-color:#abc9cd;
	background:rgba(255,255,255,.94);
	color:#527b84;
	box-shadow:0 3px 9px rgba(63,103,112,.14);
}
.pw_scroll_arrow_btn:hover {
	background:#f7fbfb;
	border-color:#79aab1;
	color:#356b76;
}
.pw_scroll_arrow_btn.pw_scroll_arrow_disabled:hover {
	background:rgba(255,255,255,.94);
	border-color:#abc9cd;
	color:#527b84;
}