@charset "utf-8";

/* =====================================================
   style_custom.css  (전체 너비 640px 기준 / 양옆 여백 30px)
   체험사진 갤러리용 (앨범형 목록 + 보기)
   ===================================================== */

/* 게시물이 없습니다 표시 가운데 정렬 */
#gall_ul .empty_list {
  grid-column: 1 / -1;   
  text-align: center;   
}
/* 제출 버튼 색 */

.btn_submit {
  background-color: #ff7b24;
}
.btn_submit:hover {
  background: #fab235;
}
.filebox .btn_file {
  border: 2px solid #ff7b24;
  color: #ff7b24;
  font-weight: 600;
  border-radius: 30px;
}

/* =====================================================
   앨범형 갤러리 목록(list.skin.php) + 상단 검색
   ===================================================== */

.all_chk {
  margin: 0 30px;
}

.btn_top {
  /* right: 30px; */
  margin-right: 30px;
  z-index: 111;
}

/* 더보기(관리자/보기) 메뉴: 글자가 상자 밖으로 안 나가게 */
.more_opt li a,
.more_opt li button {
  white-space: nowrap;
  word-break: keep-all;
  padding: 10px 20px;
}
.more_opt li button {
  text-align: left;
}


/* ---------- 상단 검색 ---------- */
#bo_sch_top {
  margin: 30px 30px 0;
  padding-bottom: 14px;
  border-bottom: 3px solid #ff7b24;
}
#bo_sch_top .sch_box {
  position: relative;
  background: #fff;
  border: 2px solid #666;
  border-radius: 12px;
  overflow: hidden;
}
#bo_sch_top .sch_input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 56px 0 16px;
  border: 0;
  background: transparent;
  font-size: 20px;
  box-sizing: border-box;
}
#bo_sch_top .sch_btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  border: 0;
  background: none;
  font-size: 24px;
  color: #555;
  cursor: pointer;
}
#bo_sch_top .sch_total {
  margin: 12px 0 0;
  font-size: 18px;
  color: #333;
}
#bo_sch_top .sch_total b {
  font-weight: 700;
  color: #ff7b24;
}

/* ---------- 카드 목록 (2열, 오른쪽 열이 아래로 엇갈림) ---------- */
#bo_gall {
  --gall-ratio: 4 / 3;   /* 기본값. 실제 값은 list.skin.php 에서 게시판 썸네일 설정에 맞춰 덮어씀 */
}
#bo_gall #gall_ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 16px;
  align-items: stretch;
  margin: 24px 0 0;
  padding: 10px 30px 60px;
}
#bo_gall .gall_li {
  float: none;
  width: auto;
  padding: 0;
}
#bo_gall .gall_li:nth-child(even) {
  transform: translateY(36px);
}

/* ---------- 폴라로이드 프레임 (목록용) ---------- */
#bo_gall .gall_li_wr {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 0;
  background: #fff;
  border: 1px solid #e6e0d6;
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 8px 20px rgba(90, 47, 0, .12);
}
#bo_gall .gall_li:nth-child(4n+1) .gall_li_wr { transform: rotate(-1.8deg); }
#bo_gall .gall_li:nth-child(4n+2) .gall_li_wr { transform: rotate(1.6deg); }
#bo_gall .gall_li:nth-child(4n+3) .gall_li_wr { transform: rotate(1.2deg); }
#bo_gall .gall_li:nth-child(4n)   .gall_li_wr { transform: rotate(-1.5deg); }

/* 마스킹테이프 장식 */
#bo_gall .gall_li_wr::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 2;
  width: 84px;
  height: 26px;
  margin-left: -42px;
  background: rgba(250, 178, 53, .6);
  border-radius: 2px;
  transform: rotate(-3deg);
  pointer-events: none;
}
#bo_gall .gall_li:nth-child(even) .gall_li_wr::before {
  background: rgba(247, 169, 168, .65);
  transform: rotate(3deg);
}

/* 관리자 체크박스가 테이프 위로 오게 */
#bo_gall .gall_li_chk {
  z-index: 3;
}

/* ---------- 사진 틀: 크기 고정 + 이미지가 꽉 차게 (cover) ---------- */
#bo_gall .gall_li .gall_img {
  position: relative;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: var(--gall-ratio);
  overflow: hidden;
  border-radius: 6px;
  background: #f6ead6;
}
#bo_gall #gall_ul .gall_li .gall_img img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}
#bo_gall .gall_li .gall_img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
  pointer-events: none;
}
#bo_gall .gall_li .gall_img .no_img,
#bo_gall .gall_li .gall_img .gall_notice {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #f6ead6;
  color: #e0c9a6;
  font-size: 3em;
}

/* 사진 장수 배지 */
#bo_gall .gall_cnt {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 4px 14px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .92);
  color: #ff7b24;
  font-family: 'Sweet', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
#bo_gall .gall_cnt i {
  margin-right: 6px;
}

/* ---------- 캡션: 라벨(카테고리) + 제목 + 날짜 ---------- */
#bo_gall .gall_text_href {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 4px 20px;
  text-align: center;
  text-decoration: none;
}
#bo_gall .gall_label {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 30px;
  background: #ffeadd;
  color: #ff7b24;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  font-family: 'GowoonDodum', sans-serif;
}
#bo_gall .gall_li_tit {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 12px 0 0;
  font-family: 'GowoonDodum', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.35;
  color: #222;
  word-break: keep-all;
}
#bo_gall .gall_date {
  display: block;
  margin-top: 10px;
  font-family: 'Sweet', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #9a8a76;
}

/* ---------- 페이지네이션 ---------- */
.pg_wrap {
  margin: 10px 30px 70px;
}
.pg_wrap .pg_page,
.pg_wrap .pg_current {
  min-width: 48px;
  height: 48px;
  margin: 0 4px;
  padding: 0 14px;
  border: 0;
  border-radius: 30px;
  font-family: 'Sweet', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 48px;
  box-sizing: border-box;
}
.pg_wrap .pg_page {
  background-color: #f6f2eb;
  color: #7a6650;
}
.pg_wrap .pg_page:hover,
.pg_wrap .pg_page:focus {
  background-color: #ffeadd;
  color: #ff7b24;
}
.pg_wrap .pg_current {
  background-color: #ff7b24;
  color: #fff;
}
.pg_wrap .pg_start,
.pg_wrap .pg_prev,
.pg_wrap .pg_next,
.pg_wrap .pg_end {
  width: 48px;
  padding: 0;
  background-color: #f6f2eb;
}
#bo_list_total,
#bo_sch,
#bo_gall .gall_info {
  display: none;
}

/* =====================================================
   보기 (view) — 갤러리용 (view.skin.php)
   상단 제목 바 → 사진 슬라이더 → 분류/제목/정보 → 본문
   ===================================================== */
#bo_v.gv {box-sizing:border-box;padding:0 30px;background:#fff}
#bo_v.gv > header {padding:0;border:0}

/* ---------- 이전글 / 다음글 (두 게시판 공통) ---------- */
#bo_v .bo_v_nb {margin:30px 0 0;padding:0;list-style:none;border:0;background:none}
#bo_v .bo_v_nb li {float:none;width:auto;height:auto;margin:0 0 10px;padding:0;border:1px solid #e6dccb;border-radius:14px;background:#fff;line-height:1.4;transition:border-color .2s, background .2s}
#bo_v .bo_v_nb li:last-child {margin-bottom:0}
#bo_v .bo_v_nb li:hover {border-color:#ffc9a3;background:#fffaf5}

#bo_v .bo_v_nb li a {display:block;overflow:hidden;padding:18px 20px;font-size:22px;color:#222;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;box-sizing:border-box}
#bo_v .bo_v_nb li:hover a {color:#ff7b24}

/* 화살표 아이콘 */
#bo_v .bo_v_nb li i {display:inline-block;width:34px;height:34px;margin:0 12px 0 0;border-radius:50%;background:#ffeadd;color:#ff7b24;font-size:16px;line-height:34px;text-align:center;vertical-align:middle}

/* 이전글 / 다음글 라벨 (마크업 수정 없이 CSS로 표시) */
#bo_v .bo_v_nb li a::before {display:inline-block;min-width:64px;margin:0 12px 0 0;color:#9a8a76;font-size:18px;font-weight:600;vertical-align:middle}
#bo_v .bo_v_nb .bo_v_prev a::before {content:"이전글"}
#bo_v .bo_v_nb .bo_v_next a::before {content:"다음글"}

/* ---------- 상단 제목 바 (프로그램 view 의 .pv_top 과 동일) ---------- */
.gv_top {position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 30px;padding:15px 0;border-top:3px solid #fab235;border-bottom:1px solid #e5e5e5}
.gv_top_tit {margin:0;font-size:30px;font-weight:700;line-height:1.4;color:#222}

.gv_top_btns {position:relative;display:flex;align-items:center;flex:0 0 auto}
.gv_icon_btn {display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:0;background:none;color:#aaa;font-size:30px;line-height:1;text-decoration:none;cursor:pointer}
.gv_icon_btn:hover, .gv_icon_btn:focus {color:#333}

.gv_top .more_opt {top:62px;right:0;white-space:nowrap}
.gv_top .more_opt li a {white-space:nowrap;word-break:keep-all;padding:10px 20px}
.gv_top #bo_v_share {top:62px;right:0}

/* ---------- 사진 슬라이더 ---------- */
.gv_photos {margin:0 0 6px}
.gv_frame {position:relative}

.gv_viewport {position:relative;overflow:hidden;border-radius:20px;background:#eee}

.gv_track {display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gv_track::-webkit-scrollbar {display:none}
.gv_slide {flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.gv_slide a {display:block}
/* 사진은 틀에 꽉 차게 (cover) */
#bo_v.gv .gv_slide img {display:block;width:100% !important;height:auto !important;max-width:none !important;margin:0 !important;aspect-ratio:4 / 3;object-fit:cover}

.gv_arrow {position:absolute;top:50%;z-index:2;width:52px;height:52px;margin-top:-26px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.7);color:#333;font-size:22px;line-height:52px;text-align:center;cursor:pointer;transition:opacity .2s, background .2s}
.gv_arrow:hover {background:rgba(255,255,255,.95)}
.gv_arrow.off {opacity:0;pointer-events:none}
.gv_prev {left:14px}
.gv_next {right:14px}

.gv_count {position:absolute;right:12px;bottom:12px;z-index:2;padding:4px 14px;border-radius:30px;background:rgba(255,255,255,.92);color:#ff7b24;font-family:'Sweet',sans-serif;font-size:18px;font-weight:700;line-height:1.5}
.gv_count i {margin-right:6px}
.gv_count b {font-weight:700}

.gv_dots {display:flex;justify-content:center;gap:8px;margin:18px 0 0}
.gv_dot {width:10px;height:10px;padding:0;border:0;border-radius:10px;background:#e6d9c3;cursor:pointer;transition:width .25s, background .25s}
.gv_dot.on {width:28px;background:#ff7b24}

/* ---------- 분류 + 제목 + 작성 정보 ---------- */
.gv_head {margin:40px 0 0;text-align:center}
#bo_v.gv .bo_v_cate {display:inline-block;padding:6px 18px;border-radius:30px;background:#ffeadd;color:#ff7b24;font-family:'Sweet',sans-serif;font-size:20px;font-weight:600;line-height:1.3}
#bo_v.gv #bo_v_title {margin:0}
#bo_v.gv .bo_v_tit {display:block;margin:16px 0 0;font-family:'Sweet',sans-serif;font-size:34px;font-weight:700;line-height:1.35;color:#222;word-break:keep-all}
#bo_v.gv #bo_v_info {padding:16px 0 0;font-family:'Sweet',sans-serif;font-size:18px;line-height:1.8;color:#9a8a76}
#bo_v.gv #bo_v_info strong {margin:0 0 0 12px;font-weight:500}
#bo_v.gv #bo_v_info i {color:#c9b99f}

/* ---------- 본문 ---------- */
#bo_v.gv #bo_v_atc {min-height:0;padding:0}
#bo_v.gv #bo_v_con {min-height:0;margin:28px 0 0;padding:30px 0 36px;border-top:2px dashed #eadfcb;font-size:24px;line-height:1.7;color:#222;word-break:keep-all;overflow-wrap:anywhere}
#bo_v.gv #bo_v_con a {color:#ff7b24}

/* 추천 / 비추천 */
#bo_v.gv #bo_v_act {margin:30px 0 0}
#bo_v.gv #bo_v_act .bo_v_good,
#bo_v.gv #bo_v_act .bo_v_nogood {width:auto;min-width:100px;padding:0 20px;border-color:#e6dccb;font-size:22px;line-height:54px;box-sizing:border-box}
#bo_v.gv #bo_v_act a:hover {border-color:#ff7b24;color:#ff7b24;background:#fff}
#bo_v.gv #bo_v_act_good, #bo_v.gv #bo_v_act_nogood {background:#ff7b24;border-radius:10px}

/* ---------- 첨부파일 / 관련링크 ---------- */
#bo_v.gv #bo_v_file, #bo_v.gv #bo_v_link {padding:0;margin:24px 0 0}
#bo_v.gv #bo_v_file li, #bo_v.gv #bo_v_link li {border-color:#e6dccb;border-radius:12px;font-size:18px}
#bo_v.gv #bo_v_file a:focus, #bo_v.gv #bo_v_file li:hover a, #bo_v.gv #bo_v_file a:active,
#bo_v.gv #bo_v_link a:focus, #bo_v.gv #bo_v_link li:hover a, #bo_v.gv #bo_v_link a:active {color:#ff7b24}
#bo_v.gv #bo_v_file li:hover, #bo_v.gv #bo_v_link li:hover {border-color:#ffc9a3}
#bo_v.gv #bo_v_file li:hover i, #bo_v.gv #bo_v_link li:hover i {color:#ff7b24}

/* ---------- 하단 목록 버튼 ---------- */
.gv_list_wrap {padding:40px 0 60px;text-align:center}
.gv_list_btn {display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:#146b43;color:#fff;font-size:38px;text-decoration:none;transition:background .2s}
.gv_list_btn:hover, .gv_list_btn:focus {background:#146b43;color:#fff}

/* ---------- 댓글 영역: 양옆 여백까지 꽉 차게 ---------- */
#bo_v.gv #bo_vc {margin:0 -30px;padding:30px}
#bo_v.gv #bo_vc h2 span {color:#ff7b24}

@media (prefers-reduced-motion: reduce) {
  .gv_track {scroll-behavior:auto}
  .gv_dot, .gv_arrow {transition:none}
}


/* =====================================================
   글쓰기 (write)
   ===================================================== */
/* #bo_w 바깥 여백은 style.css 의 값(15px 30px)을 그대로 사용 */

/* ---------- 프로그램 정보 입력 ---------- */
#bo_w .pw_info {min-width:0;margin:20px 0 20px;padding:28px 24px 12px;border:1px solid #d0d3db;border-radius:12px;background:#fafbfc}
#bo_w .pw_info_tit {padding:0 8px;font-size:24px;font-weight:700;color:#222}

#bo_w .pw_row {display:flex;align-items:flex-start;margin:0 0 20px}
#bo_w .pw_label {display:flex;align-items:center;flex:0 0 160px;min-height:56px;font-size:20px;font-weight:700;color:#2f8a3a;white-space:nowrap}
#bo_w .pw_ico {display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:10px;border-radius:50%;background:#0b4a2e;color:#fff;font-size:16px}

#bo_w .pw_fields {flex:1;min-width:0}
#bo_w .pw_line {display:flex;align-items:center;margin:0 0 10px}
#bo_w .pw_line:last-child {margin-bottom:0}

#bo_w .pw_badge {flex:0 0 auto;min-width:130px;margin-right:12px;padding:0 12px;border-radius:20px;font-size:16px;font-weight:600;line-height:40px;text-align:center;white-space:nowrap;box-sizing:border-box}
#bo_w .pw_wd {background:#e3f0fb;color:#2a7bd0}
#bo_w .pw_we {background:#ffeadd;color:#ff7b24}

#bo_w .pw_input {flex:1;width:100%;min-width:0;height:56px;padding:0 16px;border:1px solid #d0d3db;border-radius:4px;background:#fff;color:#222;font-size:20px;box-sizing:border-box}
#bo_w .pw_input:focus {border-color:#3a8afd;outline:0}

/* ---------- 파일 첨부 (버튼 글자 꺾임 / 삭제 문구 정리) ---------- */
.filebox .fileName {padding-right:130px;text-overflow:ellipsis;box-sizing:border-box}
.filebox .btn_file {top:5px;right:6px;width:auto;min-width:100px;height:48px;padding:0 14px;font-size:20px;line-height:48px;white-space:nowrap;box-sizing:border-box}
#bo_w .file_del {display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:18px;line-height:1.4;color:#444}