@charset "utf-8";

/* =========================================================
   PRODUCT 갤러리 스킨 (gallery_st 커스텀)
   동하밈텍 홈페이지 톤앤매너 기준
   - 목록 썸네일 : 본문 에디터의 첫 번째 이미지 자동 사용
   - 상세 : 1단 구성 (제품 이미지는 본문에 포함)
   ========================================================= */

/* ---------- 목록 : 상단 정보 / 관리자 버튼 ---------- */
.prd_list .prd_top{gap:16px; padding-bottom:22px; border-bottom:2px solid #111;}
.prd_list .pd_total{font-size:1.063em; color:#888;}
.prd_list .pd_total i{margin-right:8px; font-style:normal; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--subColor);}
.prd_list .pd_total b{font-size:1.25em; font-weight:800; color:#111;}
.prd_list .pd_adm{gap:8px;}
.prd_list .pd_allchk{margin-top:20px;}

/* ---------- 목록 : 제품 카드 ---------- */
.prd_list .prd_grid{gap:24px; margin-top:34px;}
.prd_list .prd_grid > li{position:relative;}
.prd_list .pg_col1 > li{width:100%;}
.prd_list .pg_col2 > li{width:calc((100% - 24px) / 2);}
.prd_list .pg_col3 > li{width:calc((100% - 48px) / 3);}
.prd_list .pg_col4 > li{width:calc((100% - 72px) / 4);}
.prd_list .pg_col5 > li{width:calc((100% - 96px) / 5);}
.prd_list .pg_col6 > li{width:calc((100% - 120px) / 6);}

.prd_list .pd_box{display:block; height:100%; overflow:hidden; border:1px solid #e5e5e5; border-radius:var(--item_r); background:#fff; transition:border-color .3s;}
.prd_list .pd_box:hover{border-color:var(--mainColor);}
.prd_list .pd_now .pd_box{border-color:#111;}

.prd_list .pd_thumb{position:relative; display:block; overflow:hidden; background:#f7f7f8;}
.prd_list .pd_thumb:before{content:''; display:block; padding-top:100%;}
.prd_list .pd_thumb img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.prd_list .pd_box:hover .pd_thumb img{transform:scale(1.05);}
.prd_list .pd_thumb .no_image{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); font-size:1em; font-weight:600; letter-spacing:1px; color:#ccc; text-align:center;}
.prd_list .pd_thumb .no_image .xi{display:block; margin-bottom:6px; font-size:2.5em; line-height:1;}

.prd_list .pd_ct{display:block; padding:26px 26px 28px; border-top:1px solid #ededed;}
.prd_list .pd_tt{display:block; font-size:1.25em; font-weight:700; color:#111; line-height:1.45; word-break:keep-all;}
.prd_list .pd_more{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:1em; font-weight:600; color:#888; transition:color .3s;}
.prd_list .pd_more i{display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#f1f1f3; color:#111; font-style:normal; font-size:1.063em; transition:background .3s, color .3s;}
.prd_list .pd_box:hover .pd_more{color:#111;}
.prd_list .pd_box:hover .pd_more i{background:var(--mainColor); color:#fff;}

.prd_list .pd_chk{position:absolute; top:14px; left:14px; z-index:2;}
.prd_list .pd_empty{width:100%; padding:7em 0; border:1px solid #e5e5e5; border-radius:var(--item_r); font-size:1.125em; color:#999; text-align:center;}
.prd_list .pd_empty .xi{display:block; margin-bottom:14px; font-size:2.5em; color:#ddd;}

/* ---------- 목록 : 검색 ---------- */
.prd_list .prd_sch{margin-top:4em;}

/* ---------- 상세 : 제목 (prc_pg .prc_top 과 동일 스타일) ---------- */
.prd_v .pv_hd{padding-bottom:26px; border-bottom:2px solid #111;}
.prd_v .pv_cate{font-size:1em; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--subColor);}
.prd_v .pv_tt{margin:0; font-size:2.5em; font-weight:700; color:#111; line-height:1.3; word-break:keep-all;}
.prd_v .pv_cate + .pv_tt{margin-top:14px;}
.prd_v .pv_tt .dot{display:inline-block; width:12px; height:12px; margin-left:8px; border-radius:50%; background:var(--mainColor); vertical-align:-1px;}
.prd_v .pv_tx{margin-top:18px; font-size:1.125em; color:#666; line-height:1.8; word-break:keep-all;}

/* ---------- 상세 : 본문 ---------- */
.prd_v .pv_sec{margin-top:0;}
.prd_v .pv_con{padding:50px 0 0; font-size:1.063em; color:#555; line-height:1.9; word-break:keep-all; text-align:center;}
.prd_v .pv_con > *{text-align:left;}
.prd_v .pv_con img{max-width:min(100%, 820px); height:auto;}
.prd_v .pv_con table{width:100%; border-collapse:collapse; margin:10px 0 24px; text-align:left;}
.prd_v .pv_con table th,
.prd_v .pv_con table td{padding:16px 22px; border:1px solid #e5e5e5; text-align:left; line-height:1.6;}
.prd_v .pv_con table th{background:#f7f7f8; font-weight:700; color:#111;}

/* ---------- 상세 : 자료 / 링크 ---------- */
.prd_v .pv_etc{gap:24px; margin-top:3.5em;}
.prd_v .pv_etc > div{flex:1; min-width:280px;}
.prd_v .pf_tt{margin-bottom:12px; font-size:1em; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--subColor);}
.prd_v .pv_file li,
.prd_v .pv_link li{margin-bottom:8px;}
.prd_v .pv_file li:last-child,
.prd_v .pv_link li:last-child{margin-bottom:0;}
.prd_v .pv_file a,
.prd_v .pv_link a{gap:10px; padding:15px 20px; border:1px solid #e5e5e5; border-radius:var(--bor_r); font-size:1.063em; color:#555; transition:border-color .3s, color .3s;}
.prd_v .pv_file a:hover,
.prd_v .pv_link a:hover{border-color:var(--mainColor); color:#111;}
.prd_v .pv_file a .xi,
.prd_v .pv_link a .xi{flex:0 0 auto; font-size:1.125em; color:var(--mainColor);}
.prd_v .pv_file a strong,
.prd_v .pv_link a strong{flex:1; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prd_v .pv_file a em{flex:0 0 auto; font-style:normal; font-size:.875em; color:#aaa;}

/* ---------- 상세 : 버튼 / 이전·다음 ---------- */
.prd_v .pv_nb{gap:20px; margin-top:4.5em; padding-top:28px; border-top:1px solid #e5e5e5;}
.prd_v #bo_v_top{margin-top:2.6em;}
.prd_v .pf_side{flex:1; min-width:0;}
.prd_v .pf_next{text-align:right;}
.prd_v .pf_side a{display:inline-flex; align-items:center; gap:10px; max-width:100%; font-size:1.063em; color:#999; transition:color .3s;}
.prd_v .pf_side a:hover{color:#111;}
.prd_v .pf_side a:hover .nb_lb{color:var(--mainColor);}
.prd_v .pf_side .xi{flex:0 0 auto; font-size:1.25em;}
.prd_v .pf_side .nb_lb{flex:0 0 auto; font-weight:700; color:#111; transition:color .3s;}
.prd_v .pf_side .nb_tx{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- 등록/수정 폼 ---------- */
#bo_w .wr_file_tip{margin-bottom:10px; font-size:1em; color:#888;}
#bo_w .wr_file_tip:before{content:"*"; margin-right:5px; color:var(--mainColor);}

/* =========================================================
   반응형
   ========================================================= */
@media screen and (max-width:1300px){
    .prd_list .prd_grid{gap:18px;}
    #bo_gall.prd_list .pg_col4 > li,
    #bo_gall.prd_list .pg_col5 > li,
    #bo_gall.prd_list .pg_col6 > li{width:calc((100% - 36px) / 3);}
    .prd_list .pd_ct{padding:22px 22px 24px;}
    .prd_v .pv_tt{font-size:1.875em;}
}
@media screen and (max-width:1024px){
    .prd_list .prd_grid{margin-top:26px;}
    /*테마 response.css 의 #bo_gall .gall_li{width:50%} 보다 우선하도록 ID 포함*/
    #bo_gall.prd_list .pg_col3 > li,
    #bo_gall.prd_list .pg_col4 > li,
    #bo_gall.prd_list .pg_col5 > li,
    #bo_gall.prd_list .pg_col6 > li{width:calc((100% - 18px) / 2);}
    .prd_v .pv_con{padding-top:30px;}
    .prd_v .pv_etc{margin-top:2.6em;}
    .prd_v .pv_nb{margin-top:3.4em;}
}
@media screen and (max-width:768px){
    /*테마 response.css 의 gallery 여백 보정 무효화*/
    #bo_gall.prd_list .prd_grid{margin-right:0;}
    #bo_gall.prd_list .prd_grid > li{margin-bottom:0;}
    .prd_list .prd_top{padding-bottom:16px;}
    .prd_list .pd_tt{font-size:1.125em;}
    .prd_list .pd_ct{padding:18px 18px 20px;}
    .prd_list .pd_more{margin-top:14px;}
    .prd_list .prd_sch{margin-top:2.6em;}
    .prd_v .pv_hd{padding-bottom:18px;}
    .prd_v .pv_tt{font-size:1.5em;}
    .prd_v .pv_con{padding-top:24px;}
    .prd_v .pv_con table th,
    .prd_v .pv_con table td{padding:12px 14px; font-size:.938em;}
    .prd_v .pv_etc > div{min-width:0; flex:1 1 100%;}
    .prd_v .pv_tx{font-size:1.063em;}
    .prd_v .pv_nb{gap:12px; margin-top:2.6em; padding-top:22px;}
    .prd_v #bo_v_top{margin-top:1.8em;}
    .prd_v .pf_side{flex:1 1 100%; text-align:left;}
}
@media screen and (max-width:500px){
    #bo_gall.prd_list .pg_col2 > li,
    #bo_gall.prd_list .pg_col3 > li,
    #bo_gall.prd_list .pg_col4 > li,
    #bo_gall.prd_list .pg_col5 > li,
    #bo_gall.prd_list .pg_col6 > li{width:100%;}
    .prd_list .pd_empty{padding:4.5em 0;}
    .prd_v .pv_tt{font-size:1.375em;}
}