@charset "utf-8";
/* CSS Document */


#brandAll {}

#brandAll .brand_search { width:100%; }

#brandAll .brand_box {
    background: #f8f8f8; padding: 40px; border-radius: 20px; position: sticky; top: 136px; z-index: 999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); transition: all 0.4s ease;
}
#brandAll .brand_box.scroll-hidden {
    transform: translateY(-100%); opacity: 0; pointer-events: none;
}

/* 북마크 토글 버튼 */
.bookmark-toggle {
    position: fixed; top: 144px; right: calc((100vw - 1204px) / 2); z-index: 1000; cursor: pointer;
    opacity: 0; transform: translateY(-20px); transition: all 0.4s ease;
    pointer-events: none;
}
.bookmark-toggle.show {
    opacity: 1; transform: translateY(0); pointer-events: all;
}
.bookmark-toggle.active .bookmark-icon {
    background: #005bf1; color: #fff;
}

.bookmark-icon {
    width: 50px; height: 50px; background: #fff; border-radius: 25px;
    display: flex; align-items: center; justify-content: center; color: #555;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); transition: all 0.3s ease;
    position: relative; z-index: 2;
}
.bookmark-icon:hover {
    background: #005bf1; color: #fff; transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 91, 241, 0.3);
}
#brandAll .brand_box .brand_shr {display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 24px;}
#brandAll .brand_box .brand_shr input {width: 280px;}

#brandAll .brand_search .brand_word { display:block; width:938px; background-color:#FFF; padding:22px 0; margin:17px 20px ;}

#brandAll .brand_search .brand_word a { background-color:#f4f4f4; border:#d5d5d5 solid 1px; padding:5px 5px 0 5px; color:#6d6d6d; font-size:11px; margin:4px 3px }  
#brandAll .brand_search .brand_word a:hover,
#brandAll .brand_search .brand_word a:active,
#brandAll .brand_search .brand_word a:focus, 
#brandAll .brand_search .brand_word a.on { border:#333333 solid 1px; background-color:#6d6d6d; color:#FFF; text-decoration:none}

#brandAll .brand_search .brand_word .tit_kor { background:url(/img/brand/search_tit_kor.png) no-repeat 50px 5px; padding-left:208px; }
#brandAll .brand_search .brand_word .tit_eng { background:url(/img/brand/search_tit_eng.png) no-repeat 50px 5px; padding-left:208px; }

#brandAll .brand_search .brand_word_view {width: 100%; max-width: 1200px; margin: 48px auto 40px; display: flex;}
#brandAll .brand_search .brand_word_view p {
    width: 300px; font-family: 'PLBold'; font-size: 64px; line-height: 1; margin: 16px 0 0 0; padding: 0; color: #e0e3e7;
}

#brandAll .brand_search .brand_word_view .word-wrap {flex: 1; min-width: 0;}
#brandAll .brand_search .brand_word_view .word-wrap span { width: 100%; text-align: center;}
#brandAll .brand_search .brand_word_view .word-wrap span:first-child {
    height: 48px; overflow: hidden; border: 1px solid #e7e7e7; border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
#brandAll .brand_search .brand_word_view .word-wrap span:first-child.no-BRimg {font-family: 'Zen Kaku Gothic New', sans-serif;font-size: 13px;font-weight: 700;color: #111;}
#brandAll .brand_search .brand_word_view .word-wrap span:last-child {font-family: 'Zen Kaku Gothic New', sans-serif;font-size: 15px; font-weight: 500; line-height: 1.3; position: absolute; top: calc(100% + 8px);}
#brandAll .brand_search .brand_word_view .word-wrap span.letter-header {
    width: 100%;margin: 0 0 12px;background: #f8f8f8;color: #555;font-size: 19px;font-weight: 600;text-align: center;border: 0;border-radius: 8px;
    height: 40px;line-height: 40px;padding: 0;

}
#brandAll .brand_search .brand_word_view .word-wrap .brand-span-wrap {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 24px 16px; margin-bottom: 24px;}
#brandAll .brand_search .brand_word_view .word-wrap .brand-span-wrap .letter-header {grid-column: 1 / -1;}
#brandAll .brand_search .brand_word_view .word-wrap .brand-span-wrap .brand-link {min-width: 0;}


/* 브랜드 상세뷰 메인 */

#brandAll .brand_main_new {overflow: hidden; padding: 16px; border-radius: 20px; box-shadow: 0 0 16px rgba(0, 0, 0, .15); line-height: 0; display: flex; flex-direction: column; justify-content: space-between;}
#brandAll .brand_main_new .zim { width:215px; height:215px; border:0; margin:0; padding:0; }
#brandAll .brand_main_new .zim span  { display:inline-block; line-height:0; height:0; margin:0; padding:0;}
#brandAll .brand_main_new .zim .brand_img { width:215px; height:154px; line-height:154px; border:0;}
#brandAll .brand_main_new .zim .brand_img img { width:215px; height:154px; text-align:center;vertical-align:middle }
#brandAll .brand_main_new .brand_story_new { width:723px; margin:0 0 0 10px;}
#brandAll .brand_main_new .brand_story_new img { width:723px; height:215px; border-radius:8px; }
#brandAll .brand_main_new .brand_rank { display:inline-block; width:948px; height:auto; background:#fff; margin-top:10px; padding:0; }
#brandAll .brand_main_new .rankImg { position:relative; width:215px; height:85px; background:url(/img/brand/brand_preference.png); }
#brandAll .brand_main_new .rankImg ul {padding:0;}
#brandAll .brand_main_new .rankImg li { margin: 0; padding: 0px 3px; border : 0; }
#brandAll .brand_main_new .brand_rank .brand_bt { list-style:none; margin:0; padding:0; border:0; }
#brandAll .brand_main_new .brand_rank .brand_bt li { margin: 0; padding:4px 0 0 0; border : 0; }
#brandAll .brand_main_new .brand_ic { display:block; position:absolute; padding:0px; margin:-26px 0 0 311px; width:7px; height:4px; background:url(/img/brand/bt_ic.gif); z-index:99; border:0; }
#brandAll .brand_main_new .brand_ic2 { display:block; position:absolute; padding:0px; margin:-26px 0 0 104px; width:7px; height:4px; background:url(/img/brand/bt_ic2.gif); z-index:99; border:0; }

#brandAll .brand_main { width:100%; height:175px; border-bottom:#e2e2e2 solid 1px; border-top:#e2e2e2 solid 1px; }

#brandAll .brand_main .zim { width:195px; height:174px; border:#e9e9e9 solid 1px; text-align:center; }
#brandAll .brand_main .zim span  { display:inline-block; line-height:0; height:0}
#brandAll .brand_main .zim .brand_img { width:189px; height:131px; line-height:128px; border:#f7f7f7 solid 3px;text-align:center;}
#brandAll .brand_main .zim .brand_img img { width:171px; height:70px; text-align:center;vertical-align:middle }


#brandAll .brand_story1 { width:490px; margin:1px;}
#brandAll .brand_story img { width:490px; height:173px;}

#brandAll .brand_story2 { width:390px; margin-left:20px;}
#brandAll .brand_story2 p { padding:0px 0px 0 1px; line-height:18px; height:106px }

#brandAll .brand_story { width:270px; height:176px;  border-left:#e2e2e2 solid 1px;  padding:0px 10px;}

#brandAll .line_bar { width:100%; margin-top:20px; height:50px; background:url(/img/main/bg_customer.gif) repeat-x 0 0; }

#brandProduct {background: #f8f8f8; border-radius: 8px; border: 1px solid #dedede; overflow: hidden; margin-bottom: 24px;}
#brandProduct .CategoryList {width: 100%; list-style: none; padding: 12px 16px; display: flex; justify-content: flex-start;}
#brandProduct .CategoryList li { text-align: center; }
#brandProduct .CategoryList a {color: #555; font-size: 15px; font-weight: 600; line-height: 32px; display: block; padding: 0 12px; border-radius: 32px;}
#brandProduct .CategoryList a.select {color: #333; background: #eeeeee;}
.category-tab {background: #ffffff; padding: 12px 24px 12px; position: relative; width: calc(100% - 40px); margin: 0 auto 16px; border-radius: 8px;}
.category-tab .second-dpt > a {display: inline-block; padding: 0 16px 0 0;}
.category-tab .second-dpt.select > a {display: inline-block; text-decoration: underline;}

#brandProduct .brand_word_view { width:100%; background-color:#ecf0fe; padding-top:10px; padding-bottom:10px; padding-left:60px;  }
#brandProduct .brand_word_view span { width:150px; }
#brandProduct .brand_word_view span a { color:#707070; padding-left:20px; }

#customer {width: 100vw;}


/* 250610 브랜드 전체보기 페이지 수정 */
.sort-group {display: flex;flex-wrap: wrap;gap: 6px;justify-content: center;}
.sort-group a {background-color: #e0e3e7;border: none;padding: 6px 10px;font-size: 15px;border-radius: 4px;cursor: pointer;transition: text-decoration 0.2s;font-weight: 500;color: #69758b;}
.sort-group a.actdive,
.sort-group a:hover {background-color: #005bf1;color: #fff;}
.sort-group a.on {background-color: #69758b;color: #fff;}
.brand-span-wrap .brand-link {display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; position: relative; margin-bottom: 36px;}
.brand-thumbnail {text-align: center; height: 40px; max-width: 100%; object-fit: contain;}
.top_bsm_tit {display:inline-block;}

/* 브랜드 전체보기 반응형 */
@media (max-width: 1200px) {
    .bookmark-toggle {right: 16px;}
}

@media (max-width: 1024px) {
    /* 모바일: 헤더 고정 + overflow-x 로 sticky 불가 → 일반 흐름 배치 */
    #brandAll .brand_box {position: relative; top: auto; padding: 24px; border-radius: 16px;}
    #brandAll .brand_box.scroll-hidden {transform: none; opacity: 1; pointer-events: auto;}
    .bookmark-toggle {top: auto; bottom: 24px; right: 16px;}

    #brandAll .brand_search .brand_word_view {margin: 32px auto 24px;}
    #brandAll .brand_search .brand_word_view .word-wrap .brand-span-wrap {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px;}
}

@media (max-width: 768px) {
    #brandAll .brand_box {padding: 16px; border-radius: 12px;}
    #brandAll .brand_box .brand_shr {margin-bottom: 16px;}
    #brandAll .brand_box .brand_shr input {flex: 1; width: auto; min-width: 0;}
    #brandAll .brand_box .brand_shr button {flex-shrink: 0;}

    .sort-group {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;}
    .sort-group a {padding: 6px 0; font-size: 14px; text-align: center; white-space: nowrap;}

    #brandAll .brand_search .brand_word_view .word-wrap .brand-span-wrap {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; margin-bottom: 16px;}
    #brandAll .brand_search .brand_word_view .word-wrap span.letter-header {font-size: 16px; height: 36px; line-height: 36px; margin-bottom: 10px;}
    #brandAll .brand_search .brand_word_view .word-wrap span:first-child {height: 44px;}
    #brandAll .brand_search .brand_word_view .word-wrap span:first-child.no-BRimg {font-size: 12px; padding: 0 4px; word-break: break-all;}
    /* 브랜드명: 절대배치 해제(긴 이름 겹침 방지) */
    #brandAll .brand_search .brand_word_view .word-wrap .brand-link span:last-child {position: static; font-size: 13px; word-break: break-all;}
    .brand-span-wrap .brand-link {gap: 6px; margin-bottom: 16px;}
    .brand-thumbnail {height: 34px;}

    .bookmark-icon {width: 44px; height: 44px;}
}

@media (max-width: 480px) {
    .sort-group a {font-size: 12px;}
    #brandAll .brand_search .brand_word_view .word-wrap .brand-span-wrap {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

/* 브랜드 상세 페이지 (brandView.php → #wrap.brand-view) */
.brand-view .hint--top:after {margin-left: -120px;}
.brand-view .brand_main_new {display: block;}
.brand-view .brand_rank {height: auto; display: flex; justify-content: space-between; width: 100%; gap: 41px; background: #f8f8f8; border: 1px solid #dedede; border-width: 0 1px 1px 1px; border-radius: 0 0 8px 8px; padding: 20px; margin-bottom: 56px;}
.brand-view .brand_rank > div {flex: 1; position: relative;}
.brand-view .brand_rank > div:not(:last-child):after {content: ''; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 1px; height: 86%; background: #dedede;}
.brand-view .brand_top {text-align: right;}
.brand-view .brand_top img {display: none;}
.brand-view .top_bsm_tit {display: inline-block; padding: 25px 8px 0 0; font-size: 22px; letter-spacing: -0.05em; font-weight: 500; color: #666;}

/* Stats Items */
.brand-view .stats-item {display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex: 1; margin: 0; font-weight: bold; text-align: right;}
.brand-view .stats-item span:first-child {display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 6px; color: #888; font-weight: 600;}
.brand-view .stats-item span:last-child {font-size: 18px; font-weight: 700;}
.brand-view .stats-item .ltfont {display: block; padding: 10px 5px 0 5px; font-size: 16px; font-weight: 700;}
.brand-view .star-list {font-size: 0; line-height: 0;}
.brand-view .star-list li {line-height: 0;}
.brand-view .star-list li img {width: 16px; height: 16px;}

/* Zim Section */
.brand-view #brandAll .brand_main_new {box-shadow: none; border: 1px solid #dedede; border-radius: 8px 8px 0 0;}
.brand-view #brandAll .brand_main_new .zim {display: flex; flex-grow: 1; flex-direction: column; justify-content: center; box-sizing: border-box; text-align: center;}
.brand-view #brandAll .brand_main_new .zim .brand_img {display: block; width: auto; height: auto; margin-bottom: 24px; line-height: 1; font-size: 22px; font-family: "PLBold"; color: #111;}
.brand-view #brandAll .brand_main_new .zim .brand_img img {width: auto; height: auto;}
.brand-view #brandAll .brand_main_new .zim span {display: block; width: fit-content; height: auto; margin: 0 auto; padding: 0; line-height: 1;}

/* Rank & Story */
.brand-view #brandAll .brand_main_new .rankImg ul {display: inline-block; margin: 43px auto 0;}
.brand-view #brandAll .brand_main_new .brand_story_new {margin: 0 0 0 16px;}
.brand-view #brandAll .brand_main_new .brand_story_new img {border: 1px solid #dedede;}

/* Brand Sub Main */
.brand-view .brand_sub_main {width: 100%; position: relative; overflow: hidden; padding: 40px 0; margin: 0 0 56px 0; border: #dedede solid 1px; border-radius: 8px; text-align: center;}
.brand-view .brand_sub_main, .brand-view .brand_sub_main * {box-sizing: border-box;}
.brand-view .brand_sub_main .bsm_tit {margin: 0; font-size: 22px; font-family: 'PLBold';}
.brand-view .brand_sub_main .bsm_tit a {width: fit-content; margin: 0 auto;}
.brand-view .brand_sub_main .bsm_tit .bsm_tit_eng {margin-left: 3px; font-size: 20px; font-weight: normal; color: #666; font-family: 'Montserrat', sans-serif !important;}

/* 브랜드 상세 페이지 반응형 */
@media (max-width: 1024px) {
    .brand-view #brandAll .brand_main_new .zim {width: auto; height: auto; min-height: 180px; padding: 16px 8px;}
    .brand-view #brandAll .brand_main_new .brand_story_new {flex: 0 1 62%; width: auto; min-width: 0;}
    .brand-view #brandAll .brand_main_new .brand_story_new img {display: block; width: 100%; height: auto; aspect-ratio: 723 / 215; object-fit: cover;}

    .brand-view .brand_rank {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; margin-bottom: 40px;}
    .brand-view .brand_rank > div:nth-child(2n):after {display: none;}

    .brand-view .brand_sub_main {padding: 32px 16px; margin-bottom: 40px;}

    /* 1차 카테고리: 줄바꿈으로 전체 노출 */
    .brand-view #brandProduct .CategoryList {flex-wrap: wrap; gap: 4px;}
}

@media (max-width: 768px) {
    .brand-view #brandAll .brand_main_new {padding: 12px;}
    .brand-view #brandAll .brand_main_new .flex-row-spacer {flex-direction: column; align-items: stretch;}
    .brand-view #brandAll .brand_main_new .zim {min-height: 0; padding: 16px 0 20px;}
    .brand-view #brandAll .brand_main_new .zim .brand_img {margin-bottom: 16px; font-size: 20px; word-break: break-all;}
    .brand-view #brandAll .brand_main_new .brand_story_new {flex: none; width: 100%; margin: 0;}

    .brand-view .brand_rank {padding: 16px; gap: 12px 32px; margin-bottom: 32px;}
    .brand-view .brand_rank > div:after {display: none;}
    .brand-view .stats-item {gap: 8px;}
    .brand-view .stats-item span:first-child {font-size: 13px; text-align: left;}
    .brand-view .stats-item span:last-child {font-size: 16px;}
    .brand-view .star-list li img {width: 14px; height: 14px;}

    .brand-view .brand_sub_main {padding: 24px 16px; margin-bottom: 32px;}
    .brand-view .brand_sub_main .bsm_tit {font-size: 19px; word-break: break-all;}

    .brand-view #brandProduct .CategoryList {padding: 10px 12px;}
    .brand-view #brandProduct .CategoryList a {font-size: 14px; line-height: 30px; padding: 0 10px; white-space: nowrap;}
    .brand-view .category-tab {width: calc(100% - 24px); padding: 10px 16px; margin-bottom: 12px;}
    .brand-view .category-tab .second-dpt > a {padding: 4px 12px 4px 0; font-size: 14px;}
}

@media (max-width: 480px) {
    .brand-view .brand_rank {grid-template-columns: minmax(0, 1fr);}
}