@charset "utf-8";

/* ============================================================
   gallery_view 추가분 — 포토 슬라이드 / 관리자 버튼
   board.css 뒤에 링크해 해당 규칙만 덮어씁니다. (갤러리 보기 전용)
   ============================================================ */

/* 슬라이드 화살표 : 조작이 분명하게 보이도록 크게 */
.view_media .stage .v_nav{width:6.8rem; height:6.8rem; border-radius:1.8rem; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32); color:#fff; font-size:3.4rem; font-weight:400; line-height:1; padding-bottom:.4rem;}
.view_media .stage .v_nav:hover{background:rgba(255,255,255,.34);}
.view_media .stage .v_nav:focus-visible{outline:3px solid #fff; outline-offset:.3rem;}
.view_media .stage .v_prev{left:2.2rem;}
.view_media .stage .v_next{right:2.2rem;}
.view_media .stage .counter{font-size:1.6rem;}

/* 사진 설명 : 글자 크기는 어느 화면에서도 줄이지 않는다 */
.view_media .m_cap{display:flex; gap:1rem; align-items:baseline; margin-top:1.4rem; font-size:1.6rem; font-weight:500; line-height:1.6; letter-spacing:-.03rem; color:#8a93a0; text-wrap:pretty;}
.view_media .m_cap .no{flex-shrink:0; font-weight:800; font-variant-numeric:tabular-nums; color:var(--point);}

/* 썸네일 스트립 : 설명과 충분히 떨어뜨린다 */
.view_media .strip{margin-top:2.4rem;}

/* 하단 버튼 : 관리자 버튼이 있든 없든 '목록으로'는 항상 중앙 */
.view_foot{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.2rem;}
.view_foot .btn_list{grid-column:2;}
.view_foot .f_admin{grid-column:3; justify-self:end; display:flex; gap:.8rem;}
.view_foot .f_admin > *{display:inline-flex; align-items:center; justify-content:center; gap:.7rem; height:5.2rem; padding:0 2.2rem; border-radius:1.3rem; font-size:1.6rem; font-weight:700; letter-spacing:-.03rem; transition:transform .22s cubic-bezier(.16,1,.3,1), background-color .22s, border-color .22s, color .22s, box-shadow .22s;}
.view_foot .btn_edit,
.view_foot .btn_config{background:linear-gradient(180deg,#fff,#f2f5fa); border:1px solid rgba(20,40,80,.16); border-bottom-color:rgba(20,40,80,.26); color:#39414e; box-shadow:inset 0 1px 0 #fff, 0 1rem 2rem -1rem rgba(20,40,80,.45);}
.view_foot .btn_edit:hover,
.view_foot .btn_config:hover{transform:translateY(-.2rem); border-color:var(--point); color:var(--point); box-shadow:inset 0 1px 0 #fff, 0 1.6rem 2.8rem -1.2rem rgba(20,40,80,.5);}.view_foot .btn_del{background:linear-gradient(180deg,#fff,#fdf2f3); border:1px solid rgba(190,40,50,.24); border-bottom-color:rgba(190,40,50,.36); color:#c0353f; box-shadow:inset 0 1px 0 #fff, 0 1rem 2rem -1rem rgba(120,20,30,.4);}
.view_foot .btn_del:hover{transform:translateY(-.2rem); background:linear-gradient(180deg,#cc3d47,#b02b35); border-color:#a82530; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1.6rem 2.8rem -1.2rem rgba(120,20,30,.6);}
.view_foot .f_admin > *:active{transform:translateY(0); box-shadow:inset 0 2px 4px rgba(20,40,80,.16);}
.view_foot .f_admin > *:focus-visible{outline:3px solid var(--point); outline-offset:.3rem;}

.youtube_box {position:relative; height:0; padding-bottom:56.25%;}
.youtube_box iframe {position:absolute; width:100% !important; height:100% !important; border:0;}

	/* 반응형 ─ 1024 / 768 / 480 */
	@media (max-width:1024px){
		.view_media .stage .v_nav{width:5.6rem; height:5.6rem; font-size:2.8rem; border-radius:1.6rem;}
	}
	@media (max-width:768px){
		/* 화살표를 사진 중앙에서 하단 우측으로 내려 피사체를 가리지 않게 한다 */
		.view_media .stage .v_nav{top:auto; bottom:1.2rem; transform:none; width:4.8rem; height:4.8rem; font-size:2.6rem; border-radius:1.4rem; background:rgba(8,14,26,.5); border-color:rgba(255,255,255,.22);}
		.view_media .stage .v_prev{left:auto; right:7rem;}
		.view_media .stage .v_next{right:1.2rem;}
		.view_media .stage .counter{left:1.2rem; right:auto; bottom:1.8rem; height:3.4rem; display:grid; place-items:center; padding:0 1.2rem; border-radius:.8rem; font-size:1.45rem;}
		.view_media .strip{margin-top:1.8rem;}
		/* 하단 버튼 : 관리자 버튼 2등분 → '목록으로' 전체폭 */
		.view_foot{grid-template-columns:1fr; gap:1rem;}
		.view_foot .btn_list{grid-column:1; order:2; width:100%; justify-content:center;}
		.view_foot .f_admin{grid-column:1; order:1; justify-self:stretch; display:grid; grid-template-columns:1fr 1fr; gap:.8rem;}
		.view_foot .f_admin > *{width:100%; height:5rem; padding:0 1.4rem; font-size:1.55rem;}
	}
	@media (max-width:480px){
		.view_media .stage .v_nav{width:4.6rem; height:4.6rem; font-size:2.4rem; bottom:1rem;}
		.view_media .stage .v_prev{right:6.4rem;}
		.view_media .stage .v_next{right:1rem;}
		.view_media .stage .counter{left:1rem; bottom:1.5rem; height:3.2rem; padding:0 1.1rem; font-size:1.4rem;}
		.view_media .m_cap{gap:.8rem;}
	}