@charset "utf-8";
/* ==========================================================================
   E가구나라 테마 (basic) - default.css
   원본 테마는 css가 비어있는 상태였습니다. 아래는 전체 신규 작성분입니다.
   - 색상/폭 등은 :root 변수로 모아두었으니 운영 시 이 값만 바꾸면 톤이 바뀝니다.
   - 게시판/콘텐츠/회원 등 내부 페이지는 각 스킨 폴더의 style.css가 따로 있어
     이 파일과 충돌하지 않습니다. 이 파일은 헤더/푸터/메인(홈) 전용입니다.
   ========================================================================== */

:root{
    --navy:        #1c2b45;
    --navy-dark:   #131f35;
    --navy-soft:   #33476a;
    --cream:       #f8f4ed;
    --cream-soft:  #f1e9da;
    --gold:        #b8895e;
    --gold-dark:   #9c7549;
    --line:        #e8e1d3;
    --text:        #2b2b2b;
    --text-soft:   #6b6b6b;
    --white:       #ffffff;
    --radius-lg:   16px;
    --radius-md:   10px;
    --radius-sm:   6px;
    --maxw:        1240px;
    --header-h:    88px;
}

/* ----------------------------- 리셋 / 기본 ----------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,fieldset{margin:0;padding:0}
body{
    font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    color:var(--text);
    background:var(--white);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    word-break:keep-all;
}
ul,ol{list-style:none}
img{max-width:100%;border:0;vertical-align:middle}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:0;cursor:pointer;color:inherit}
fieldset{border:0}
input,select,textarea{font-family:inherit;font-size:14px}
svg{display:block}
hr{display:none}

.sound_only{
    position:absolute !important;
    width:1px;height:1px;
    margin:-1px;padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
#skip_to_container a{
    position:absolute;left:0;top:-260px;
    width:100%;padding:14px 0;
    background:var(--navy);color:#fff;
    text-align:center;font-weight:600;
    z-index:9999;transition:top .2s;
}
#skip_to_container a:focus{top:0}

.inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.clearfix:after{content:"";display:block;clear:both}

/* =========================================================================
   상단 유틸리티 바 (#tnb) - 새 디자인에는 노출하지 않지만 기능은 유지
   ========================================================================= */
#tnb{display:none}

/* =========================================================================
   상단 광고 배너 - 화살표 탭으로 항상 열고/닫을 수 있음
   이미지 모드일 때는 이미지 원본 비율 그대로(크롭 없이) 가로폭에 맞춰 보여줍니다.
   (열고/닫는 애니메이션은 max-height를 이미지 실제 높이에 맞춰 JS가 계산합니다)
   ========================================================================= */
#top_banner_wrap{position:relative}
#top_banner{
    position:relative;
    background:var(--gold);color:#fff;
    overflow:hidden;
    max-height:240px; /* JS가 로드 전/이미지 로드 전 잠깐 보이는 기본값. 실제 높이는 JS가 다시 계산함 */
    transition:max-height .35s ease;
}
#top_banner.is-collapsed{max-height:0}
.top_banner_in{
    max-width:var(--maxw);margin:0 auto;padding:18px 24px;
    position:relative;display:flex;align-items:center;justify-content:center;
}
.top_banner_link{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    color:#fff;gap:4px;
}
/* 이미지 배너: 양옆 여백 없이 가로폭에 맞추되, 비율은 그대로 유지(크롭 없음) */
.top_banner_link--img{display:block;width:100%}
.top_banner_img{display:block;width:100%;height:auto}
.top_banner_link strong{font-size:17px;font-weight:800;letter-spacing:-.2px}
.top_banner_link span{font-size:13px;color:rgba(255,255,255,.85)}
#top_banner_close{
    position:absolute;right:24px;top:50%;transform:translateY(-50%);
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:16px;
    background:rgba(0,0,0,.28); /* 사진 위에서도 항상 잘 보이도록 기본 배경 추가 */
    z-index:2;
}
#top_banner_close:hover{background:rgba(0,0,0,.45)}

/* 항상 보이는 화살표 토글 탭 - 배너 하단(또는 접혔을 때는 맨 위) 경계에 붙어 있음 */
#top_banner_toggle{
    position:absolute;left:50%;top:100%;transform:translateX(-50%);
    width:46px;height:22px;
    background:var(--gold);border-radius:0 0 12px 12px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:12px;
    box-shadow:0 6px 12px rgba(0,0,0,.15);
    z-index:500; /* 헤더(#hd_wrapper, z-index:400)보다 높여서 배너를 닫아도 화살표 탭이 항상 보이게 함 */
}
#top_banner_toggle:hover{background:var(--gold-dark)}
#top_banner_toggle i{transition:transform .3s ease}
#top_banner.is-collapsed ~ #top_banner_toggle i{transform:rotate(180deg)}

/* =========================================================================
   헤더 (다크 네이비 #131f35)
   ========================================================================= */
#hd{position:relative;background:var(--navy-dark)}
#hd_h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

#hd_wrapper{
    background:var(--navy-dark);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.hd_inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 24px;
    min-height:var(--header-h);
    display:flex;
    align-items:center;
    gap:32px;
}

/* 로고 */
#logo .logo_link{display:flex;align-items:center}
#logo .logo_img{height:63px;width:auto;display:block}

/* 메인 메뉴 */
#gnb{flex:1}
#gnb .gnb_wrap{position:relative}
#gnb_1dul{display:flex;align-items:center;justify-content:center;gap:40px}
.gnb_1dli{position:relative}
.gnb_1da{
    display:inline-block;
    padding:32px 2px;
    font-size:15.5px;
    font-weight:500;
    color:rgba(255,255,255,.88);
    transition:color .15s;
}
.gnb_1dli:hover .gnb_1da,
.gnb_1dli:focus-within .gnb_1da{color:var(--gold)}
.gnb_1dli .bg{display:none}

/* 2단 드롭다운 (가독성을 위해 흰 배경 유지) */
.gnb_2dul{
    position:absolute;
    top:100%;left:50%;
    transform:translateX(-50%);
    min-width:170px;
    background:var(--white);
    border-radius:var(--radius-md);
    box-shadow:0 16px 32px rgba(0,0,0,.25);
    padding:10px 0;
    opacity:0;visibility:hidden;
    transition:opacity .15s ease, visibility .15s ease;
    z-index:60;
}
.gnb_1dli:hover .gnb_2dul,
.gnb_1dli:focus-within .gnb_2dul{opacity:1;visibility:visible}
.gnb_2dul_box{display:flex;flex-direction:column}
.gnb_2dli{white-space:nowrap}
.gnb_2da{display:block;padding:9px 20px;font-size:14px;color:var(--navy-soft)}
.gnb_2dli:hover .gnb_2da{background:var(--cream);color:var(--navy)}

.gnb_empty{font-size:13px;color:rgba(255,255,255,.6);padding:32px 0}

/* 전체메뉴 버튼(모바일 전용 노출) - 검색/사용자/제품안내 아이콘 다음(가장 오른쪽)에 위치 */
.hd_hamburger_wr{display:none}
.gnb_menu_btn{
    font-size:20px;color:#fff;padding:8px;
    display:flex;align-items:center;justify-content:center;
}

/* 전체메뉴 오버레이 (모바일, 흰 배경 유지) */
#gnb_all{
    position:fixed;top:0;right:-320px;
    width:300px;height:100%;
    background:var(--white);
    box-shadow:-8px 0 24px rgba(0,0,0,.15);
    padding:24px 20px;
    overflow-y:auto;
    z-index:1001;
    transition:right .25s ease;
    display:none;
}
#gnb_all.show,
#gnb_all[style*="block"]{right:0}
#gnb_all h2{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:18px}
.gnb_al_ul{display:flex;flex-direction:column;gap:2px}
.gnb_al_li{border-bottom:1px solid var(--line)}
.gnb_al_a{display:block;padding:13px 4px;font-size:15px;font-weight:600;color:var(--navy)}
.gnb_al_li ul{padding:0 0 10px 12px;display:flex;flex-direction:column;gap:4px}
.gnb_al_li ul a{display:block;padding:6px 4px;font-size:13.5px;color:var(--text-soft)}
.gnb_close_btn{position:absolute;top:18px;right:18px;font-size:18px;color:var(--navy)}
#gnb_all_bg{
    position:fixed;inset:0;background:rgba(15,20,35,.45);
    z-index:1000;display:none;
}

/* 검색 / 계정 / 장바구니 아이콘 */
.hd_utils_ul{display:flex;align-items:center;gap:20px}
.hd_icon_btn{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;
    font-size:18px;color:#fff;
}
.hd_search,.hd_account,.hd_cart{position:relative}

.hd_search_panel{
    position:absolute;top:calc(100% + 18px);right:-10px;
    width:300px;background:var(--white);
    border-radius:var(--radius-md);
    box-shadow:0 16px 36px rgba(20,25,40,.16);
    padding:18px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .15s, transform .15s, visibility .15s;
    z-index:80;
}
.hd_search_panel.on{opacity:1;visibility:visible;transform:translateY(0)}
#hd_sch{display:flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
#hd_sch input[type="text"]{flex:1;border:0;padding:10px 12px;font-size:13.5px;outline:none}
#hd_sch button{padding:0 14px;background:var(--navy);color:#fff;font-size:14px}

.hd_account_panel{
    position:absolute;top:calc(100% + 18px);right:-6px;
    min-width:130px;background:var(--white);
    border-radius:var(--radius-md);
    box-shadow:0 16px 36px rgba(20,25,40,.16);
    padding:8px 0;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .15s, transform .15s, visibility .15s;
    z-index:80;
}
.hd_account:hover .hd_account_panel,
.hd_account_panel.on{opacity:1;visibility:visible;transform:translateY(0)}
.hd_account_panel .hd_login li a{display:block;padding:9px 18px;font-size:13.5px;color:var(--navy-soft);white-space:nowrap}
.hd_account_panel .hd_login li a:hover{background:var(--cream);color:var(--navy)}

.hd_cart_count{
    position:absolute;top:-8px;right:-10px;
    min-width:16px;height:16px;padding:0 3px;
    border-radius:9px;background:var(--gold);
    color:#fff;font-size:10px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    line-height:1;
}

/* =========================================================================
   콘텐츠 영역 / 레이아웃
   ========================================================================= */
#wrapper{background:var(--white)}
#container_wr{
    max-width:var(--maxw);
    margin:40px auto;
    padding:0 24px;
    display:flex;
    gap:48px;
    align-items:flex-start;
}
#container{flex:1;min-width:0}
#aside{width:300px;flex-shrink:0}

#container_title{
    font-size:22px;font-weight:800;color:var(--navy);
    margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--navy);
}

/* =========================================================================
   공용 페이지 히어로 (서브페이지 상단 배너) - 모든 스킨에서 공용으로 사용
   ========================================================================= */
.page_hero{position:relative;padding:74px 0 64px;overflow:hidden}
.page_hero_in{position:relative;z-index:2}
.page_hero h1{font-size:32px;font-weight:800;color:var(--navy);line-height:1.35;margin:6px 0 16px}
.page_hero_desc{font-size:15px;line-height:1.75;color:#5a5a5a;max-width:540px}
.page_hero .breadcrumb{position:absolute;right:24px;bottom:18px;z-index:2;font-size:12.5px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.page_hero .breadcrumb a{color:#fff}

.page_hero--plain{background:var(--cream);padding:56px 0 40px}
.page_hero--plain h1{margin:0}

.page_hero--photo{background-size:cover;background-position:center;color:var(--navy)}
.page_hero--photo::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to right, rgba(250,246,239,.82) 0%, rgba(250,246,239,.55) 45%, rgba(250,246,239,.25) 75%);
    z-index:1;
}

.page_hero--dark{background-color:var(--navy-dark);background-size:cover;background-position:center;color:#fff;min-height:320px;display:flex;align-items:center}
.page_hero--dark::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to right, var(--navy-dark) 0%, var(--navy-dark) 32%, rgba(19,31,53,.74) 55%, rgba(19,31,53,.2) 80%);
    z-index:1;
}
.page_hero--dark .eyebrow{color:var(--gold)}
.page_hero--dark h1{color:#fff}
.page_hero--dark .page_hero_desc{color:rgba(255,255,255,.78)}

/* 홈(인덱스) 및 풀디자인 서브페이지(회사소개/매장안내/온라인상담/게시판)는 풀블리드 + 패딩 제거 */
body.index_page #container_wr,
body.full_page #container_wr{max-width:100%;margin:0;padding:0;display:block}
body.index_page #container,
body.full_page #container{padding:0}
body.index_page #aside,
body.full_page #aside,
body.no_aside_page #aside{display:none}

/* =========================================================================
   히어로 배너
   ========================================================================= */
.hero_wr{
    position:relative;
    width:100%;
    height:900px;
    overflow:hidden;
    background:var(--cream);
}
.hero_slides{position:relative;width:100%;height:100%}
.hero_slide{
    position:absolute;inset:0;
    opacity:0;visibility:hidden;
    transition:opacity 1.1s ease;
    overflow:hidden;
}
.hero_slide.is-active{opacity:1;visibility:visible;z-index:1}

/* 배경 이미지 레이어: 슬라이드가 활성화되는 동안 천천히 줌아웃되어
   "점점 멀어지는" 느낌을 줍니다. 텍스트(.hero_inner)에는 영향을 주지 않습니다. */
.hero_bg{
    position:absolute;inset:0;z-index:0;
    background-size:cover;background-position:center;
    transform:scale(1.15);
    transition:transform 0s;
}
.hero_bg--mobile{display:none}
.hero_slide.is-active .hero_bg{
    animation:heroZoomOut 6.5s ease-out forwards;
}
@keyframes heroZoomOut{
    from{transform:scale(1.15);}
    to{transform:scale(1.0);}
}

.hero_slide::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to right, rgba(250,246,239,.62) 0%, rgba(250,246,239,.30) 38%, rgba(250,246,239,0) 64%);
}
.hero_slide--no-text::before{display:none}
.hero_inner{
    position:relative;z-index:2;height:100%;
    max-width:var(--maxw);margin:0 auto;padding:0 24px;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.hero_tag{font-size:22px;font-weight:700;color:var(--navy);margin-bottom:6px;max-width:560px}
.hero_title{font-size:50px;font-weight:900;line-height:1.18;color:var(--navy);letter-spacing:-1px;margin-bottom:22px;max-width:560px}
.hero_desc{font-size:16px;line-height:1.75;color:#4d4d4d;margin-bottom:34px;max-width:480px}

.btn_dark,.btn_gold{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 26px;border-radius:var(--radius-sm);
    font-size:15px;font-weight:700;
    transition:background .2s, transform .2s;
}
.btn_dark{background:var(--navy);color:#fff}
.btn_dark:hover{background:var(--navy-dark)}
.btn_gold{background:var(--gold);color:#fff}
.btn_gold:hover{background:var(--gold-dark)}
.btn_dark i,.btn_gold i{font-size:13px}

.hero_dots{
    position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
    z-index:3;display:flex;gap:9px;
}
.hero_dot{
    width:8px;height:8px;border-radius:50%;
    background:rgba(28,43,69,.25);
    transition:all .2s;
}
.hero_dot.is-active{width:24px;border-radius:5px;background:var(--navy)}

.hero_title--brand{font-size:58px}
.hero_wr--simple{height:900px}

/* =========================================================================
   히어로 위로 겹치는 안내 아이콘 카드
   ========================================================================= */
.hero_feature_wr{position:relative;margin-top:-64px;z-index:5;padding:0 24px}
.hero_feature_wr .inner{padding:0}
.hero_feature_ul{
    background:var(--white);border-radius:var(--radius-lg);
    box-shadow:0 20px 50px rgba(20,25,40,.12);
    display:grid;grid-template-columns:repeat(4,1fr);
    padding:34px 10px;
}
.hero_feature_ul li{display:flex;align-items:flex-start;gap:14px;padding:0 26px}
.hero_feature_ul li:not(:first-child){border-left:1px solid var(--line)}
.hero_feature_ul i{font-size:26px;color:var(--gold);width:30px;margin-top:3px;text-align:center}
.hero_feature_ul strong{display:block;font-size:15px;color:var(--navy);margin-bottom:6px}
.hero_feature_ul p{font-size:12.5px;color:var(--text-soft);line-height:1.6}

/* =========================================================================
   제품 카테고리 (5칸, 이미지 카드 + 하단 라벨)
   ========================================================================= */
.prodcat_wr{padding:90px 0 96px;background:var(--white)}
.prodcat_head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px}
.prodcat_head h2{font-size:26px;font-weight:800;color:var(--navy)}
.prodcat_ul{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.prodcat_ul a{
    display:flex;flex-direction:column;
    border:1px solid var(--line);border-radius:var(--radius-md);
    overflow:hidden;background:var(--white);
    transition:box-shadow .25s, transform .25s;
}
.prodcat_ul a:hover{box-shadow:0 16px 30px rgba(20,25,40,.12);transform:translateY(-4px)}
.prodcat_img{display:block;width:100%;aspect-ratio:1/1;background-size:cover;background-position:center}
.prodcat_name{display:block;text-align:center;padding:16px 4px;font-size:14.5px;font-weight:700;color:var(--navy)}

/* =========================================================================
   풀블리드 브랜드 배너 (쇼룸/매장 외관)
   ========================================================================= */
.brand_banner_wr{
    position:relative;min-height:380px;display:flex;align-items:center;
    background-color:var(--navy-dark);background-size:cover;background-position:center;
    margin-bottom:96px;
}
.brand_banner_wr::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to right, var(--navy-dark) 0%, var(--navy-dark) 30%, rgba(19,31,53,.78) 50%, rgba(19,31,53,.25) 75%, rgba(19,31,53,0) 100%);
}
.brand_banner_in{position:relative;z-index:2;max-width:520px}
.brand_banner_tag{font-size:19px;font-weight:700;color:var(--gold);margin-bottom:8px}
.brand_banner_title{font-size:42px;font-weight:900;color:#fff;margin-bottom:18px;letter-spacing:-.5px}
.brand_banner_desc{font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.78)}

/* =========================================================================
   카테고리 아이콘
   ========================================================================= */
.cat_wr{background:var(--cream);padding:54px 0}
.cat_ul{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cat_ul li{flex:1;min-width:110px}
.cat_ul a{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:var(--navy)}
.cat_ico{
    width:64px;height:64px;border-radius:50%;
    background:var(--white);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(28,43,69,.07);
    transition:transform .2s, box-shadow .2s, background .2s;
}
.cat_ico svg{width:28px;height:28px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cat_ul a:hover .cat_ico{transform:translateY(-5px);box-shadow:0 10px 22px rgba(28,43,69,.16);background:var(--gold)}
.cat_ul a:hover .cat_ico svg{stroke:#fff}
.cat_name{font-size:14.5px;font-weight:500}

/* =========================================================================
   공간별 추천 가구 (컬렉션)
   ========================================================================= */
.collection_wr{padding:96px 0;background:var(--white)}
.collection_inner{display:flex;gap:60px;align-items:flex-start}
.collection_text{flex:0 0 290px}
.eyebrow{color:var(--gold);font-weight:800;font-size:13px;letter-spacing:2.5px;margin-bottom:14px}
.collection_text h2{font-size:30px;font-weight:800;color:var(--navy);line-height:1.35;margin-bottom:18px}
.eyebrow_bar{display:block;width:46px;height:3px;background:var(--gold);margin-bottom:28px;border-radius:2px}
.collection_text .desc{font-size:14.5px;line-height:1.85;color:var(--text-soft);margin-bottom:32px}
.link_more{
    display:inline-flex;align-items:center;gap:8px;
    font-size:14.5px;font-weight:700;color:var(--navy);
    border-bottom:1px solid var(--navy);padding-bottom:5px;
}
.link_more i{font-size:12px}

.collection_cards{flex:1;align-self:stretch;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.collection_cards li{
    position:relative;height:400px;border-radius:var(--radius-md);
    overflow:hidden;background-size:cover;background-position:center;
    background-color:var(--cream-soft);
    transition:box-shadow .25s;
}
.collection_cards li::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top, rgba(15,20,35,.62) 0%, rgba(15,20,35,0) 58%);
}
.collection_cards a{position:absolute;inset:0;display:block;z-index:2}
.collection_cards li:hover{box-shadow:0 18px 34px rgba(20,25,40,.18)}
.card_label{position:absolute;left:20px;bottom:20px;z-index:3;color:#fff;display:flex;flex-direction:column}
.card_label strong{font-size:19px;font-weight:700;letter-spacing:-.2px}
.card_label em{font-size:11px;font-style:normal;letter-spacing:.6px;opacity:.85;margin-top:3px}

/* =========================================================================
   쇼룸 방문 안내 배너
   ========================================================================= */
.showroom_wr{padding:0 24px;max-width:var(--maxw);margin:0 auto 96px}
.showroom_box{
    position:relative;min-height:340px;border-radius:var(--radius-lg);
    overflow:hidden;display:flex;align-items:center;
    background-color:var(--navy-dark);background-size:cover;background-position:right center;
}
.showroom_box::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to right, var(--navy-dark) 0%, var(--navy-dark) 38%, rgba(19,31,53,.82) 54%, rgba(19,31,53,.18) 76%, rgba(19,31,53,0) 100%);
    z-index:1;
}
.showroom_text{position:relative;z-index:2;max-width:480px;padding:54px 60px;color:#fff}
.showroom_tag{font-size:15px;color:rgba(255,255,255,.78);margin-bottom:10px}
.showroom_text h2{font-size:28px;font-weight:800;margin-bottom:14px;letter-spacing:-.3px}
.showroom_desc{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.75;margin-bottom:30px}

/* =========================================================================
   안내 아이콘 스트립
   ========================================================================= */
.feature_wr{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:42px 0}
.feature_ul{display:grid;grid-template-columns:repeat(4,1fr)}
.feature_ul li{display:flex;align-items:flex-start;gap:16px;padding:0 24px}
.feature_ul li:not(:first-child){border-left:1px solid var(--line)}
.feature_ul i{font-size:25px;color:var(--gold);width:28px;margin-top:3px;text-align:center}
.feature_ul strong{display:block;font-size:15px;color:var(--navy);margin-bottom:6px}
.feature_ul p{font-size:12.5px;color:var(--text-soft);line-height:1.65}

/* =========================================================================
   매장 안내 + 지도
   ========================================================================= */
.store_wr{padding:80px 0;background:var(--cream)}
.store_inner{display:grid;grid-template-columns:340px 1fr;gap:44px}
.store_info h2{font-size:24px;font-weight:800;color:var(--navy);margin-bottom:26px}
.store_list{display:flex;flex-direction:column;gap:15px;margin-bottom:32px}
.store_list li{display:flex;gap:12px;font-size:14px;color:#444;align-items:flex-start;line-height:1.6}
.store_list i{color:var(--gold);width:16px;margin-top:3px;text-align:center}

.store_map{position:relative;min-height:320px;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 10px 30px rgba(28,43,69,.08);background:#eaeaea}
.store_map_placeholder{position:absolute;inset:0;background-size:cover;background-position:center}
/* 카카오맵 약도(고정폭 640px) 위젯 - 컨테이너가 넓으면 가운데 정렬, 좁으면 가로 스크롤로 전체를 볼 수 있게 합니다
   (flex+justify-center는 좁은 화면에서 스크롤 시작 위치가 중간으로 밀리는 문제가 있어 margin:auto 방식 사용) */
.kakao_map_wr{width:100%;overflow-x:auto}
.kakao_map_wr > div{margin:0 auto}
.map_pin{position:absolute;left:42%;top:36%;display:flex;flex-direction:column;align-items:center}
.map_pin > i{font-size:32px;color:#df5446;filter:drop-shadow(0 4px 5px rgba(0,0,0,.25))}
.map_pin_box{
    margin-top:8px;background:var(--white);
    padding:13px 18px;border-radius:var(--radius-md);
    box-shadow:0 14px 28px rgba(20,25,40,.18);
    min-width:200px;text-align:left;
}
.map_pin_box strong{display:block;font-size:14px;color:var(--navy);margin-bottom:3px}
.map_pin_box span{display:block;font-size:12px;color:#666;line-height:1.5}

/* =========================================================================
   푸터
   ========================================================================= */
#ft{background:var(--navy-dark);color:rgba(255,255,255,.7);padding:56px 0 28px}
.ft_inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.ft_top{display:flex;justify-content:space-between;align-items:center;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:24px}
#ft_logo{display:flex;align-items:center}
#ft_logo .logo_img{height:51px;width:auto;display:block}

#ft_sns{display:flex;gap:10px}
#ft_sns a{
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);color:#fff;font-size:15px;
    transition:background .2s;
}
#ft_sns a:hover{background:var(--gold)}
.sns_blog{font-size:10px;font-weight:800;letter-spacing:.3px}

#ft_link_row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;flex-wrap:wrap}
#ft_link{margin-bottom:0}
#ft_link a{font-size:13px;color:rgba(255,255,255,.78);margin-right:24px}
#ft_link a:hover{color:#fff}

.ft_info{font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.5);margin-bottom:18px}
#ft_copy{font-size:12px;color:rgba(255,255,255,.4)}

/* 홈페이지 제작·광고 배지 - 블로그 줄 아래 구분선 다음, 기존 대비 3배 크기 */
#ft_credit_wr{flex-shrink:0}
#ft_credit{display:inline-flex;align-items:center;opacity:.85;transition:opacity .2s}
#ft_credit:hover{opacity:1}
.ft_credit_img{height:66px;width:auto;display:block}

#top_btn{
    position:fixed;right:30px;bottom:94px;z-index:99;
    width:46px;height:46px;border-radius:50%;
    background:var(--navy);color:#fff;font-size:16px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}
#top_btn:hover{background:var(--gold)}

/* =========================================================================
   하단 고정 빠른연결바 (전화상담 / 문자보내기 / 온라인문의)
   ========================================================================= */
body{padding-bottom:64px}
#bottom_fixed_bar{
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    display:flex;height:64px;
    box-shadow:0 -6px 20px rgba(0,0,0,.18);
}
.bf_item{
    flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
    color:#fff;text-decoration:none;
    font-size:16px;font-weight:700;
    transition:filter .15s;
}
.bf_item i{font-size:19px}
.bf_item:hover{filter:brightness(.92)}
.bf_item--call{background:#f5841f}
.bf_item--sms{background:#4caf50}
.bf_item--online{background:#cc66cc}

@media (max-width:480px){
    body{padding-bottom:56px}
    #bottom_fixed_bar{height:56px}
    .bf_item{gap:6px;font-size:13px}
    .bf_item i{font-size:16px}
    #top_btn{bottom:76px;right:18px;width:42px;height:42px}
}

/* =========================================================================
   내부 페이지(게시판 외) 최소 공통 스타일
   - 게시판/콘텐츠 등 각 스킨은 자체 style.css를 갖고 있어 이 영역과 분리되어 있습니다.
   ========================================================================= */
#container article h1{font-size:22px;font-weight:800;color:var(--navy);margin-bottom:20px}
#container table{width:100%;border-collapse:collapse}
#container input[type="text"],
#container input[type="password"],
#container input[type="email"],
#container textarea,
#container select{
    border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:10px 12px;font-size:14px;
}
#container .btn,
#container button.btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 18px;border-radius:var(--radius-sm);
    background:var(--navy);color:#fff;font-size:14px;font-weight:600;
}
#container .btn:hover{background:var(--navy-dark)}

/* =========================================================================
   반응형
   ========================================================================= */
@media (max-width:1080px){
    .collection_inner{flex-direction:column}
    .collection_text{flex:none;max-width:560px}
    .collection_cards{grid-template-columns:repeat(2,1fr)}
    .store_inner{grid-template-columns:1fr}
    .store_map{min-height:280px}
    .feature_ul{grid-template-columns:repeat(2,1fr);row-gap:24px}
    .feature_ul li:nth-child(3){border-left:none}
    .hero_feature_ul{grid-template-columns:repeat(2,1fr);row-gap:24px}
    .hero_feature_ul li:nth-child(3){border-left:none}
    .prodcat_ul{grid-template-columns:repeat(3,1fr)}
    .hero_title--brand{font-size:44px}
    .brand_banner_title{font-size:32px}
}

@media (max-width:880px){
    #gnb_1dul{display:none}
    .hd_hamburger_wr{display:flex;align-items:center}
    .hd_inner{gap:16px;min-height:96px}
    #logo .logo_img{height:60px}
    .gnb_menu_btn{font-size:28px;width:44px;height:44px}
    .hero_title{font-size:38px}
    .hero_tag{font-size:18px}
    .cat_ul{justify-content:flex-start}
    .cat_ul li{flex:0 0 31%}
    .showroom_text{padding:40px 32px}
}

@media (max-width:600px){
    .hd_inner{min-height:88px}
    #logo .logo_img{height:54px}
    .hero_wr{height:560px}
    .hero_title{font-size:30px}
    .hero_desc{font-size:14px}
    .collection_cards{grid-template-columns:1fr}
    .cat_ul li{flex:0 0 47%}
    .feature_ul{grid-template-columns:1fr}
    .feature_ul li{border-left:none !important;padding:0}
    .ft_top{flex-direction:column;align-items:flex-start;gap:16px}
    #ft_link_row{flex-direction:column;align-items:flex-start;gap:16px}
    #ft_link a{display:inline-block;margin-bottom:8px}
    .showroom_text{padding:32px 24px}
    .showroom_box{min-height:280px}
    #container_wr{flex-direction:column}
    #aside{width:100%}
    .hero_wr--simple{height:520px}
    .hero_title--brand{font-size:34px}
    .hero_feature_wr{margin-top:-40px}
    .hero_feature_ul{grid-template-columns:1fr;padding:20px}
    .hero_feature_ul li{border-left:none !important;padding:14px 4px;border-bottom:1px solid var(--line)}
    .hero_feature_ul li:last-child{border-bottom:none}
    .prodcat_ul{grid-template-columns:repeat(2,1fr)}
    .brand_banner_title{font-size:26px}
    .brand_banner_desc{font-size:13px}
    .top_banner_link strong{font-size:14px}
    .top_banner_link span{font-size:11px}
    .top_banner_in{padding:18px 50px}
    .hero_bg--desktop{display:none}
    .hero_bg--mobile{display:block}
    /* 제품안내/배송후기 게시판(갤러리형) - 관리자에서 설정한 줄당 사진수와 무관하게 모바일은 2열로 고정 */
    .gall_row .gall_li{width:50% !important}
}

/* =========================================================================
   페이지네이션 (게시판 목록 / 제품 목록 공용)
   ========================================================================= */
.pg_wrap{display:flex;justify-content:center;gap:6px;margin-top:30px}
.pg_wrap a,
.pg_wrap strong{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:34px;height:34px;border:1px solid var(--line);border-radius:7px;
    font-size:13px;color:var(--text-soft);
}
.pg_wrap strong.pg_current{background:var(--navy);color:#fff;font-weight:700;border-color:var(--navy)}
.pg_wrap a:hover{border-color:var(--navy);color:var(--navy);text-decoration:none}

/* =========================================================================
   제품안내 (정적 쇼케이스 페이지)
   ========================================================================= */
.prod_wr{padding:60px 24px 30px;max-width:1240px;margin:0 auto}
.prod_layout{display:grid;grid-template-columns:260px 1fr;gap:40px}

.prod_aside_box{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.prod_aside_box h3{font-size:14.5px;font-weight:800;color:var(--navy);margin-bottom:14px}
.prod_cate_ul{display:flex;flex-direction:column}
.prod_cate_ul a{
    display:flex;align-items:center;gap:8px;padding:9px 2px;
    font-size:13.5px;color:var(--text);
}
.prod_cate_ul a:hover{color:var(--navy);font-weight:600}
.prod_cate_ul i:first-child{color:var(--gold);width:16px}
.prod_cate_arrow{margin-left:auto;font-size:11px;color:#bbb}

.prod_chk_ul{display:flex;flex-direction:column;gap:10px}
.prod_chk_ul label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-soft)}

.prod_color_ul{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px}
.prod_color_ul li{display:flex;flex-direction:column;align-items:center;gap:6px}
.prod_color_dot{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);box-shadow:inset 0 0 0 2px #fff}
.prod_color_ul span{font-size:11px;color:var(--text-soft)}

.prod_aside_cta{background:var(--cream);border-radius:var(--radius-md);padding:22px}
.prod_aside_cta strong{display:block;font-size:14px;color:var(--navy);margin-bottom:8px}
.prod_aside_cta p{font-size:12px;color:var(--text-soft);line-height:1.6;margin-bottom:16px}

.prod_main_head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
.prod_main_head h2{font-size:20px;font-weight:800;color:var(--navy)}
.prod_count{font-size:13px;font-weight:400;color:var(--text-soft);margin-left:10px}
.prod_sort{border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:13px;color:var(--text-soft);background:#fff}

.prod_cat_quick{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:30px}
.prod_cat_quick a{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:16px 6px;border:1px solid var(--line);border-radius:var(--radius-md);
    text-align:center;
}
.prod_cat_quick a:hover{border-color:var(--navy);background:var(--cream)}
.prod_cat_quick strong{font-size:13px;color:var(--navy)}
.prod_cat_quick span{font-size:11px;color:var(--text-soft)}

.prod_grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:36px}
.prod_card{display:block;color:var(--text)}
.prod_thumb{
    position:relative;display:block;aspect-ratio:1/1;border-radius:var(--radius-md);
    background-size:cover;background-position:center;overflow:hidden;margin-bottom:12px;
}
.prod_badge{
    position:absolute;left:10px;top:10px;z-index:2;
    padding:4px 10px;border-radius:5px;font-size:10.5px;font-weight:800;color:#fff;
    letter-spacing:.3px;
}
.prod_badge--new{background:var(--navy)}
.prod_badge--best{background:var(--gold)}
.prod_badge--sale{background:#d9534f}
.prod_like{
    position:absolute;right:10px;top:10px;z-index:2;
    width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);
    display:flex;align-items:center;justify-content:center;color:#999;font-size:14px;
}
.prod_card:hover .prod_thumb{box-shadow:0 14px 28px rgba(20,25,40,.16)}
.prod_info{display:flex;flex-direction:column;gap:4px}
.prod_name{font-size:14px;font-weight:600;color:var(--text)}
.prod_card:hover .prod_name{color:var(--navy);text-decoration:underline}
.prod_opt{font-size:12px;color:var(--text-soft)}
.prod_price{font-size:15px;font-weight:800;color:var(--navy)}
.prod_old{font-size:12.5px;font-weight:400;color:#aaa;text-decoration:line-through;margin-right:6px}

@media (max-width:1080px){
    .prod_layout{grid-template-columns:1fr}
    .prod_aside{display:none}
    .prod_grid{grid-template-columns:repeat(3,1fr)}
    .prod_cat_quick{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
    .prod_grid{grid-template-columns:repeat(2,1fr)}
    .prod_cat_quick{grid-template-columns:repeat(2,1fr)}
    .prod_main_head{flex-direction:column;align-items:flex-start;gap:10px}
}

/* =========================================================================
   헤더 스크롤시 상단 고정
   (상단 배너의 부모(#hd)가 짧아서 순수 position:sticky로는 배너 높이만큼만
   고정되다 풀려버리므로, 스크롤 위치에 따라 JS로 고정 여부를 전환합니다)
   ========================================================================= */
#hd_wrapper{position:relative;z-index:400;transition:box-shadow .2s}
#hd_wrapper.is-sticky{
    position:fixed;top:0;left:0;right:0;
    box-shadow:0 4px 16px rgba(0,0,0,.18);
}
#hd_sticky_spacer{height:0}

/* =========================================================================
   댓글 영역 공용 스타일 (공지사항/Q&A/배송후기 게시판 공용)
   ========================================================================= */
.cmt_btn{
    display:flex;align-items:center;gap:8px;
    background:none;border:0;padding:14px 0;
    font-size:14px;color:var(--navy);font-weight:700;border-top:1px solid var(--line);
    width:100%;text-align:left;
}
.cmt_btn .total b{font-weight:700}

#bo_vc{margin-bottom:10px}
#bo_vc article{padding:20px 0;border-bottom:1px solid var(--line);position:relative}
#bo_vc .pf_img{float:left;margin-right:12px}
#bo_vc .pf_img img{border-radius:50%;width:42px;height:42px;display:block}
#bo_vc .cm_wrap{overflow:hidden}
#bo_vc header{margin-bottom:6px}
#bo_vc .bo_vc_hdinfo{font-size:11.5px;color:#aaa;margin-left:8px}
#bo_vc strong{font-size:13.5px;color:var(--navy);font-weight:700}
#bo_vc .cmt_contents{font-size:13.5px;color:var(--text);line-height:1.7;word-break:break-word}
#bo_vc .bo_vl_opt{position:absolute;top:18px;right:0}
#bo_vc .btn_cm_opt{color:#bbb;padding:4px 8px}
#bo_vc .bo_vc_act{
    position:absolute;top:100%;right:0;z-index:30;
    background:#fff;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.14);
    padding:6px 0;min-width:110px;display:none;
}
#bo_vc .bo_vc_act.show,
#bo_vc .bo_vc_act[style*="block"]{display:block}
#bo_vc .bo_vc_act a,
#bo_vc .bo_vc_act button{display:block;width:100%;text-align:left;padding:8px 16px;font-size:12.5px;color:var(--text-soft)}
#bo_vc .bo_vc_act a:hover,
#bo_vc .bo_vc_act button:hover{background:var(--cream);color:var(--navy)}
#bo_vc_empty{color:#999;text-align:center;padding:30px 0;font-size:13px}

#bo_vc_w{
    display:block;background:var(--cream);border-radius:var(--radius-md);
    padding:22px;margin-top:18px;
}
#bo_vc_w textarea{
    width:100%;min-height:80px;border:1px solid var(--line);border-radius:8px;
    padding:12px 14px;font-size:13.5px;background:#fff;resize:vertical;
}
.bo_vc_w_wr{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px}
.bo_vc_w_info{display:flex;gap:8px;flex-wrap:wrap}
.bo_vc_w_info .frm_input{width:140px;background:#fff}
.btn_confirm{display:flex;align-items:center;gap:12px}
.secret_cm{font-size:12.5px;color:var(--text-soft);display:flex;align-items:center;gap:6px}
.bo_vc_w .btn_submit,
#bo_vc_w .btn_submit{
    background:var(--navy);color:#fff;border:0;border-radius:8px;
    padding:10px 22px;font-size:13px;font-weight:700;
}
.bo_vc_w .btn_submit:hover,
#bo_vc_w .btn_submit:hover{background:var(--navy-dark)}

/* 체크박스 색상을 사이트 톤(네이비)에 맞춤 (그누보드 기본은 파란색) */
.chk_box input[type="checkbox"]:checked + label{color:var(--text)}
.chk_box input[type="checkbox"]:checked + label span{background-color:var(--navy) !important;border-color:var(--navy) !important}
.chk_box input[type="checkbox"] + label:hover{color:var(--navy)}

/* =========================================================================
   게시판 공용 디자인 시스템 (공지사항/Q&A/배송후기 공통)
   - 사진 히어로 없이, 제목+유틸링크 / 탭 / 검색 / 목록표 형태의
     깔끔한 라인 기반 게시판 레이아웃
   ========================================================================= */
.gb_wrap{max-width:1240px;margin:0 auto;padding:50px 24px 100px}

.gb_head_top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.gb_head_top--util{justify-content:flex-end}
.gb_head_top h1{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.3px}
.gb_head_desc{font-size:13px;color:var(--text-soft);margin-top:8px}
.gb_util{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-soft);white-space:nowrap;margin-top:6px}
.gb_util button{display:flex;align-items:center;gap:5px;color:var(--text-soft)}
.gb_util button:hover{color:var(--navy)}
.gb_util i{font-size:12px}
.gb_util .gb_util_sep{color:var(--line)}

.gb_divider{border:0;border-top:1px solid var(--line);margin:22px 0}
.gb_divider--strong{border-top:2px solid var(--text);margin:18px 0 0}

.gb_tabs{display:flex;gap:8px;flex-wrap:wrap;padding:22px 0 0;list-style:none}
.gb_tabs a{
    display:block;padding:13px 22px;border-radius:8px;
    background:var(--cream);color:var(--text-soft);
    font-size:14px;font-weight:600;text-align:center;white-space:nowrap;
}
.gb_tabs a:hover{background:var(--cream-soft);color:var(--navy)}
.gb_tabs a.bo_cate_on,
.gb_tabs a#bo_cate_on,
.gb_tabs #bo_cate_on{background:var(--navy) !important;color:#fff !important}

.gb_search_row{display:flex;justify-content:center;gap:8px;padding:26px 0;flex-wrap:wrap}
.gb_search_row select{border:1px solid var(--line);border-radius:7px;padding:11px 14px;font-size:13px;color:var(--text-soft);background:#fff}
.gb_search_row input[type="text"]{border:1px solid var(--line);border-radius:7px;padding:11px 16px;font-size:13px;width:280px}
.gb_search_row button.gb_search_btn{background:var(--navy);color:#fff;border-radius:7px;padding:0 28px;font-weight:700;font-size:13.5px}
.gb_search_row button.gb_search_btn:hover{background:var(--navy-dark)}

.gb_count{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-soft);padding:18px 0 16px}
.gb_count i{color:var(--gold)}
.gb_count strong{color:var(--navy);font-weight:700}

.gb_table_wrap{overflow-x:auto}
table.gb_table{width:100%;border-collapse:collapse;min-width:560px}

/* 묻고답하기 / 1:1문의 / 공지사항 - colgroup으로 지정한 폭이 내용 길이에 흔들리지 않도록 고정 */
.gb_qna .gb_table,
.gb_table--qa,
.gb_table--notice{table-layout:fixed}
.gb_qna .gb_table .td_subject,
.gb_table--qa .td_subject,
.gb_table--notice .td_subject,
.gb_qna .gb_table .td_cate,
.gb_table--qa .td_cate,
.gb_qna .gb_table .td_name,
.gb_table--qa .td_name,
.gb_table--notice .td_name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb_qna .gb_table .td_subject a,
.gb_table--qa .td_subject a,
.gb_table--notice .td_subject a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.gb_table thead th{
    border-bottom:2px solid var(--text);border-top:1px solid var(--line);
    padding:14px 10px;font-size:13.5px;font-weight:700;color:var(--text);
    text-align:center;background:none;
}
.gb_table thead th a{color:var(--text)}
.gb_table tbody td{border-bottom:1px solid var(--line);padding:15px 10px;font-size:13.5px;color:var(--text);text-align:center;vertical-align:middle}
.gb_table tbody tr:hover{background:var(--cream)}
.gb_table .td_subject{text-align:left}
.gb_table .td_subject a{color:var(--text)}
.gb_table .td_subject a:hover{color:var(--navy);text-decoration:underline}
.gb_table .notice_icon{display:inline-block;background:var(--gold);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:5px}
.gb_table .td_file img,
.gb_table .td_file i{font-size:18px;color:var(--gold)}
.gb_table .empty_row{padding:60px 0;color:#999}
.gb_table .new_icon{display:inline-block;margin-left:4px;background:var(--gold);color:#fff;font-size:9px;font-weight:800;border-radius:3px;padding:1px 4px;vertical-align:middle}
.gb_table .cnt_cmt{margin-left:4px;color:var(--gold);font-weight:700;font-size:12px}
.gb_cate_text{display:inline-block;font-size:12.5px;font-weight:700;color:var(--navy)}
.gb_status{display:inline-block;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700}
.gb_status--done{background:#e7f0ff;color:#2f6fe0}
.gb_status--wait{background:#fff2dd;color:#c98a1a}

/* 상단 검색/글쓰기 보조 행 (목록표 위, "총 N건" 줄과 한 행에) */
.gb_top_actions{display:flex;justify-content:flex-end;margin-bottom:12px}
.gb_top_actions .btn_dark,
.gb_top_actions .btn_gold{padding:11px 24px;font-size:13.5px}

/* 페이지네이션은 전역 .pg_wrap 스타일을 그대로 사용합니다 (위쪽 참고) */

/* 상세보기 - 표 형태 (제목/카테고리/파일 등 key-value row) */
.gb_view_table{width:100%;border-collapse:collapse;margin-top:6px}
.gb_view_table th{
    width:120px;background:var(--cream);border:1px solid var(--line);
    padding:15px 18px;font-size:13px;font-weight:700;color:var(--navy);text-align:left;white-space:nowrap;
}
.gb_view_table td{border:1px solid var(--line);padding:15px 18px;font-size:13.5px;color:var(--text);line-height:1.6}
.gb_view_table .gb_meta_row td{color:var(--text-soft);font-size:12.5px}
.gb_meta_row_inner{display:flex;flex-wrap:wrap;gap:20px}
.gb_meta_row_inner span strong{color:var(--text);font-weight:600;margin-right:4px}
.gb_view_table .gb_file_link{display:inline-flex;align-items:center;gap:8px;color:var(--text)}
.gb_view_table .gb_file_link i{color:var(--gold)}
.gb_view_table .gb_file_btn{margin-left:10px;border:1px solid var(--line);border-radius:6px;padding:5px 12px;font-size:12px;color:var(--text-soft)}
.gb_view_table .gb_file_btn:hover{border-color:var(--navy);color:var(--navy)}

.gb_view_content{padding:32px 4px;line-height:1.9;font-size:14.5px;color:var(--text);border-bottom:1px solid var(--line);min-height:80px}
.gb_view_content img{max-width:100%;height:auto;border-radius:8px}
.gb_view_gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:24px 4px;border-bottom:1px solid var(--line)}
.gb_view_gallery img{width:100%;border-radius:10px;display:block}

.gb_view_actions{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.gb_view_actions_left{display:flex;gap:8px}
.gb_btn_line{
    display:inline-flex;align-items:center;gap:6px;
    border:1px solid var(--line);border-radius:7px;
    padding:10px 22px;font-size:13.5px;color:var(--text);font-weight:600;
}
.gb_btn_line:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.gb_btn_line--dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.gb_btn_line--dark:hover{background:var(--navy-dark)}

.gb_nb{border-top:1px solid var(--text);margin-top:10px}
.gb_nb li{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:13px}
.gb_nb .nb_tit{color:var(--text-soft);white-space:nowrap;width:70px}
.gb_nb a{color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb_nb a:hover{color:var(--navy);text-decoration:underline}
.gb_nb .nb_date{color:#aaa;font-size:12px}

/* =========================================================================
   1:1문의 - 답변 카드 / 답변대기 안내 / 첨부파일 목록 / 연관문의 제목
   ========================================================================= */
.gb_answer_wr{
    margin-top:18px;padding:24px 26px;
    background:var(--cream);border-radius:var(--radius-md);
    border:1px solid var(--line);
}
.gb_answer_head{display:flex;align-items:center;gap:14px;margin-bottom:14px;position:relative}
.gb_answer_head h2{font-size:15px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:6px}
.gb_answer_head h2 i{color:var(--gold)}
.gb_answer_meta{font-size:12px;color:var(--text-soft)}
.gb_answer_opt{margin-left:auto;position:relative}
.gb_answer_subject{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:10px}
.gb_answer_wr .gb_view_content{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px;border-bottom:1px solid var(--line)}

.gb_answer_waiting{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:36px 0;color:var(--text-soft);text-align:center;
}
.gb_answer_waiting i{font-size:26px;color:var(--gold)}
.gb_answer_waiting p{font-size:13.5px}

.gb_file_ul{display:flex;flex-direction:column;gap:8px;padding:16px 4px;border-bottom:1px solid var(--line)}
.gb_file_link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:13px}
.gb_file_link i{color:var(--gold)}
.gb_file_link a{color:var(--text)}
.gb_file_link a:hover{color:var(--navy);text-decoration:underline}

.gb_rel_title{font-size:15px;font-weight:800;color:var(--navy);margin:26px 0 12px}

/* 1:1문의 작성폼 - 이메일/SMS 답변수신 체크 옵션 행 */
.gb_qa_recv_opts{display:flex;gap:24px;margin-top:-4px;flex-wrap:wrap}
.gb_qa_recv_opts .chk_box{display:inline-flex;align-items:center}
.gb_qa_recv_opts label{font-size:12.5px;color:var(--text-soft);padding-left:22px;cursor:pointer}

@media (max-width:760px){
    .gb_wrap{padding:30px 16px 70px}
    .gb_head_top{flex-direction:column}
    .gb_search_row input[type="text"]{width:auto;flex:1}
    .gb_view_table th{width:90px;padding:10px 12px;font-size:12px}
    .gb_view_table td{padding:10px 12px;font-size:13px}
    .gb_view_gallery{grid-template-columns:1fr}
    .gb_view_actions{flex-direction:column;align-items:stretch;gap:10px}
    .gb_answer_wr{padding:18px}
    .gb_answer_head{flex-wrap:wrap}
}

/* 폼 보조 설명 텍스트 (공용) */
.form_note{font-size:11.5px;color:#9a9a9a;margin-top:6px}

/* =========================================================================
   체크박스 공용 스타일 (.selec_chk + .chk_box label span 조합)
   글쓰기/게시판 목록/로그인 등 사이트 전역에서 동일하게 사용
   ========================================================================= */
.selec_chk{position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box{position:relative}
.chk_box label{position:relative;cursor:pointer;display:inline-flex;align-items:center}
.chk_box label span{
    display:inline-block;width:16px;height:16px;flex:0 0 16px;
    background:#fff;border:1px solid var(--line);border-radius:4px;
    margin-right:6px;position:relative;
}
.chk_box input[type="checkbox"]:checked + label span::after{
    content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* 로그인 폼 */
#mb_login{max-width:440px;margin:70px auto 110px;padding:0 24px}
#mb_login .mbskin_box{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    box-shadow:0 16px 40px rgba(20,25,40,.08);
    padding:44px 36px 36px;
}
#mb_login h1{font-size:0;line-height:0;height:0;overflow:hidden}
#mb_login .mb_log_cate{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px}
#mb_login .mb_log_cate h2{font-size:24px;font-weight:800;color:var(--navy)}
#mb_login .mb_log_cate .join{font-size:13px;color:var(--text-soft);text-decoration:underline}
#mb_login .mb_log_cate .join:hover{color:var(--navy)}

#login_fs{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
#login_fs .frm_input{
    width:100%;height:50px;padding:0 16px;
    border:1px solid var(--line);border-radius:var(--radius-sm);
    font-size:14.5px;color:var(--text);background:#fff;
    box-sizing:border-box;
}
#login_fs .frm_input:focus{border-color:var(--navy);outline:none}
#login_fs .btn_submit{
    height:52px;margin-top:4px;
    background:var(--navy);color:#fff;font-size:15px;font-weight:700;
    border-radius:var(--radius-sm);border:0;cursor:pointer;
    transition:background .2s;
}
#login_fs .btn_submit:hover{background:var(--navy-dark)}

#login_info{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12.5px}
#login_info .login_if_auto label{color:var(--text-soft);padding-left:22px}
#login_info .login_if_lpl a{color:var(--text-soft)}
#login_info .login_if_lpl a:hover{color:var(--navy);text-decoration:underline}

#mb_login_notmb,
#mb_login_od_wr{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    box-shadow:0 16px 40px rgba(20,25,40,.08);
    padding:32px 36px;margin-top:20px;
}
#mb_login_notmb h2,
#mb_login_od_wr h2{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:14px}
#mb_login_notmb p{font-size:13px;color:var(--text-soft);margin-bottom:14px}
#guest_privacy{max-height:160px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;font-size:12px;color:var(--text-soft);margin-bottom:14px}
#mb_login_od #od_id,
#mb_login_od #od_pwd{width:100%;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14px;box-sizing:border-box;margin-bottom:10px}
#mb_login_odinfo{font-size:12.5px;color:var(--text-soft);margin-top:14px;line-height:1.7}

@media (max-width:600px){
    #mb_login{margin:40px auto 70px}
    #mb_login .mbskin_box{padding:32px 22px 26px}
}