@charset "utf-8";

/* ═══════════════════════════════════════
   Gallery Board Skin - Studio IVE
   Dark Theme Portfolio Style22
   ═══════════════════════════════════════ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
.white {color:#fff !important;}
.font_pr   {font-family: "Pretendard Variable", Pretendard, 'Raleway', sans-serif !important;}
.font_noto   {font-family: 'Noto Sans KR', "Pretendard Variable", Pretendard, 'Raleway', sans-serif !important;}
.font_nanums   {font-family: 'NanumSquare', "Pretendard Variable", Pretendard, 'Raleway', sans-serif !important;}
.font_gmark   {font-family: 'GMarketSans', "Pretendard Variable", Pretendard, 'Raleway', sans-serif !important;}
.font_suti   {font-family: 'Suit', "Pretendard Variable", Pretendard, 'Raleway', sans-serif !important;}
   
   

   
   
   
   
   
   
   
   
   
   
   
   
   
label {color:#000}
.bowrite_category {display: flex;}
#ca_depth2_wrap {padding-left:10px;}
select {padding:10px}
.write_div {padding-bottom:10px; color:#000}
.cke_sc {display: none;}
#bo_v_atc .section_01 {position: relative;}
#bo_v_atc .section_01 img {width: 100%;}
#bo_v_atc .section_02 img {width: 100%; max-width: 430px;}
#bo_v_atc .section_02  {padding:200px 5%; background: #FBFBFB;}
#bo_v_atc .section_02 > ul  {display: flex;  gap:10%;     align-items: center;   
    justify-content: center; 
    color: #121212;}
#bo_v_atc .section_02 .section_02_title {font-size: 32px; font-weight: 500;; font-family: 'Clash Display', 'Raleway', sans-serif !important;}
#bo_v_atc .section_02 .section_02_client {font-size: 16px;padding-top: 20px;}
#bo_v_atc .section_02 .section_02_period {padding-top:20px;display: flex; gap:50px; font-size: 15px;}
#bo_v_atc .section_02 .section_02_period b {padding-right:10px; font-weight:500; font-size: 18px ;font-family: 'Clash Display', 'Raleway', sans-serif !important;}

#bo_v_atc .section_03 {background: #1E1E1E}
#bo_v_atc .section_03 img {width: 100%;}
#bo_v_atc .section_05 img {width: 100%;}

#bo_v_atc .section_04 {padding:200px 5%; background: #FBFBFB;}
#bo_v_atc .section_04 .design_wrapper {    display: grid;
    grid-template-columns: 1fr 3fr;
    padding: 100px 0;}
#bo_v_atc .section_04 .design_wrapper .design_left {    font-size: 32px;
    font-weight: 500;
    color: #121212;
    font-family: 'Clash Display', sans-serif;
    line-height: 100%;}
#bo_v_atc .section_04 .design_wrapper  .font {display:flex; gap:120px; padding: 40px 0px; border-top: 1px solid #989898;}
#bo_v_atc .section_04 .design_wrapper  .font .tit {font-family: 'Clash Display', 'Raleway', sans-serif !important; font-size: 20px; color:#333; }
#bo_v_atc .section_04 .design_wrapper  .font .font-family {font-size: 50px; color:#121212;   line-height: 100%;}
#bo_v_atc .section_04 .design_wrapper  .font .font-family span {font-size: 17px;}
#bo_v_atc .section_04 .design_wrapper  .font .basic ul li {display: flex; padding-bottom: 10px;    align-items: center; gap:20px; color:#555555;}

#bo_v_atc .section_04 .design_wrapper  .font .basic ul li div:first-child {background: #E6E6E6; font-size: 13px; text-align: center; padding:10px 20px; font-weight: 300; min-width: 90px;}
#bo_v_atc .section_04 .design_wrapper  .font .basic ul li:nth-child(2) div {font-weight: 500; }
#bo_v_atc .section_04 .design_wrapper  .font .basic ul li:nth-child(3) div {font-weight: 700; }

#bo_v_atc .section_04 .design_wrapper  .font .basic_box ul {display: flex; gap:20px}
#bo_v_atc .section_04 .design_wrapper  .font .basic_box ul li {position: relative; padding:30px; border-radius: 10px; height: 250px; width: 250px;;}
#bo_v_atc .section_04 .design_wrapper  .font .basic_box ul li:first-child {color:#fff}
#bo_v_atc .section_04 .design_wrapper  .font .basic_box ul li .txt {font-size: 17px;}
#bo_v_atc .section_04 .design_wrapper  .font .basic_box ul li .txt_ab {color:#333; font-size: 80px; font-weight: 300; position:absolute; right:20px; bottom: 20px; line-height: 100%;}

#bo_v_atc .section_06 {padding: 250px 0; background: #1E1E1E; text-align: center; position: relative; overflow: hidden;}
#bo_v_atc .section_06 .section_06_title {font-size: 32px; font-weight: 500; font-family: 'Clash Display', 'Raleway', sans-serif !important; color:#D5D5D5; text-align: center; }
#bo_v_atc .section_06 .section_06_line {width: 100%; position: relative;; padding-bottom:98px;}
#bo_v_atc .section_06 .section_06_line img {top:0px;  position:absolute; left: 50%; transform: translateX(-50%);}

#bo_v_atc .section_07{background:#FBFBFB}

.box_line {height:40px; width:100%}

.bo_v_flex {display:flex; align-items: center;}
.bo_v_flex > div {width:50%}
.bo_v_flex > div img {width:100%}
.bo_v_flex > div:last-child {padding:5%}}
#bo_v_atc {color:#121212}
/* ── 컨테이너 (.section_container 상속) ── */
#bo_gall {
    color: #D5D5D5;
    padding-top: 40px;
    padding-bottom: 80px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}
#bo_w .bo_w_link label {
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 3px 0 0 3px;
    height: 38px;
    line-height: 38px;
    width: 40px;
    font-size: 1.2em;
    text-align: center;
    color: #b2b2b2;
}
#bo_w .write_div:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

/* ── 링크 (기본 스킨 스타일) ── */
#bo_w .bo_w_link { position: relative; }
#bo_w .bo_w_link .frm_input { padding-left: 50px; }

/* ── 첨부파일 ── */
.file_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: clamp(13px, 1.3vw, 15px);
    color: #333;
}
.file_header small { color: #999; font-weight: 400; }

.btn_file_add,
.btn_file_remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.btn_file_add { color: #555; }
.btn_file_add:hover { border-color: #999; background: #f0f0f0; }
.btn_file_remove { color: #c66; border-color: #dcc; }
.btn_file_remove:hover { color: #c33; border-color: #c44; background: #fef0f0; }

.file_slot { margin-bottom: 5px; }

.file_input_row {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    padding: 5px 8px;
    gap: 8px;
}
.file_input_row .lb_icon {
    color: #b2b2b2;
    font-size: 1.2em;
    flex-shrink: 0;
}
.file_input_row .frm_file { flex: 1; min-width: 0; }

.file_slot .frm_input { margin: 5px 0 0; }

.file_existing_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 0 30px;
    font-size: clamp(12px, 1.2vw, 13px);
    color: #555;
}
.file_name_text i { margin-right: 4px; color: #999; }
.file_name_text small { color: #999; }
.file_del_chk { color: #c66; cursor: pointer; white-space: nowrap; transition: color 0.3s ease; }
.file_del_chk:hover { color: #c33; }
/* ══════════════════════════════════════
   1차 카테고리 (대형 텍스트)
   ══════════════════════════════════════ */
.gall_main_cats {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: clamp(20px, 4vw, 50px);
    margin-bottom: clamp(20px, 3vw, 30px);
}

.main_cat_name {
    margin-top: 20px;}

.main_cat_item {
    display: inline-flex;
    align-items: flex-start;
    text-decoration: none;
    color: #555;
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: clamp(48px, 8vw, 100px);
    line-height: 1;
    transition: color 0.3s ease;
    position: relative;
}

.main_cat_item:hover,
.main_cat_item.active {
    color: #fff;
}

.main_cat_count {
    font-size: clamp(14px, 1.5vw, 18px);

    font-weight: 400;
    display: inline-flex;
    height: 28px;
    padding: 0 15px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #171717;
    font-family: 'Raleway', sans-serif;
    justify-content: center;
}

.main_cat_item.active .main_cat_count,
.main_cat_item:hover .main_cat_count {
    color: #aaa;
}

/* ── 구분선 ── */
.gall_divider {
    height: 1px;
    background: #989898;
    margin-bottom: clamp(15px, 2vw, 25px);
    width:810px;
}



/* ══════════════════════════════════════
   2차 카테고리 + 뷰 전환 버튼
   ══════════════════════════════════════ */
.gall_sub_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(30px, 4vw, 50px);
    gap: 20px;
}

.gall_sub_cats {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 25px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}

.gall_sub_cats::-webkit-scrollbar {
    display: none;
}

.sub_cat_item {
    white-space: nowrap;
    text-decoration: none;
    color: #666;
    font-family: 'Raleway', 'Noto Sans KR', sans-serif;
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 500;
    padding: 5px 0;
    transition: color 0.3s ease;
    position: relative;
}

.sub_cat_item:hover {
    color: #D5D5D5;
}

.sub_cat_item.active {
    color: #fff;
}
/*
.sub_cat_item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #fff;
}
*/
/* ── 뷰 전환 버튼 ── */
.gall_view_toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(51, 51, 51, 1);;
    border-radius: 10px;
    padding: 6px;
    flex-shrink: 0;
	
    position: fixed;
    bottom: 20px;
    left: 50%;
	z-index:1;
	transform: translateX(-50%);
}

.view_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #555;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.view_btn:hover {
    color: #fff;
}

.view_btn.active {
    color: #fff;
    background: #2a2a2a;
}

/* ══════════════════════════════════════
   관리자 바
   ══════════════════════════════════════ */
.gall_admin_bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    position: relative;
    justify-content: flex-end;
}

.gall_admin_bar .btn_admin,
.gall_admin_bar .btn_write {
    color: #D5D5D5;
    text-decoration: none;
    font-size: clamp(12px, 1.2vw, 14px);
    padding: 6px 14px;
    border: 1px solid #333;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.gall_admin_bar .btn_admin:hover,
.gall_admin_bar .btn_write:hover {
    background: #2a2a2a;
    border-color: #555;
}

.gall_admin_bar .btn_more_opt {
    color: #D5D5D5;
    background: none;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gall_admin_bar .more_opt {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 5px 0;
    z-index: 100;
    min-width: 120px;
    list-style: none;
    margin: 0;
}

.gall_admin_bar .more_opt li button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    color: #D5D5D5;
    cursor: pointer;
    text-align: left;
    font-size: clamp(12px, 1.2vw, 13px);
    transition: background 0.2s ease;
}

.gall_admin_bar .more_opt li button:hover {
    background: #2a2a2a;
}

/* ══════════════════════════════════════
   갤러리 리스트 (공통)
   ══════════════════════════════════════ */
.gall_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.gall_empty {
    text-align: center;
    padding: 80px 20px;
    color: #555;
    font-size: clamp(14px, 1.5vw, 16px);
}

/* ══════════════════════════════════════
   갤러리 뷰 (Grid)
   ══════════════════════════════════════ */
.gall_list.view-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(15px, 2vw, 25px);
}

.gall_list.view-grid .gall_row_item {
    display: none;
}

.gall_list.view-grid .gall_card {
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

/* 썸네일 */
.gall_thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #1a1a1a;
    width: 100%;
}

.gall_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gall_card:hover .gall_thumb img {
    transform: scale(1.03);
}

.gall_thumb_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}

.gall_card:hover .gall_thumb_overlay {
    background: rgba(0, 0, 0, 0.15);
}

.no_image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    color: #444;
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 카테고리 배지 (이미지 좌하단) */
.gall_badge {
    position: absolute;
    bottom: 12px;
    left: 0px;
    background: #1E1E1E;
    color: #D5D5D5;
    font-size: clamp(12px, 1.1vw, 15px);
    padding: 4px 10px;
    font-family: 'Raleway', 'Noto Sans KR', sans-serif;
    font-weight: 400;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
}

/* 카드 정보 */
.gall_card_info {
    padding: 14px 2px;
}

.gall_card_info ul {display:flex; gap:10px}

.gall_card_title {
    margin: 0 0 6px;
    font-family: 'Clash Display Variable', 'Clash Display', 'Noto Sans KR', sans-serif;
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
   /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
}

.gall_card_desc {
    margin: 0;
    font-size: clamp(12px, 1.2vw, 15px);
    color: #d5d5d5;
    font-family: 'Raleway', 'Noto Sans KR', sans-serif;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════
   리스트 뷰
   ══════════════════════════════════════ */
.gall_list.view-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #989898;
}

.gall_list.view-list .gall_card {
    display: none;
}

.gall_list.view-list .gall_row_item {
    display: flex;
    align-items: center;
    padding: clamp(18px, 2.5vw, 28px) 0;
    border-bottom: 1px solid #989898;
    text-decoration: none;
    color: inherit;
    gap: clamp(15px, 3vw, 40px);
    transition: background-color 0.3s ease, padding-left 0.3s ease;
        justify-content: space-around;
}

.gall_list.view-list .gall_row_item:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.gall_row_badge {
    flex-shrink: 0;
    font-size: clamp(11px, 1.1vw, 13px);
    color: #D5D5D5;
    
    font-family: 'Raleway', 'Noto Sans KR', sans-serif;
    min-width: 80px;
    display: inline-flex;
padding: 5px 10px;
justify-content: center;
align-items: center;
gap: 10px;
grid-row: 1 / span 1;
grid-column: 1 / span 1;
background: #171717;
}

.gall_row_title {
    font-family: 'Clash Display Variable', 'Clash Display', 'Noto Sans KR', sans-serif;
    font-size: clamp(18px, 2.5vw, 28px);
    font-weight: 600;
    color: #fff;
    flex: 0.6;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.3s ease;
}

.gall_row_title::before {
    content: '';
    border-radius:50%;
    width: 8px;
    height: 8px;
    margin-bottom: 7px;;
    
    background-color: #D5D5D5;
    margin-right: 0;
    opacity: 0;
    transition: opacity 0.3s ease, margin-right 0.3s ease;
    display: inline-block;
}

.gall_list.view-list .gall_row_item:hover .gall_row_title {
    transform: translateX(10px);
}

.gall_list.view-list .gall_row_item:hover .gall_row_title::before {
    opacity: 1;
    margin-right: 6px;
}

.gall_row_desc {
    font-size: clamp(12px, 1.2vw, 15px);
    color: #D5D5D5;
    font-family: 'Raleway', 'Noto Sans KR', sans-serif;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    flex: 0.5;
    text-overflow: ellipsis;
}

.gall_row_arrow {
   color: #D5D5D5;
   text-align: right;
   font-family: "Clash Display Variable";
   font-size: 40px;
   font-style: normal;
   font-weight: 200;
   line-height: 140%;
   transition: all 0.3s ease;
}

.gall_list.view-list .gall_row_item:hover .gall_row_arrow {
    color: #fff;
/*    transform: translateX(5px); */
}

/* 그리드 뷰에서 리스트 요소 숨기기 */
.gall_list.view-grid .gall_row_item {
    display: none;
}

/* 리스트 뷰에서 체크박스 위치 조정 */
.gall_list.view-list .gall_chk {
    position: static;
    margin-right: -10px;
}

/* ══════════════════════════════════════
   무한스크롤 로딩
   ══════════════════════════════════════ */
.load_trigger {
    padding: 40px 0;
    text-align: center;
}

.load_spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.spinner {
    width: 30px;
    height: 30px;
    border: 2px solid #333;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.load_spinner_text {
    font-size: clamp(11px, 1.1vw, 13px);
    color: #555;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 1px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════
   검색 오버레이
   ══════════════════════════════════════ */
.gall_search_overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

.search_panel {
    position: relative;
    background: #d5d5d5;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
}

.search_box {position: relative;}
.search_backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gall_search_overlay.open {
    transform: translateY(0);
}

.search_overlay_inner {
    max-width: 1200px;
    width:100%;
    margin: 0 auto;
    position: relative;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px);
}
.gall_search_overlay.open {
    pointer-events: auto;
}

.gall_search_overlay.open .search_backdrop {
    opacity: 1;
}

.gall_search_overlay.open .search_panel {
    transform: translateY(0);
}

.search_close_btn {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 8px;
    transition: opacity 0.3s ease;
}

.search_close_btn:hover {
    opacity: 0.5;
}

.search_form {
    text-align: center;
}

.search_input_wrap {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.search_input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: clamp(16px, 2vw, 20px);
    color: #1e1e1e;
    font-family: 'Raleway', 'Noto Sans KR', sans-serif;
    outline: none;
    text-align: center;
    caret-color: #333;
}

.search_input:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.search_input::placeholder {
    color: transparent;
}

.search_submit_btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 4px;
    transition: color 0.3s ease;
}

.search_submit_btn:hover {
    color: #1e1e1e;
}

.search_placeholder_text {
    font-size: clamp(12px, 1.3vw, 14px);
    color: #888;
    margin: 8px 0 0;
    font-family: 'Raleway', 'Noto Sans KR', sans-serif;
}

/* ══════════════════════════════════════
   하단 바
   ══════════════════════════════════════ */
.gall_bottom_bar {
    text-align: right;
    margin-top: 30px;
}

.gall_bottom_bar .btn_write {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid #444;
    border-radius: 6px;
    color: #D5D5D5;
    text-decoration: none;
    font-size: clamp(12px, 1.2vw, 14px);
    font-family: 'Raleway', 'Noto Sans KR', sans-serif;
    transition: all 0.3s ease;
}

.gall_bottom_bar .btn_write:hover {
    background: #fff;
    color: #0a0a0a;
    border-color: #fff;
}

/* ══════════════════════════════════════
   체크박스 (관리자)
   ══════════════════════════════════════ */
.gall_chk {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.gall_chk input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #fff;
}

.gall_item {
    position: relative;
    min-width: 0;
}

/* ══════════════════════════════════════
   반응형 - 태블릿 (≤1024px)
   ══════════════════════════════════════ */
@media (max-width: 1024px) {
    .gall_list.view-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gall_main_cats {
        gap: clamp(15px, 3vw, 30px);
    }

    .search_close_btn {
        right: 0;
        top: -30px;
    }

    .gall_divider {
    width:80%;
    }

    #bo_v_atc .section_02 > ul  {gap:20px;    flex-wrap: wrap;}
}

/* ══════════════════════════════════════
   반응형 - 모바일 (≤768px)
   ══════════════════════════════════════ */
@media (max-width: 768px) {
	.gall_card_info ul {flex-direction: column; gap:0px;}
/*	.gall_card_desc {text-align:right}*/
    .bo_v_flex { flex-wrap: wrap;}
    .bo_v_flex > div {width: 100%;}
    #bo_v_atc .section_04 {padding:100px 5%}
    #bo_gall {
        padding-top: 20px;
        padding-bottom: 60px;
    }

    .gall_list.view-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gall_sub_bar {
            flex-wrap: wrap;
        gap: 15px;
    }

    .gall_view_toggle {
        padding: 4px;
    }

    .view_btn {
        width: 32px;
        height: 32px;
    }

    /* 리스트 뷰 모바일 */
    .gall_row_desc {
        display: none;
    }

    .gall_row_badge {
        min-width: 60px;
    }

    .gall_row_title {
        font-size: clamp(16px, 4vw, 20px);
    }

    .gall_row_arrow {
        font-size: 20px;
    }

    /* 검색 오버레이 모바일 */
    .gall_search_overlay {
/*        padding: 30px 20px; */
    }

    .search_close_btn {
        position: fixed;
        top: 10px;
        right: 10px;
    }
    .gall_list.view-list .gall_row_item {}
    
    .gall_divider {
    width:100%;
    }
	.search_close_btn {display:none}   
}

/* ══════════════════════════════════════
   반응형 - 소형 모바일 (≤480px)
   ══════════════════════════════════════ */
@media (max-width: 480px) {
    .main_cat_item {
        font-size: clamp(36px, 10vw, 60px);
    }

    .gall_sub_cats {
        gap: 12px;
    }

    .sub_cat_item {
        font-size: clamp(12px, 3vw, 14px);
    }

    .gall_list.view-list .gall_row_item {
        gap: 10px;
        padding: 14px 0;
    }
}



/* ── bo_v_top: gall_admin_bar 스타일 + fixed ── */
#bo_v_top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    transition: top 0.3s ease;
}

#bo_v_top .btn_bo_user.bo_v_com {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#bo_v_top .btn_bo_user.bo_v_com li {background: #121212; border-radius: 10px}

#bo_v_top .btn_b01.btn {
    color: #D5D5D5;
    text-decoration: none;
    font-size: clamp(12px, 1.2vw, 14px);
    padding: 6px 14px;
    border: 1px solid #333;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#bo_v_top .btn_b01.btn:hover {
    background: #2a2a2a;
    border-color: #555;
}

#bo_v_top .more_opt.is_view_btn {
    position: absolute;
    top: 100%;
    right: 20px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 5px 0;
    z-index: 100;
    min-width: 120px;
    list-style: none;
    margin: 0;
     display: none;
}

#bo_v_top .more_opt.is_view_btn li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    background: none;
    color: #D5D5D5;
    cursor: pointer;
    text-align: left;
    font-size: clamp(12px, 1.2vw, 13px);
    transition: background 0.2s ease;
    text-decoration: none;
    box-sizing: border-box;
}

#bo_v_top .more_opt.is_view_btn li a:hover {
    background: #2a2a2a;
}

.relax_img {position: relative; display: inline-block; }
.relax_img_bo {position: relative; display: inline-block;}
.ab_img {position: absolute; width: clamp(180px, 20vw, 380px); transition: all 0.3s ease;}
.ab_img img {width: 100%; height: auto; display: block;}
.ab_img.img01 {left: clamp(-280px, 1.5vw, -250px); top: 15%;}
.ab_img.img02 {right: clamp(-280px, 1.5vw, -250px); top: 37%;}
.ab_img.img03 {left: clamp(-280px, 1.5vw, -250px); bottom: 20%;}

/* 모바일 슬라이더 (스크롤 스냅) - 기본 숨김 */
.mobile_swiper {display:none; gap:12px}
.mobile_swiper .slide img {width:100%; height:auto; display:block; border-radius:8px}
.relax_img_bo .main_img img {width:100%; height:auto; display:block}

.mobile_swiper_dots {display:none; gap:8px; justify-content:center; padding-top:8px}
.mobile_swiper_dot {width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.25); border:none; padding:0; cursor:pointer; transition:transform 0.2s ease, background 0.2s ease}
.mobile_swiper_dot.active {background:#fff; transform:scale(1.2)}

/* 반응형: 1750px 이하에서 ab_img 크기 감소 및 위치 이동 */
@media (max-width: 1750px) {
    .ab_img { width: clamp(140px, 16vw, 320px); transition: transform 0.45s ease, width 0.3s ease; }
    /* img01, img03 는 오른쪽으로 들어오게 (positive X) */
    .ab_img.img01 { transform: translateX(80px); }
    .ab_img.img03 { transform: translateX(60px); }
    /* img02 는 왼쪽으로 들어오게 (negative X) */
    .ab_img.img02 { transform: translateX(-80px); }
}

/* 1400px 이하에서 더 많이 들어오도록 설정 */
@media (max-width: 1400px) {
    .ab_img { width: clamp(120px, 14vw, 300px); }
    .ab_img.img01 { transform: translateX(240px); }
    .ab_img.img03 { transform: translateX(240px); }
    .ab_img.img02 { transform: translateX(-240px); }
}

.section_08 {background: #1E1E1E; padding:150px 5%  }
.credits_section {color: #d5d5d5; display: flex;   gap: 40%;  align-items: center; border-bottom:1px solid #989898; padding-bottom:50px}
.credit_tit { font-size: 32px; font-family: 'Clash Display Variable', 'Clash Display', 'Noto Sans KR', sans-serif;}
.credits_section ul {display: flex;  gap: 100px; font-size: 15px;}
.credits_section ul span {margin-left: 10px;}
.credits_section ul li { display: flex;

justify-content: center;
align-items: center;
gap:5px;}

.credits_section ul li div {padding: 5px 10px; background: #171717;}

.section_08 .list_btn  {padding-top:50px; text-align:center;}
.section_08 .list_btn a {font-family: 'Clash Display Variable', 'Clash Display', 'Noto Sans KR', sans-serif; color:#D5D5D5; font-size:55px; font-weight:100;  display: flex;   align-items: center;     justify-content: center;}
.section_08 .list_btn a span {font-size:32px; font-weight:500; padding:0px 10px}

.top_txt {position: absolute; bottom:50px; left:50px; z-index: 1;}
.top_txt .subject_txt {font-weight:500; font-size:50px; color:#f0f0f0; padding-bottom:20px}
.top_txt ul {display:flex;     align-items: center;}
.top_txt ul li {color:#d5d5d5; font-size:20px}
.top_txt ul li.sub_cate {background:#1E1E1E; color:#f0f0f0; font-size:15px; padding:10px; margin-right:10px}

.section_01 .list_btn  {position: absolute; right:50px; bottom:50px}
.section_01 .list_btn a {font-family: 'Clash Display Variable', 'Clash Display', 'Noto Sans KR', sans-serif; color:#D5D5D5; font-size:55px; font-weight:100;  display: flex;   align-items: center;     justify-content: center;}
.section_01 .list_btn a span {font-size:32px; font-weight:500; padding:0px 10px}

@media (max-width: 1700px) {
    .credits_section {gap:10px;   flex-wrap: wrap;  justify-content: space-between;}
    
}   

@media (max-width: 1410px) {
    #bo_v_atc .section_04 .design_wrapper {grid-template-columns:1fr}
    #bo_v_atc .section_04 .design_wrapper .design_left {padding-bottom:20px; font-size:30px}
 
    
}   

@media (max-width: 1200px) {
    #bo_v_atc .section_04 .design_wrapper .font {gap:10%}
    #bo_v_atc .section_04 .design_wrapper .font .tit {font-size:16px}
    #bo_v_atc .section_04 .design_wrapper .font .font-family {font-size:35px}
    #bo_v_atc .section_04 .design_wrapper .font .font-family span {font-size:14px}
    #bo_v_atc .section_04 .design_wrapper .font .basic ul li div:first-child {font-size:0.7em;}
    #bo_v_atc .section_04 .design_wrapper .font .basic ul li div:last-child {font-size:0.8em;}
    #bo_v_atc .section_04 .design_wrapper .font .basic_box ul li .txt {font-size: 15px;}
    #bo_v_atc .section_04 .design_wrapper .font .basic_box ul li .txt_ab {font-size:50px}
    #bo_v_atc .section_04 .design_wrapper .font {}
    .credits_section ul {flex-wrap: wrap; gap:20px}
    #bo_v_atc .section_04 .design_wrapper .font .basic_box ul {
    }
       #bo_v_atc .section_04 .design_wrapper .font .basic_box ul li {
    height: 200px;
    width: 200px;
    }
       
} 


@media (max-width: 900px) {
    #bo_v_atc .section_04 .design_wrapper .font .tit {padding-bottom:20px}
    #bo_v_atc .section_04 .design_wrapper .font {flex-wrap: wrap;}
    #bo_v_atc .section_01 {height:400px}
    #bo_v_atc .section_01 img {display:none}
}

#bo_v_atc_title {display:none}

@media (max-width: 720px) {
    .relax_img {display: flex; flex-direction: column; align-items: center; gap: 20px;}
    /* 데스크탑 오버레이 숨김, 모바일 슬라이더 사용 */
    .relax_img_bo .ab_img {display:none !important}
    .mobile_swiper {display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 8px;}
    .mobile_swiper .slide {flex: 0 0 80%; scroll-snap-align:center; box-sizing:border-box; }
    .mobile_swiper::-webkit-scrollbar {display:none}
    .mobile_swiper_dots {display:flex}

    .ab_img {position: static; width: 60%; max-width: 240px;}
    .ab_img.img01, .ab_img.img02, .ab_img.img03 {left: auto; right: auto; top: auto; bottom: auto;}
    #bo_v_atc .section_04 .design_wrapper .font > div {width:100%}
    #bo_v_atc .section_04 .design_wrapper .font .font-family  {padding-bottom:20px}
    #bo_v_atc .section_04 .design_wrapper .font .basic_box ul {    flex-wrap: wrap; gap:10px}
     #bo_v_atc .section_04 .design_wrapper .font .basic_box ul li {

    position: relative;
    padding: 30px;
    border-radius: 10px;

    width: 100%;
    max-width: 100;

    aspect-ratio: 1 / 1;
    }

	.top_txt ul {align-items: flex-start;
    flex-direction: column;}
    .top_txt {left:20px; bottom:20px}
    .top_txt .subject_txt {font-size:25px; padding-bottom:10px}
    .top_txt ul li.sub_cate {font-size:13px}
    .top_txt ul li {font-size:16px}

    .section_01 .list_btn {top:100px; z-index: 1; bottom:auto; right:auto; left:20px; transform: translateY(0%);/* background:#1E1E1E; padding:0px 10px*/} 
    .section_01 .list_btn a {font-size:30px}
    .section_01 .list_btn a span {font-size:20px}
    #bo_v_atc .section_02 {padding:100px 5%}
    #bo_v_atc .section_02 .section_02_title {font-size:24px; padding-top:20px}
   .section_01  .m_bg {position: absolute; top:0; left:0; width:100%; height:100%; background:#1e1e1e4d; z-index:0}
}

.main_img img {width:93% !important; margin:0 auto}