@charset "utf-8";
/* 사진 게시판 스킨 (theme/sample38/skin/board/photo) : 학원행사(j2) / 학원시설(j3) */

#ph_list, #ph_view, #ph_write {max-width:1200px; margin:0 auto; padding:60px 0 120px} /* 좌우 여백은 부모 요소에 있음 */
#ph_view, #ph_write {max-width:960px}

/* 버튼 */
.ph_btns {display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-top:20px}
.ph_btns_top {margin:0 0 20px}
.ph_btns_c {justify-content:center; margin-top:36px}
.ph_btn {display:inline-block; padding:10px 18px; border:1px solid #ddd; border-radius:4px; background-color:#fff; font-family:inherit; font-size:14px; line-height:1.4; color:#333; text-align:center; vertical-align:middle; box-sizing:border-box; cursor:pointer} /* line-height 직접 : a(목록)는 바깥 틀 1.75 를 물려받고 button(저장)은 기본값이라 크기가 달라지던 것 맞춤 */
.ph_btn:hover {background-color:#f5f5f5}
.ph_btn_dark {border-color:#222; background-color:#222; color:#fff}
.ph_btn_dark:hover {background-color:#000}
.ph_chkall {display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-size:14px; color:#555; cursor:pointer}

/* 점 3개 버튼 (선택삭제) */
.ph_more {position:relative; align-self:stretch}
.ph_more_btn {height:100%; padding:0 14px}
.ph_more_list {display:none; position:absolute; top:100%; right:0; z-index:10; min-width:110px; margin:4px 0 0; padding:4px 0; border:1px solid #ddd; border-radius:4px; background-color:#fff; list-style:none; box-shadow:0 4px 12px rgba(0,0,0,.08)}
.ph_more_list button {display:block; width:100%; padding:9px 14px; border:0; background:none; font-size:14px; color:#333; text-align:left; white-space:nowrap; cursor:pointer}
.ph_more_list button:hover {background-color:#f5f5f5}

/* 목록 : 사진 카드 (한 줄 개수·썸네일 비율 = 관리자 게시판 설정 갤러리 이미지 수 / 폭·높이 → list.skin.php 에서 --cols, --ratio 로 넘김) */
.ph_grid {display:grid; grid-template-columns:repeat(var(--cols, 4), 1fr); gap:40px 20px; margin:0; padding:0; list-style:none}
.ph_grid li {position:relative; min-width:0}
.ph_chk {position:absolute; top:10px; left:10px; z-index:2; width:18px; height:18px} /* 관리자 선택 */
.ph_grid a {display:block}
.ph_thumb {display:block; aspect-ratio:var(--ratio, 3/2); border-radius:8px; background-color:#f1f3f6; overflow:hidden}
.ph_thumb img {display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s}
.ph_grid a:hover .ph_thumb img {transform:scale(1.03)}
.ph_noimg {display:flex; align-items:center; justify-content:center; height:100%; font-size:13px; color:#aaa}
.ph_tit {display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; margin-top:14px; font-size:16px; font-weight:600; line-height:1.45; color:#111; word-break:keep-all}
.ph_grid a:hover .ph_tit {text-decoration:underline; text-underline-offset:.2em}
.ph_date {display:block; margin-top:8px; font-size:13px; color:#999}
.ph_empty {padding:100px 0; border-top:2px solid #222; border-bottom:1px solid #eee; font-size:15px; color:#999; text-align:center}

/* 보기 */
.ph_v_head {padding:0 0 20px; border-top:2px solid #222; border-bottom:1px solid #ddd}
.ph_v_head h2 {margin:24px 0 0; font-size:24px; font-weight:700; line-height:1.4; color:#111; word-break:keep-all}
.ph_v_info {display:flex; flex-wrap:wrap; gap:4px 10px; margin:10px 0 0; font-size:14px; color:#999}
.ph_v_info span + span:before {content:""; display:inline-block; width:1px; height:10px; margin-right:10px; background-color:#ddd; vertical-align:-1px} /* 사이 구분선 */
.ph_v_img {display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:30px}
.ph_v_img img {display:block; max-width:100%; height:auto; border-radius:6px}
.ph_v_con {padding:30px 0; font-size:16px; line-height:1.7; color:#333; word-break:break-all}
.ph_v_con img {max-width:100%; height:auto}
.ph_v_file {margin:20px 0 0; padding:0; list-style:none}
.ph_v_file li + li {margin-top:6px}
.ph_v_file a {font-size:14px; color:#333}
.ph_v_file a:hover {text-decoration:underline}
.ph_v_file span {color:#999}
#ph_view > .ph_btns {padding-top:24px; border-top:1px solid #ddd}
.ph_nb {margin:40px 0 0; padding:0; border-top:1px solid #222; list-style:none}
.ph_nb li {display:flex; gap:20px; padding:14px 10px; border-bottom:1px solid #eee; font-size:15px}
.ph_nb span {flex-shrink:0; width:60px; color:#888}
.ph_nb a {overflow:hidden; color:#333; text-overflow:ellipsis; white-space:nowrap}
.ph_nb a:hover {text-decoration:underline; text-underline-offset:.2em}

/* 등록 / 수정 */
#ph_write .ph_row {display:flex; align-items:flex-start; gap:16px; padding:12px 0; border-bottom:1px solid #eee}
#ph_write .ph_row:first-of-type {border-top:2px solid #222}
#ph_write .ph_row > label, #ph_write .ph_label {flex-shrink:0; width:90px; padding-top:10px; font-size:14px; font-weight:600; color:#111}
#ph_write .ph_row > .frm_input {flex:1; width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:4px; font-size:14px; box-sizing:border-box}
#ph_write .ph_field {flex:1; min-width:0}
#ph_write .ph_field textarea {width:100%; padding:12px; border:1px solid #ddd; border-radius:4px; font-size:14px; line-height:1.6; box-sizing:border-box; resize:vertical}
#ph_write .ph_check {flex:1; padding-top:10px; font-size:14px} /* 체크박스 label 은 div 로 감싸야 .ph_row > label 의 width 를 안 받음 */
#ph_write .ph_check label {display:inline-flex; align-items:center; gap:6px; cursor:pointer}
#ph_write .ph_file_item {padding-top:8px}
#ph_write .ph_file_item + .ph_file_item {margin-top:6px}
#ph_write .ph_file_del {display:block; margin-top:6px; font-size:13px; color:#777}
#ph_write .ph_help {margin:8px 0 0; font-size:12px; color:#888}

@media screen and (max-width:1024px) {
	.ph_grid {grid-template-columns:repeat(var(--cols-t, 3), 1fr)}
}

@media screen and (max-width:768px) {
	#ph_list, #ph_view, #ph_write {padding:24px 0 50px} /* 모바일 좌우 여백은 부모 요소에 있음 */
	.ph_btn {padding:9px 14px; font-size:13px}
	.ph_chkall {font-size:13px}

	.ph_grid {grid-template-columns:repeat(var(--cols-m, 2), 1fr); gap:28px 12px}
	.ph_thumb {border-radius:6px}
	.ph_tit {margin-top:10px; font-size:14px}
	.ph_date {margin-top:6px; font-size:12px}

	.ph_v_head h2 {margin-top:18px; font-size:19px}
	.ph_v_info {font-size:13px}
	.ph_v_img {gap:10px; padding-top:20px}
	.ph_v_con {padding:20px 0; font-size:15px}
	.ph_nb li {gap:12px; padding:12px 4px; font-size:14px}
	.ph_nb span {width:48px}

	#ph_write .ph_row {flex-direction:column; gap:6px}
	#ph_write .ph_row > label, #ph_write .ph_label {width:auto; padding-top:0}
}