@charset "utf-8";

/* ============================================================
   울산광역시 열린시장실 — board.css (갤러리 목록 / 페이징 / 상세보기 / 공유)
   ============================================================ */

/* ==========================================================================
   갤러리 v4 전용   [sub_v4.css]
   ========================================================================== */


/* gallery_list - 시작 */
.gallery_list{display:grid; grid-template-columns:repeat(3,1fr); gap:5.6rem 4rem; margin-top:3.6rem;}
.gallery_list .g_item{min-width:0;}
.gallery_list .g_item > a{display:flex; flex-direction:column; gap:2rem; min-width:0;}
.gallery_list .thumb{overflow:hidden; position:relative; display:block; aspect-ratio:16/10; border-radius:.6rem; background:#e7ebf2; border:1px solid rgba(20,30,50,.09); box-shadow:0 1.4rem 2.8rem -2.4rem rgba(20,30,50,.45); transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s;}
.gallery_list .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.gallery_list .thumb::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(6,11,22,.26) 0%,rgba(6,11,22,0) 34%,rgba(6,11,22,.42) 100%);}
.gallery_list .g_item > a:hover .thumb{transform:translateY(-.4rem); box-shadow:0 2.4rem 4rem -2.4rem rgba(20,30,50,.42);}
.gallery_list .g_item > a:hover .thumb img{transform:scale(1.05);}
.gallery_list .num{position:absolute; right:1.4rem; bottom:1.4rem; z-index:2; padding:.5rem 1.1rem; border-radius:.7rem; background:rgba(8,14,26,.66); color:#fff; font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums;}
.gallery_list .cap{display:flex; flex-direction:column; gap:.9rem; padding-left:.2rem;}
.gallery_list .c_tit{overflow:hidden; display:block; white-space:nowrap; text-overflow:ellipsis; font-size:2rem; font-weight:700; letter-spacing:-.05rem; line-height:1.4; color:var(--ink); transition:color .2s;}
.gallery_list .g_item > a:hover .c_tit{color:var(--point);}
.gallery_list .c_meta{display:flex; align-items:center; gap:1rem; font-size:1.4rem; font-weight:500; color:#8a93a0;}
.gallery_list .c_meta .date{font-variant-numeric:tabular-nums;}
.gallery_list .c_meta .dot{width:.3rem; height:.3rem; border-radius:50%; background:#ccd4e0;}

	/* 반응형 : 웹접근성 — 글자는 줄이지 않고 열 수를 먼저 줄인다. 간격은 사진 크기에 비례해 축소 */
	@media (max-width:1280px){ .gallery_list{gap:4.4rem 2.8rem;} .gallery_list .g_item > a{gap:1.8rem;} .gallery_list .c_tit{font-size:1.9rem;} }
	@media (max-width:1100px){ .gallery_list{grid-template-columns:repeat(2,1fr); gap:4rem 2.6rem; margin-top:3rem;} .gallery_list .g_item > a{gap:1.7rem;} .gallery_list .cap{gap:.8rem;} .gallery_list .c_tit{font-size:2rem;} }
	@media (max-width:768px){ .gallery_list{gap:3.4rem 2rem; margin-top:2.4rem;} .gallery_list .g_item > a{gap:1.4rem;} .gallery_list .cap{gap:.7rem;} .gallery_list .thumb{border-radius:.6rem;} .gallery_list .c_tit{font-size:1.9rem;} .gallery_list .c_meta{font-size:1.5rem; gap:.9rem;} }
	@media (max-width:600px){ .gallery_list{grid-template-columns:1fr; gap:2.8rem; margin-top:2.2rem;} .gallery_list .g_item > a{gap:1.3rem;} .gallery_list .cap{gap:.6rem;} .gallery_list .thumb{aspect-ratio:16/9; border-radius:.6rem;} .gallery_list .c_tit{font-size:2rem;} .gallery_list .c_meta{font-size:1.55rem; gap:.8rem;} }
	@media (max-width:380px){ .gallery_list{gap:2.4rem;} .gallery_list .g_item > a{gap:1.2rem;} .gallery_list .c_tit{font-size:1.9rem;} }
/* gallery_list - 끝 */


/* paging - 시작 */
.paging{display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:7rem;}
.paging .p_nums{display:flex; align-items:center; gap:.4rem;}
/* 유틸 UI는 소프트 라운드 사각으로 통일 — 필(둥근박스)은 서브 상단 경로선택에만 남긴다 */
.paging .p_num{display:grid; place-items:center; min-width:4rem; height:4rem; padding:0 .8rem; border-radius:1.1rem; font-size:1.55rem; font-weight:600; color:#5c6472; font-variant-numeric:tabular-nums; transition:background-color .22s, color .22s, box-shadow .22s;}
.paging .p_num:hover{background:rgba(255,255,255,.7); color:var(--point); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);}
.paging .p_num.is_on{background:linear-gradient(180deg,rgba(50,120,205,.96),rgba(22,78,151,.96)); color:#fff; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1rem 2rem -1rem rgba(26,95,180,.7);}
.paging .p_dots{padding:0 .5rem; color:#a9b6c8; font-size:1.4rem; letter-spacing:.12rem;}
.paging .p_arw{display:grid; place-items:center; width:4rem; height:4rem; border-radius:1.1rem; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1.2rem 2.6rem -2rem rgba(20,40,80,.32); color:#5c6472; transition:background-color .22s, color .22s, transform .22s;}
.paging .p_arw svg{width:2rem; height:2rem; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;}
.paging .p_arw:hover{background:rgba(255,255,255,.92); color:var(--point); transform:translateY(-.2rem);}
	/* 반응형 : 터치 타깃 4.4rem(44px) 이상 유지하되 목록과의 상단 여백은 단계적으로 축소 */
	@media (max-width:1280px){ .paging{margin-top:6rem;} }
	@media (max-width:1100px){ .paging{margin-top:5.4rem;} }
	@media (max-width:768px){ .paging{margin-top:4.4rem;} }
	@media (max-width:600px){ .paging{margin-top:3.6rem; gap:.5rem;} }
	@media (max-width:480px){ .paging{margin-top:3.2rem; gap:.4rem;} .paging .p_num{min-width:4.4rem; height:4.4rem; font-size:1.6rem; border-radius:1rem;} .paging .p_arw{width:4.4rem; height:4.4rem; border-radius:1rem;} }
	@media (max-width:480px){ .paging .p_arw svg{width:2.2rem; height:2.2rem;} }
	@media (max-width:380px){ .paging{margin-top:2.8rem; gap:.2rem;} .paging .p_nums{gap:.2rem;} .paging .p_num{min-width:4.4rem; padding:0 .4rem;} }

/* ui:pagination(type="ulsan") 태그가 실제로 출력하는 클래스(pagination/active/btn)에
   위 p_num/p_arw와 동일한 디자인을 입힌다 — 태그 출력 구조 자체는 바꿀 수 없음 */
.paging .pagination{display:flex; align-items:center; gap:.4rem; margin:0; padding:0; list-style:none;}
.paging .pagination > li{display:flex;}
.paging .pagination > li > a,
.paging .pagination > li > span{display:grid; place-items:center; min-width:4rem; height:4rem; padding:0 .8rem; border-radius:1.1rem; font-size:1.55rem; font-weight:600; color:#5c6472; font-variant-numeric:tabular-nums; transition:background-color .22s, color .22s, box-shadow .22s;}
.paging .pagination > li > a:hover,
.paging .pagination > li > span:hover{background:rgba(255,255,255,.7); color:var(--point); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);}
.paging .pagination > li.active > a,
.paging .pagination > li.active > span{background:linear-gradient(180deg,rgba(50,120,205,.96),rgba(22,78,151,.96)); color:#fff; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1rem 2rem -1rem rgba(26,95,180,.7); cursor:default;}
.paging .pagination > li.disabled > a,
.paging .pagination > li.disabled > span{opacity:.4; cursor:not-allowed;}

/* 이전/다음(첫/끝 버튼은 숨김) : 원형 화살표 버튼 */
.paging .pagination > li > .btn.first,
.paging .pagination > li > .btn.last{display:none;}
.paging .pagination > li > .btn.prev,
.paging .pagination > li > .btn.next{position:relative; display:grid; place-items:center; width:4rem; height:4rem; padding:0; border-radius:1.1rem; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1.2rem 2.6rem -2rem rgba(20,40,80,.32); color:#5c6472; text-indent:-9999px; overflow:hidden; transition:background-color .22s, color .22s, transform .22s;}
.paging .pagination > li > .btn.prev:hover,
.paging .pagination > li > .btn.next:hover{background:rgba(255,255,255,.92); color:var(--point); transform:translateY(-.2rem);}
.paging .pagination > li > .btn.prev:before,
.paging .pagination > li > .btn.next:before{content:''; position:absolute; top:50%; left:50%; width:.8rem; height:.8rem; border:0; border-right:2px solid currentColor; border-bottom:2px solid currentColor;}
.paging .pagination > li > .btn.prev:before{transform:translate(-20%,-50%) rotate(135deg);}
.paging .pagination > li > .btn.next:before{transform:translate(-80%,-50%) rotate(-45deg);}
/* paging - 끝 */

/* 페이지 진입 : 본문이 아래에서 스르륵 올라온다 */
@keyframes boardIn{from{opacity:0; transform:translateY(2.4rem);} to{opacity:1; transform:none;}}
.page_in{animation:boardIn .8s cubic-bezier(.22,.61,.36,1) .12s both;}
.page_in > * + *{animation:boardIn .8s cubic-bezier(.22,.61,.36,1) both;}
.page_in > *:nth-child(2){animation-delay:.2s;}
.page_in > *:nth-child(3){animation-delay:.3s;}
.page_in > *:nth-child(4){animation-delay:.38s;}
.page_in > *:nth-child(5){animation-delay:.46s;}
.page_in > *:nth-child(n+6){animation-delay:.52s;}
@media (prefers-reduced-motion:reduce){ .page_in, .page_in > *{animation-duration:.01ms !important; animation-delay:0s !important;} }


/* ============================================================
   view (갤러리 보기) - 시작
   ============================================================ */
.view_head{padding-bottom:3.2rem; border-bottom:1px solid #dfe5ee;}
.view_head .v_tit{font-size:3.4rem; font-weight:800; letter-spacing:-.11rem; line-height:1.35; color:var(--ink); text-wrap:pretty;}
.view_head .v_meta{display:flex; align-items:center; gap:2.2rem; margin-top:1.8rem; font-size:1.6rem; font-weight:600; color:#8a93a0;}
.view_head .v_meta .dot{width:.3rem; height:.3rem; border-radius:50%; background:#ccd4e0;}
/* 항목명과 값 사이 얇은 구분선 — "작성 2026.07.24"처럼 붙어 보이는 것을 막는다 */
.view_head .v_meta > span:not(.dot){display:inline-flex; align-items:center; gap:.8rem;}
.view_head .v_meta .num{display:inline-flex; align-items:center; gap:.8rem; font-variant-numeric:tabular-nums; color:#5c6472;}
.view_head .v_meta .num::before{content:""; width:1px; height:1.1rem; background:#dbe2ec;}

/* 대표 이미지 뷰어 : 큰 프레임 + 하단 썸네일 스트립 */
.view_media{margin-top:4rem;}
.view_media .stage{overflow:hidden; position:relative; aspect-ratio:16/9; border-radius:.6rem; background:#0c1219; border:1px solid rgba(20,30,50,.08); box-shadow:0 3rem 6rem -3.4rem rgba(20,40,80,.55);}
.view_media .stage .layer{position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; will-change:opacity,transform; transition:opacity .62s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);}
.view_media .stage .counter{position:absolute; z-index:5; right:1.8rem; bottom:1.8rem; padding:.7rem 1.4rem; border-radius:1rem; background:rgba(8,14,26,.5); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); color:#fff; font-size:1.35rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02rem;}
.view_media .stage .v_nav{position:absolute; z-index:5; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:5rem; height:5rem; border-radius:1.4rem; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); color:#fff; font-size:1.9rem; line-height:1; transition:background-color .22s;}
.view_media .stage .v_nav:hover{background:rgba(255,255,255,.3);}
.view_media .stage .v_prev{left:1.8rem;}
.view_media .stage .v_next{right:1.8rem;}
/* 썸네일 스트립 : 사진 수가 많아도 가로 드래그/스와이프로 훑는다 */
.view_media .strip{display:flex; gap:1.2rem; margin-top:1.2rem; overflow-x:auto; padding-bottom:.4rem; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:none; cursor:grab;}
.view_media .strip::-webkit-scrollbar{display:none;}
.view_media .strip.is_drag{cursor:grabbing; scroll-snap-type:none;}
.view_media .strip.is_drag button{pointer-events:none;}
.view_media .strip button{overflow:hidden; position:relative; flex:0 0 calc((100% - 5 * 1.2rem) / 6); scroll-snap-align:start; aspect-ratio:16/10; border-radius:.5rem; background:#e7ebf2; border:1px solid rgba(20,30,50,.07); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;}
.view_media .strip button .ph{transform:scale(1); transition:opacity .3s, transform .45s cubic-bezier(.16,1,.3,1);}
.view_media .strip button:hover .ph{transform:scale(1.06);}
.view_media .strip button .ph{position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; transition:opacity .25s;}
.view_media .strip button::after{content:""; position:absolute; inset:0; border-radius:.5rem; box-shadow:inset 0 0 0 0 var(--point); transition:box-shadow .25s;}
.view_media .strip button:hover{transform:translateY(-.2rem); box-shadow:0 1.2rem 2.4rem -1.8rem rgba(20,40,80,.45);}
.view_media .strip button.is_on .ph{opacity:1;}
.view_media .strip button:not(.is_on) .ph{opacity:.62;}
.view_media .strip button.is_on::after{box-shadow:inset 0 0 0 3px var(--point);}

/* 본문 */
.view_body{margin-top:4rem; font-size:1.8rem; font-weight:400; line-height:1.95; letter-spacing:-.03rem; color:#39414e;}
.view_body p + p{margin-top:1.8rem;}
.view_body .lead{font-size:2rem; font-weight:600; line-height:1.75; color:#1f2a37;}

/* 본문 삽입 사진 : 일반 게시판과 공용 — 슬라이드 없이 본문 흐름에 배치 */
.view_fig{margin:3.2rem 0;}
.view_fig img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border-radius:.6rem; background:#e7ebf2; border:1px solid rgba(20,30,50,.09);}
.view_fig figcaption{margin-top:1.2rem; font-size:1.5rem; font-weight:500; line-height:1.6; letter-spacing:-.03rem; color:#8a93a0; text-wrap:pretty;}
	@media (max-width:768px){ .view_fig{margin:2.4rem 0;} .view_fig figcaption{margin-top:1rem; font-size:1.55rem;} }

/* 파일/공유 유틸 : 한 줄 컴팩트 바 — 첨부는 칩, 공유는 아이콘 버튼 */
.view_util{display:flex; align-items:center; justify-content:space-between; gap:1.2rem 2.4rem; margin-top:3.2rem; padding:1.4rem 0 0; border-top:1px solid #e3e8f0;}
.view_util .files{display:flex; align-items:center; gap:1rem; flex:1; min-width:0;}
.view_util .files .lb{flex-shrink:0; display:inline-flex; align-items:center; gap:.4rem; font-size:1.4rem; font-weight:700; letter-spacing:-.02rem; color:#9099a6;}
.view_util .files .lb .cnt{color:var(--point); font-weight:800; font-variant-numeric:tabular-nums;}
.view_util .files ul{display:flex; flex-wrap:wrap; gap:.6rem; min-width:0; max-width:100%;}
.view_util .files ul>li{min-width:0; max-width:100%;}
.file_item{display:inline-flex; align-items:center; gap:.7rem; max-width:36rem; min-width:0; height:4rem; padding:0 1.2rem; border-radius:.9rem; background:rgba(26,95,180,.05); transition:background .2s, color .2s;}
.file_item .ico{flex-shrink:0; font-size:1.4rem; font-weight:800; letter-spacing:.03rem; color:var(--point); text-transform:uppercase; opacity:.75;}
.file_item .meta{display:flex; align-items:baseline; gap:.7rem; min-width:0; flex:1 1 auto; overflow:hidden;}
.file_item .name{overflow:hidden; min-width:0; font-size:1.6rem; font-weight:600; letter-spacing:-.03rem; color:#39414e; white-space:nowrap; text-overflow:ellipsis;}
.file_item .size{flex-shrink:0; font-size:1.4rem; font-weight:500; color:#a6aeba; font-variant-numeric:tabular-nums;}
.file_item:hover{background:rgba(26,95,180,.11);}
.file_item:hover .name{color:var(--point);}

.view_util .share{display:flex; align-items:center; gap:.4rem; flex-shrink:0;}
.view_util .share button{display:inline-grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:.9rem; background:transparent; border:0; color:#8c95a3; transition:background .2s, color .2s;}
.view_util .share button svg{width:1.7rem; height:1.7rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.view_util .share button:hover{background:rgba(26,95,180,.08); color:var(--point);}

/* 이전/다음 : 게시판 표준 테이블형 2행 */
.view_nav{margin-top:4rem; border-top:1px solid #c9d2df; border-bottom:1px solid #c9d2df; background: rgb(255 255 255 / 50%);}
.view_nav .n_row{display:grid; grid-template-columns:11rem 1fr auto; align-items:center; min-height:5.4rem;}
.view_nav .n_row + .n_row{border-top:1px solid #e7ebf1;}
.view_nav .n_row .lb{display:flex; align-items:center; gap:.7rem; align-self:stretch; padding:0 1.8rem; background:#f5f7fb; border-right:1px solid #e7ebf1; font-size:1.45rem; font-weight:700; color:#5c6472;}
.view_nav .n_row .lb .arw{width:.6rem; height:.6rem; border:0; border-right:1.6px solid #8a93a0; border-bottom:1.6px solid #8a93a0;}
.view_nav .n_prev .lb .arw{transform:translateY(.14rem) rotate(-135deg);}
.view_nav .n_next .lb .arw{transform:translateY(-.14rem) rotate(45deg);}
.view_nav .n_row a{overflow:hidden; min-width:0; padding:0 1.8rem; font-size:1.6rem; font-weight:600; letter-spacing:-.04rem; color:#39414e; white-space:nowrap; text-overflow:ellipsis; transition:color .2s;}
.view_nav .n_row a:hover{color:var(--point); text-decoration:underline; text-underline-offset:.35rem;}
.view_nav .n_row .date{padding-right:1.8rem; font-size:1.4rem; font-weight:500; color:#8a93a0; font-variant-numeric:tabular-nums;}

.view_foot{display:flex; justify-content:center; margin-top:4.4rem;}
.view_foot .btn_list{display:inline-flex; align-items:center; gap:1rem; height:5.2rem; padding:0 3.2rem; border-radius:1.3rem; background:linear-gradient(180deg,rgba(50,120,205,.98),rgba(22,78,151,.98)); color:#fff; font-size:1.6rem; font-weight:700; letter-spacing:-.03rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1.6rem 3rem -1.4rem rgba(26,95,180,.7); transition:transform .22s, box-shadow .22s;}
.view_foot .btn_list:hover{transform:translateY(-.2rem); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2rem 3.6rem -1.4rem rgba(26,95,180,.75);}
/* view - 끝 */

	/* view 미디어쿼리 시작 ─ 1440 / 1280 / 1024 / 768 / 480 / 380 */
	@media (max-width:1440px){
		.view_head .v_tit{font-size:3.2rem;}
	}
	@media (max-width:1280px){
		.view_head .v_tit{font-size:3rem;}
		.view_media{margin-top:3.4rem;}
		.view_media .strip button{flex-basis:calc((100% - 5 * 1rem) / 6);}
		.view_media .strip{gap:1rem;}
		.view_body{margin-top:4.2rem; font-size:1.8rem;}
		.view_body .lead{font-size:1.95rem;}
	}
	@media (max-width:1024px){
		.view_head{padding-bottom:2.6rem;}
		.view_head .v_tit{font-size:2.7rem; letter-spacing:-.09rem;}
		.view_head .v_meta{margin-top:1.4rem;}
		.view_media .stage{border-radius:.6rem;}
		.view_media .stage .v_nav{width:4.4rem; height:4.4rem; font-size:1.7rem;}
		.view_media .stage .v_prev{left:1.2rem;}
		.view_media .stage .v_next{right:1.2rem;}
		.view_media .stage .counter{right:1.2rem; bottom:1.2rem;}
		.view_media .strip button{flex-basis:calc((100% - 3 * 1.2rem) / 4);}
		.view_util{gap:1rem 1.6rem;}
		.view_nav .n_row{grid-template-columns:9.6rem 1fr auto;}
	}
	@media (max-width:768px){
		.view_head .v_tit{font-size:2.5rem; letter-spacing:-.07rem; line-height:1.42;}
		.view_head .v_meta{gap:.9rem; font-size:1.5rem;}
		.view_media{margin-top:2.6rem;}
		.view_media .stage{aspect-ratio:4/3; border-radius:.6rem;}
		.view_media .strip{gap:.8rem; margin-top:.8rem;}
		.view_media .strip button{flex-basis:calc((100% - 2 * .8rem) / 3);}
		.view_media .strip button{border-radius:.5rem;}
		.view_media .strip button::after{border-radius:.5rem;}
		.view_body{margin-top:3.4rem; font-size:1.75rem; line-height:1.98; word-break:keep-all;}
		.view_body .lead{font-size:1.85rem; line-height:1.72;}
		.view_body p + p{margin-top:1.4rem;}
		/* 유틸 : 첨부 목록과 공유 버튼을 위아래로 분리 */
		.view_util{flex-direction:column; align-items:stretch; gap:1.4rem; margin-top:2.8rem; padding-top:1.4rem;}
		.view_util .files{align-items:flex-start; flex-direction:column; gap:.8rem;}
		.view_util .files ul{width:100%;}
		.view_util .files ul>li{width:100%;}
		.file_item{max-width:100%; width:100%; height:4.8rem;}
		.file_item .name{font-size:1.6rem;}
		.view_util .share{justify-content:flex-end;}
		/* 이전/다음 : 라벨 + 제목 한 줄 유지, 날짜는 숨겨 행 높이를 낮춘다 */
		.view_nav{margin-top:3.2rem;}
		.view_nav .n_row{grid-template-columns:8.6rem 1fr; min-height:5rem;}
		.view_nav .n_row .lb{padding:0 1.3rem; font-size:1.4rem;}
		.view_nav .n_row a{padding:0 1.3rem; font-size:1.55rem;}
		.view_nav .n_row .date{display:none;}
		.view_foot{margin-top:3.4rem;}
		.view_foot .btn_list{width:100%; justify-content:center; height:5rem; font-size:1.55rem;}
	}
	@media (max-width:480px){
		.view_head .v_tit{font-size:2.3rem;}
		.view_head .v_meta{flex-wrap:wrap; row-gap:.4rem;}
		.view_media .stage .v_nav{width:4rem; height:4rem; border-radius:1.1rem;}
		.view_media .strip button{flex-basis:calc((100% - 1.6rem) / 2.4);}
		.view_body{font-size:1.7rem;}
		.view_body .lead{font-size:1.8rem;}
	}
	@media (max-width:380px){
		.view_head .v_tit{font-size:2.2rem;}
		.view_media .strip button{flex-basis:calc((100% - .8rem) / 2);}
	}
	/* view 미디어쿼리 끝 */

/* toast - 시작 */
.toast{position:fixed; left:50%; bottom:4rem; z-index:200; transform:translate(-50%,1.2rem); padding:1.3rem 2.2rem; border-radius:1.2rem; background:rgba(12,18,26,.86); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:0 2rem 4rem -2rem rgba(0,0,0,.6); color:#fff; font-size:1.5rem; font-weight:600; letter-spacing:-.03rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s, transform .3s cubic-bezier(.16,1,.3,1);}
.toast.is_on{opacity:1; transform:translate(-50%,0);}
	@media (max-width:480px){ .toast{bottom:2.6rem; padding:1.1rem 1.8rem; font-size:1.4rem;} }
/* toast - 끝 */

/* share popover - 시작 */
.view_util .share_wrap{position:relative;}
.share_pop{position:absolute; right:0; bottom:calc(100% + .8rem); z-index:20; display:flex; flex-direction:column; min-width:16rem; padding:.6rem; border-radius:1.1rem; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.8); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:0 2rem 4rem -1.6rem rgba(15,29,74,.4); opacity:0; transform:translateY(.6rem); pointer-events:none; transition:opacity .22s, transform .28s cubic-bezier(.16,1,.3,1);}
.share_pop.is_on{opacity:1; transform:none; pointer-events:auto;}
.share_pop a{display:flex; align-items:center; padding:1rem 1.3rem; border-radius:.8rem; font-size:1.45rem; font-weight:600; letter-spacing:-.03rem; color:#3a4252; white-space:nowrap; transition:background-color .2s, color .2s;}
.share_pop a:hover{background:rgba(26,95,180,.07); color:var(--point);}
	@media (max-width:768px){ .share_pop{right:auto; left:50%; transform:translate(-50%,.6rem);} .share_pop.is_on{transform:translate(-50%,0);} }
/* share popover - 끝 */


/* board_foot : 목록 하단 페이징 + 글쓰기 버튼 - 시작 */
/* 페이징은 콘텐츠 폭 기준 정중앙 유지, 글쓰기 버튼은 우측에 배치 */
.board_foot{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; margin-top:7rem;}
.board_foot .paging{grid-column:2; margin-top:0;}
.board_foot .foot_util{grid-column:3; display:flex; justify-content:flex-end;}

.btn_write{display:inline-flex; align-items:center; justify-content:center; gap:.9rem; height:5.2rem; padding:0 2.8rem; border-radius:1.3rem; background:linear-gradient(180deg,rgba(50,120,205,.98),rgba(22,78,151,.98)); color:#fff; font-size:1.7rem; font-weight:700; letter-spacing:-.03rem; line-height:1; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1.6rem 3rem -1.4rem rgba(26,95,180,.7); transition:transform .22s, box-shadow .22s, background-color .22s;}
.btn_write svg{width:2rem; height:2rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
/* base.css의 a:hover{color:var(--point)} 를 덮어써서 흰 글씨 유지 */
a.btn_write:hover,
a.btn_write:hover span,
a.btn_write:focus-visible{color:#fff;}
.btn_write:hover{background:linear-gradient(180deg,rgba(58,131,218,.98),rgba(26,88,167,.98)); transform:translateY(-.2rem); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2rem 3.6rem -1.4rem rgba(26,95,180,.78);}
.btn_write:active{transform:translateY(0);}
.btn_write:focus-visible{outline:3px solid var(--point); outline-offset:.4rem;}

	/* 반응형 : 글자 크기는 줄이지 않고(최소 1.7rem) 배치와 여백만 바꾼다 */
	@media (max-width:1280px){ .board_foot{margin-top:6rem;} }
	@media (max-width:1100px){ .board_foot{margin-top:5.4rem;} }
	@media (max-width:900px){
		/* 좁은 폭에서는 겹침 방지 — 버튼을 페이징 아래 전체 폭으로 */
		.board_foot{grid-template-columns:1fr; gap:0; margin-top:5rem;}
		.board_foot .paging{grid-column:1;}
		.board_foot .foot_util{grid-column:1; margin-top:3.2rem;}
		.btn_write{width:100%; max-width:34rem; margin:0 auto; height:5.4rem;}
		.board_foot .foot_util{justify-content:center;}
	}
	@media (max-width:768px){ .board_foot{margin-top:4.4rem;} .board_foot .foot_util{margin-top:2.8rem;} }
	@media (max-width:600px){ .board_foot{margin-top:3.6rem;} .board_foot .foot_util{margin-top:2.4rem;} .btn_write{max-width:none; height:5.6rem; font-size:1.75rem;} }
	@media (max-width:380px){ .board_foot .foot_util{margin-top:2rem;} .btn_write{padding:0 2rem;} }

	@media (prefers-reduced-motion:reduce){ .btn_write{transition:none;} .btn_write:hover{transform:none;} }
/* board_foot : 목록 하단 페이징 + 글쓰기 버튼 - 끝 */


/* ============================================================
   브라우저 안내 문구(유튜브·IE) — gallery_view / gallery_write 공통
   ============================================================ */
.br_notice{display:flex; align-items:flex-start; gap:1.4rem; margin:0 0 3.2rem; padding:1.8rem 2.4rem; border:1px solid #d5e2f3; border-left:4px solid var(--point); border-radius:.8rem; background:#f4f8fd;}
.br_notice .bn_ico{flex:0 0 auto; width:2.2rem; height:2.2rem; margin-top:.2rem; color:var(--point);}
.br_notice .bn_ico svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;}
.br_notice .bn_txt{display:flex; flex-direction:column; gap:.5rem; min-width:0; text-wrap:pretty;}
.br_notice .bn_txt strong{font-size:1.6rem; font-weight:700; line-height:1.45; color:var(--point_dk); letter-spacing:-.02em;}
.br_notice .bn_txt span{font-size:1.5rem; line-height:1.55; color:#4b5563; letter-spacing:-.02em;}
@media (max-width:768px){
  .br_notice{gap:1.1rem; margin-bottom:2.4rem; padding:1.5rem 1.6rem;}
  .br_notice .bn_ico{width:1.9rem; height:1.9rem;}
  .br_notice .bn_txt strong{font-size:1.5rem;}
  .br_notice .bn_txt span{font-size:1.4rem;}
}