/* 리얼포토 — 라이브(www.tanggleps.com/htm/community_photo.php · /m/htm/community_photo.php)와 같은 모양 (2026-09-30)
   PC(821px↑) : 옛 skin/bbs/pc/albumdefault/gnb_bna.php(분류 탭) · subBna2.php(큰 사진) · list_ajax.php(썸네일) · css/board.css .pagenavi
   모바일(≤820): 옛 skin/bbs/mobile/albumdefault/list.php · m/css/sub.css #youtube_menu_board
   그림은 라이브 파일 그대로 ko/assets/bna/ . 움직임은 js/bna.js */

.bnv-board{--tgi-fs:off}
.bnv-root{position:relative}
.bnv-root [hidden]{display:none!important}

/* ── 분류 탭 ── */
.bnv-tabs{max-width:1288px;margin:0 auto;font-size:0;line-height:0;text-align:center}
.bnv-tabs button{display:inline-block;vertical-align:top;box-sizing:border-box;height:58px;margin:0 0 0 -1px;padding:0 46px;
  border:1px solid #f4f4f4;border-radius:0;background:#fff;font-family:'nsk-regular',sans-serif;font-size:15px;font-weight:400;line-height:15px;
  letter-spacing:normal;color:#2b2b2b;white-space:nowrap;cursor:pointer;
  transition:background-color .5s cubic-bezier(.645,.045,.355,1),color .5s cubic-bezier(.645,.045,.355,1)}
.bnv-tabs button.on{background:#ff7800;color:#fff}
@media (max-width:1500px){.bnv-tabs button{padding-left:30px;padding-right:30px}}
@media (max-width:1300px){.bnv-tabs button{padding-left:18px;padding-right:18px}}
@media (max-width:960px){.bnv-tabs button{padding-left:8px;padding-right:8px;letter-spacing:-.5px}}
html:not([lang="ko"]) .bnv-tabs button{height:auto;min-height:58px;padding-top:10px;padding-bottom:10px;white-space:normal}

/* ── 큰 사진 ── */
.bnv{position:relative;width:920px;max-width:calc(100% - 240px);margin:160px auto 40px;text-align:center;font-size:0;line-height:0}
.bnv-stage{position:relative;background:#fff}
.bnv-photo{position:relative;width:100%;height:0;overflow:hidden;background:#fff;transition:height .3s ease-out}
.bnv-wrap{position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .5s cubic-bezier(.645,.045,.355,1)}
.bnv-ph{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;opacity:0;transition:opacity .5s cubic-bezier(.215,.61,.355,1)}
.bnv-ph img{position:absolute;top:0;left:0;max-width:none;display:block}
.bnv-lock{position:absolute;top:0;left:0;z-index:10;background:rgba(25,25,25,.95) url(/ko/assets/bna/p_login_H.png) 50% 50% no-repeat;cursor:pointer}
.bnv-lock.v{background-image:url(/ko/assets/bna/p_login_V.png)}
.bnv-pn{position:absolute;top:0;z-index:11;width:120px;height:100%;padding:0;border:0;background:none;cursor:pointer}
.bnv-prev{left:-120px}.bnv-next{right:-120px}
.bnv-pn span{position:absolute;top:50%;left:50%;margin:-51px 0 0 -53px;padding:30px 25px 30px 26px;border-radius:10px;background:#333;
  transition:background-color .5s cubic-bezier(.215,.61,.355,1)}
.bnv-pn span:before{content:'';display:block;width:55px;height:42px;opacity:.5;background:url(/ko/assets/bna/previous.png) no-repeat;
  transition:opacity .5s cubic-bezier(.215,.61,.355,1)}
.bnv-next span:before{background-image:url(/ko/assets/bna/next.png)}
.bnv-pn:hover span{background:#000}.bnv-pn:hover span:before{opacity:1}
.bnv-alert{margin:0;padding:100px 0;font-family:'NanumBG',sans-serif;font-size:18px;line-height:1;letter-spacing:-.5px;color:#333;text-align:center}
.bnv-bottom{position:relative;z-index:1;width:100%;background:#fff}
.bnv-subj{position:relative;overflow:hidden;padding-top:50px}
.bnv-subj p{margin:0;opacity:0;text-align:center}
.bnv-subj.on p{opacity:1;transition:opacity .3s cubic-bezier(.645,.045,.355,1)}
.bnv-subj .t1{font-family:'nsk-medium',sans-serif;font-size:22px;font-weight:400;line-height:1;letter-spacing:-.5px;color:#333}
.bnv-subj .t2{position:relative;margin-top:10px;padding-top:10px;font-family:'nsk-regular',sans-serif;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-.5px;color:#666}
.bnv-subj .t2:before{content:'';position:absolute;top:0;left:8%;width:84%;height:1px;border-top:1px dashed #999}
.bnv-angles{position:relative;width:100%;height:30px;margin-top:10px;text-align:center;opacity:0}
.bnv-angles.on{opacity:1;transition:opacity .3s cubic-bezier(.645,.045,.355,1)}
.bnv-angles button{display:inline-block;vertical-align:top;position:relative;box-sizing:border-box;width:60px;height:30px;margin:10px 10px 0;padding:0;
  border:1px solid #ccc;border-radius:5px;background:#fff;overflow:hidden;cursor:pointer;transition:border-color .5s cubic-bezier(.645,.045,.355,1)}
.bnv-angles button span{display:block;padding:5px 0;font-family:'nsk-regular',sans-serif;font-size:18px;font-weight:400;line-height:1;letter-spacing:-.5px;color:#aaa;
  white-space:nowrap;transition:color .5s cubic-bezier(.645,.045,.355,1)}
.bnv-angles button.was{border-color:#aaa}
.bnv-angles button.on{border-color:#333;cursor:default}.bnv-angles button.on span{color:#333}
html:not([lang="ko"]) .bnv-angles button{width:auto;min-width:60px;padding:0 10px}
html:not([lang="ko"]) .bnv-angles button span{font-size:15px;padding:7px 0 6px}

/* 로그인 안내(번역 페이지 — 한국어 그림 대신 글자로) */
.bnv-lk{display:none}
html:not([lang="ko"]) .bnv-lock,html:not([lang="ko"]) .bnv-th .lock,html:not([lang="ko"]) .bnv-mc .lock{background-image:none}
html:not([lang="ko"]) .bnv-lk{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;width:84%;text-align:center;font-family:'NanumBG',sans-serif}
.bnv-lk b{display:block;font-size:18px;font-weight:400;line-height:1.4;color:#fff}
.bnv-lk i{display:block;font-size:18px;font-weight:700;font-style:normal;line-height:1.4;color:#ff6a00}
.bnv-lk u{display:inline-block;margin-top:14px;padding:8px 20px;border-radius:3px;background:#ff6a00;font-size:14px;font-weight:700;letter-spacing:2px;line-height:1;color:#fff;text-decoration:none}
.bnv-th .bnv-lk b,.bnv-th .bnv-lk i{font-size:12px;line-height:1.35}
.bnv-th .bnv-lk u{margin-top:8px;padding:5px 12px;font-size:11px}
.bnv-mc .bnv-lk b,.bnv-mc .bnv-lk i{font-size:11px;line-height:1.35}
.bnv-mc .bnv-lk u{margin-top:6px;padding:4px 10px;font-size:10px}

/* ── 썸네일 · 쪽번호 ── */
.bnv-list{max-width:1280px;margin:40px auto 0}
.bnv-thumbs{position:relative;margin:10px 0 50px;font-size:0;line-height:20px;text-align:left}
.bnv-th{display:inline-block;vertical-align:top;position:relative;width:calc((100% - 60px) / 4);margin-left:20px;background:#fff;cursor:pointer}
.bnv-th:nth-child(4n-3){margin-left:0}.bnv-th:nth-child(n+5){margin-top:40px}
.bnv-th .ph{position:relative;width:100%;height:200px;overflow:hidden;background:#fff}
.bnv-th .ph img{position:absolute;top:0;left:0;max-width:none;display:block}
.bnv-th .lock{position:absolute;top:0;left:0;z-index:10;background:rgba(25,25,25,.95) url(/ko/assets/bna/thumb_login_H.png) 50% 50% no-repeat;cursor:pointer}
.bnv-th .lock.v{background-image:url(/ko/assets/bna/thumb_login_V.png)}
.bnv-th .subj{height:40px;margin:12px 0 0;overflow:hidden;font-family:'Malgun Gothic','맑은 고딕',sans-serif;font-size:14px;font-weight:400;line-height:20px;
  color:#333;text-align:center;transition:color .5s cubic-bezier(.215,.61,.355,1)}
.bnv-th.on .subj{color:#ff6600;font-weight:700}
.bnv-line{max-width:1280px;height:2px;margin:0 auto;background:#ebebeb}
.bnv-pager{max-width:1280px;min-height:40px;margin:7px auto 0;padding:10px 0 15px;font-family:'NanumBG',sans-serif;font-size:13px;line-height:20px;color:#696969;text-align:center}
.bnv-pager span{display:inline-block;vertical-align:top;min-width:18px;max-width:45px;margin:0 6px;padding:6px 12px;border:1px solid #ddd;background:#fff;
  font-weight:700;line-height:20px;letter-spacing:-1px}
.bnv-pager a{display:inline-block;vertical-align:top;color:#737373;font-family:'Nanum','Times New Roman',Times,serif;font-size:14px;text-decoration:none;cursor:pointer}
.bnv-pager a:hover span{background:#f9f9f9;color:#6d4099;border-color:#6d4099}
.bnv-pager strong{display:inline-block;vertical-align:top}
.bnv-pager strong span{color:#6d4099;border-color:#6d4099;font-size:14px}
.bnv-pager .ic{background-repeat:no-repeat;background-position:50% 50%}
.bnv-pager .ic.first{background-image:url(/ko/assets/bna/first.gif)}
.bnv-pager .ic.prev{background-image:url(/ko/assets/bna/prev.gif)}
.bnv-pager .ic.next{background-image:url(/ko/assets/bna/next.gif)}
.bnv-pager .ic.end{background-image:url(/ko/assets/bna/end.gif)}
.bnv-pager a:hover .ic{background-color:#f9f9f9}

/* ── 모바일(≤820) — 옛 /m/ 리얼포토 ── */
.bnv-m{margin:0;padding:0;list-style:none}
.bnv-mc{position:relative;box-sizing:border-box;width:96%;margin:0 2% 5%;padding:2%;border:1px solid #ccc;border-bottom-color:#999;border-right-color:#999;
  background:#fff;font-size:0;line-height:0;text-align:left;cursor:default}
.bnv-mc.lk{cursor:pointer}
.bnv-mc .tt{overflow:hidden;margin:0 0 2%;border-bottom:1px dotted #ccc;font-size:13px;font-weight:700;line-height:30px;color:#000;text-align:center;
  white-space:nowrap;text-overflow:ellipsis}
.bnv-mc .iw{position:relative;width:100%;overflow:hidden;background:#eee}
.bnv-mc .iw .mi{position:absolute;top:0;left:0;width:100%;height:100%}
.bnv-mc .iw .mi img{position:absolute;top:50%;left:0;width:100%!important;height:auto;max-width:none;transform:translateY(-50%)}
.bnv-mc .lock{position:absolute;top:0;left:0;z-index:1;width:50%;height:100%;background:rgba(0,0,0,.8)}
.bnv-mc .lock.v{width:100%;height:50%}
.bnv-mc .lock img{position:absolute;top:50%;left:50%;width:50%;height:auto;max-width:none;transform:translate(-50%,-50%)}
html:not([lang="ko"]) .bnv-mc .lock img{display:none}
.bnv-mc .nv{margin-top:2%;text-align:center;font-size:0}
.bnv-mc .nv button{display:inline-block;width:19.5%;margin:0 1px 0 0;padding:2% 0;border:0;border-radius:0;background:#999;overflow:hidden;
  font-family:inherit;font-size:12px;line-height:12px;color:#fff;white-space:nowrap;text-overflow:ellipsis;text-align:center;cursor:pointer}
.bnv-mc .nv button.on{background:#0085d1}
.bnv-mc .ct{width:94%;margin:3% 3% 2%;font-size:11px;line-height:14px;color:#666;text-align:center}
.bnv-more{position:relative;width:100%;text-align:center;cursor:pointer;font-size:0;line-height:0}
.bnv-more img{display:inline-block;width:40%;height:auto}
.bnv-more .mo{display:inline-block;position:relative;min-width:40%;max-width:86%;padding:26px 0 30px}
.bnv-more .mo:before,.bnv-more .mo:after{content:'';position:absolute;left:50%;width:1px;background:#222}
.bnv-more .mo:before{top:0;height:24px}
.bnv-more .mo:after{bottom:0;height:28px}
.bnv-more .mo b{display:block;padding:14px 26px;border-radius:100px;background:#333;font-size:14px;font-weight:400;line-height:1.3;color:#fff}

@media (max-width:820px){
  .bnv-tabs{display:grid;grid-template-columns:24fr 24fr 28fr 24fr;gap:1px;max-width:none;margin-bottom:20px}
  .bnv-tabs button{width:auto;height:auto;min-height:0;margin:0;padding:15px 2px;border:0;background:#e6e5e5;font-size:13px;line-height:13px;
    letter-spacing:-1px;color:#666;white-space:normal}
  html:not([lang="ko"]) .bnv-tabs button{min-height:0;padding:12px 2px}
  .bnv-tabs button.on{background:#ff7800;color:#fff}
  .bnv,.bnv-pager,.bnv-line{display:none!important}
  .bnv-list{margin-top:0}
}