@layer ua, reset, vendor, legacy, token, layout, component, variant, utility;
@layer component{
.total-search-site-body #contentArea #header{height: auto;padding: 15px;box-sizing: border-box}

}
@layer component{















.sub-content-wrap .left-sub-wrap {width: 160px;float: left;margin-right: 10px}





}
@layer legacy{
/* 220413 통합검색 페이지 관련 css 추가  */
.left-banner-box{position:absolute;left: auto;right: calc(100% + 10px);}
.right-banner-box{position:absolute;right: auto;left: calc(100% + 10px);}
.hori-banner-box{width:720px;height:90px}

}
.hori-banner-box{margin: 10px auto}
.search-width775{width: 775px}
@layer legacy{
.search-coupang-product{box-sizing:border-box}

}
.search-coupang-product{width:139px}
/* 검색 사이드바 best-content-wrap — 메인(379px) 기준이므로 100%로 override */
@layer component{
.total-search-site-body .best-content-wrap{width:100%;box-sizing:border-box}
}
/* === 검색 페이지 레이아웃 & 디자인 개선 (2026-04-20) === */
/* 사이드바 sticky 레이아웃 (float → flex 전환) */
@layer component{
.total-search-site-body .sub-content-wrap{display:flex;align-items:flex-start;justify-content:space-between;min-height:0}
.total-search-site-body .sub-content-wrap::after{display:none}

/* 우측 게시판 사이드바 box-sizing 보정 — 게시판 레이아웃은 bootstrap 전역 *{box-sizing:border-box}를 로드하지만 검색 레이아웃은 bootstrap 미로드라 동일 컴포넌트 높이가 어긋남 */


}

@layer component{
.total-search-site-body .sub-content-wrap .right-sub-wrap .banner-wrap .flexslider{margin-bottom: 0}
















.sub-content-wrap .left-sub-wrap + .left-con-wrap{width: 690px}

.sub-content-wrap .left-sub-wrap + .left-con-wrap + .right-sub-wrap{width: 300px}

.sub-content-wrap .left-sub-wrap + .left-con-wrap + .right-sub-wrap .login-all-wrap{width: 100%}

.sub-content-wrap .left-sub-wrap + .left-con-wrap + .right-sub-wrap .notice-wrap{width: 100%}

.total-search-site-body .sub-content-wrap .left-con-wrap.search-width775{float:none;flex:0 0 775px}

.total-search-site-body .sub-content-wrap .right-sub-wrap{float:none;flex:0 0 379px}

.total-search-site-body .sub-content-wrap .right-sub-wrap .login-all-wrap{width:100%;position:sticky;top:16px}








.right-sub-wrap *, .right-sub-wrap *:before, .right-sub-wrap *:after{box-sizing:border-box}

/* ===== 통합검색 신규 디자인 (tsch-) 2026-07 ===== */
/* 결과 헤더 */
.tsch-header{font-size:15px;color:var(--text-primary);margin:0 0 12px}
.tsch-header strong{font-weight:700}
.tsch-header__cnt{margin-left:4px;font-size:12px;color:var(--text-secondary)}
/* 쿠팡 AD 박스 */
.tsch-coupang{background:rgba(28,28,28,.6);border:1px solid var(--border-divider);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.tsch-coupang__top{display:flex;align-items:center;justify-content:space-between}
.tsch-coupang__ad{background:var(--qz-bg-soft-gray);color:var(--qz-text-on-bright-soft);font-size:10px;font-weight:600;padding:2px 4px;border-radius:5px}
.tsch-coupang__more{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-primary)}
.tsch-coupang__more-icon{width:12px;height:12px;transform:rotate(-90deg)}
.tsch-coupang__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tsch-coupang__item{cursor:pointer}
.tsch-coupang__thumb{height:110px;border-radius:5px;overflow:hidden}
.tsch-coupang__thumb .img-background-wrap{border-radius:5px}
.tsch-coupang__name{margin:8px 0 4px;font-size:14px;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tsch-coupang__price{font-size:14px;font-weight:600;color:var(--qz-accent-yellow);margin:0}
.tsch-coupang__rocket{display:inline-block;margin-top:4px;font-size:10px;color:var(--text-secondary)}
/* 그룹 탭 */
.tsch-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-bottom:16px}
.tsch-tabs__item a{display:flex;align-items:center;justify-content:center;height:30px;border-radius:5px;font-size:13px;font-weight:600;color:var(--text-secondary);background:transparent;transition:background .15s,color .15s}
.tsch-tabs__item a:hover{background:rgba(255,255,255,.05)}
.tsch-tabs__item.is-active a{background:var(--qz-bg-soft-gray);color:var(--qz-text-on-bright-soft)}
/* 검색바 공통 (상단 tsch-searchbar / 하단 페이징 카드 내 폼 공유) */
.tsch-searchbar{background:rgba(28,28,28,.6);border-radius:10px;padding:16px;margin-bottom:16px}
.tsch-searchbar__row{display:flex;align-items:center;justify-content:center;gap:8px}
.tsch-searchbar__select{width:102px;flex:0 0 auto}
.tsch-searchbar__select::after{background:var(--chevron-down-img) no-repeat 50% 50%;background-size:12px 12px;width:12px;height:12px;margin-top:-6px;transform:none}
.tsch-searchbar__select .custom-new-select{width:100%;height:36px;line-height:34px;padding:0 26px 0 10px;font-size:13px;color:var(--text-primary);background-color:var(--qz-bg-secondary);border:none;border-radius:5px}
.tsch-searchbar__input-wrap{width:190px;flex:0 0 auto}
.tsch-searchbar__input{width:100%;height:36px;border-radius:5px;background-color:var(--qz-bg-secondary);background-image:url(../images/common/ic_search_g.svg);background-repeat:no-repeat;background-position:10px 50%;background-size:16px 16px;border:none;padding:0 10px 0 34px;font-size:13px;color:var(--text-primary);box-sizing:border-box}
.tsch-searchbar__input::placeholder{color:var(--text-secondary)}
.tsch-searchbar__btn{width:60px;height:36px;flex:0 0 auto;border-radius:5px;background:var(--qz-bg-soft-gray);color:var(--qz-text-on-bright-soft);font-size:13px;border:none;cursor:pointer;padding: 0}
/* 결과 리스트 */
.tsch-list{margin-bottom:16px}
.tsch-list__row{padding:10px 16px;border-bottom:1px solid var(--border-divider);display:flex;align-items:center;gap:16px}
.tsch-list__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.tsch-list__title-row{display:flex;align-items:center;gap:4px;min-width:0}
.tsch-list__title{flex:0 1 auto;min-width:0;margin:0}
.tsch-list__title-link{display:block;font-size:16px;line-height:24px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsch-list a.tsch-list__title-link:visited{color:var(--text-secondary)}
.tsch-list__title-link em{background:#ffb600;color:var(--qz-text-on-bright-soft);font-weight:600;border-radius:2px;padding:2px 2px;font-style:normal}
.tsch-list__comment{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;font-size:12px;line-height:1;color:var(--qz-text-comment-count)}
.tsch-list__comment::before{content:'';display:inline-block;width:11px;height:11px;position:relative;top:-1px;background:currentColor;-webkit-mask:url(../images/common/ic_comment_stroke.svg) no-repeat center / 11px;mask:url(../images/common/ic_comment_stroke.svg) no-repeat center / 11px}
.tsch-list__comment.is-mine{color:var(--qz-accent-yellow)}
.tsch-list__comment.is-mine::before{-webkit-mask-image:url(../images/common/ic_comment_mine.svg);mask-image:url(../images/common/ic_comment_mine.svg);height:12px;-webkit-mask-size:11px 12px;mask-size:11px 12px;top:0}
.tsch-list__meta{display:flex;align-items:center;gap:4px;font-size:12px;line-height:14px;color:var(--text-secondary)}
.tsch-list__dot::after{content:'\B7';margin:0 2px;font-size:11px}
.tsch-list__board{font-size:11px;font-weight:600;color:var(--qz-text-subtle);letter-spacing:0.2px}
.tsch-list__author{display:flex;align-items:center;gap:4px;min-width:0}
.tsch-list__avatar{width:14px;height:14px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.tsch-list__nick{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
/* common.css .user-nick-text(block·130px 말줄임) 오버라이드 — 아바타+닉 가로 정렬 유지 */
.tsch-list__author.user-nick-wrap .user-nick-text{display:flex;align-items:center;gap:2px;max-width:none;overflow:visible}
.tsch-list__thumb{flex:0 0 auto;width:64px;height:48px}
.tsch-list__row .thumb-wrap.tsch-list__thumb .thumb-area{height:100%;display:block;position:relative;overflow:visible}
.tsch-list__row .thumb-wrap.tsch-list__thumb .thumb-area .img-background-wrap{border-radius:4px;border:1px solid var(--border-divider);background-size:cover;background-position:50% 50%}
.tsch-thumb-preview{display:none;position:fixed;z-index:1000;min-width:150px;max-width:300px;max-height:300px;object-fit:cover;background: var(--bg-surface);border:2px solid #FF9200;border-radius:6px;pointer-events:none}
.tsch-thumb-preview.is-active{display:block}
/* 검색결과 없음 */
.tsch-empty{padding:8px}
.tsch-empty__box{border:1px solid var(--border-divider);border-radius:10px;background:rgba(28,28,28,.6);text-align:center;padding:40px 24px}
.tsch-empty__title{color:var(--text-primary);font-size:15px;margin:0 0 8px}
.tsch-empty__desc{color:var(--text-secondary);line-height:1.8;margin:0}
.tsch-empty__period{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:5px 12px;border-radius:24px;font-size:12px;color:var(--text-secondary);border:1px solid var(--qz-border-card);background:transparent}
.tsch-empty__period b{color:var(--text-primary);font-weight:600}
.tsch-empty__period-dot{width:3px;height:3px;border-radius:50%;background:var(--text-secondary)}
.tsch-empty__nav-caption{margin:16px 0 0;font-size:12px;text-align:center;line-height:1.6;color:var(--text-secondary)}
.tsch-empty__nav-caption em{font-style:normal;font-weight:600;color:var(--qz-push-signal)}
/* 0건 화면은 페이지네이션 없이 검색바만 담아 aio-pc.css의 min-height:130px가 과한 여백이 된다 */
.aio-v2 .v2-pagination-card--nopager{min-height:0}
/* 라이트 테마 오버라이드 */
body.light-theme .tsch-header{color:#333}
body.light-theme .tsch-header__cnt{color:var(--qz-text-gray)}
body.light-theme .tsch-coupang{background: var(--bg-app);border-color:transparent}
/* v2 카드면 동조(#F7F7F7 무보더 외관) — 다크 1px 보더는 투명화로 치수 유지 */
body.light-theme .tsch-coupang__ad{background:var(--qz-bg-secondary);color:var(--qz-text-primary)}
body.light-theme .tsch-coupang__more{color:var(--qz-text-on-bright-soft)}
body.light-theme .tsch-coupang__more-icon{opacity:.7}
body.light-theme .tsch-coupang__name{color:var(--qz-text-on-bright-soft)}
body.light-theme .tsch-coupang__rocket{color:var(--qz-text-gray)}
body.light-theme .tsch-coupang__price{color:#a76a00}
body.light-theme .tsch-tabs__item a{color:var(--qz-text-gray)}
body.light-theme .tsch-tabs__item a:hover{background:rgba(0,0,0,.05)}
body.light-theme .tsch-tabs__item.is-active a{background:var(--qz-bg-secondary);color:var(--qz-text-primary)}
body.light-theme .tsch-searchbar{background: var(--bg-app)}
body.light-theme .tsch-searchbar__select .custom-new-select{background-color:#f1f3f5;color:var(--qz-text-on-bright-soft)}
body.light-theme .tsch-searchbar__input{background-color:#f1f3f5;color:var(--qz-text-on-bright-soft)}
body.light-theme .tsch-searchbar__input::placeholder{color:var(--qz-text-gray)}
body.light-theme .tsch-searchbar__btn{background:var(--qz-bg-secondary);color:var(--qz-text-primary)}
body.light-theme .tsch-list__row{border-bottom-color:var(--border-divider)}
body.light-theme .tsch-list__title-link{color:#333}
body.light-theme .tsch-list a.tsch-list__title-link:visited{color:var(--qz-text-gray)}
body.light-theme .tsch-list__comment.is-mine{color:var(--qz-accent-yellow)}
body.light-theme .tsch-list__meta{color:var(--qz-text-gray)}
body.light-theme .tsch-list__dot{color:var(--qz-text-gray)}
body.light-theme .tsch-list__board{color:var(--qz-text-placeholder)}
body.light-theme .tsch-list__nick{color:var(--qz-text-gray)}
body.light-theme .tsch-list__row .thumb-wrap.tsch-list__thumb .thumb-area .img-background-wrap{border-color:var(--border-divider)}
body.light-theme .tsch-thumb-preview{background:var(--qz-bg-light-panel)}
body.light-theme .tsch-empty__box{background: var(--bg-app);border-color:transparent}
body.light-theme .tsch-empty__title{color:var(--qz-text-on-bright-soft)}
body.light-theme .tsch-empty__desc{color:var(--qz-text-gray)}
/* 통합검색 정렬바 (정확도순/최신순/조회순) */
.tsch-sortbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px 0;border-bottom:1px solid var(--border-divider)}
.tsch-sortbar__count{margin:0;font-size:13px;color:var(--text-secondary)}
.tsch-sortbar__count strong{color:var(--text-primary);font-weight:700}
.tsch-sortbar__opts{display:flex;align-items:center;gap:12px}
.tsch-sortbar__opt{background:transparent;border:0;padding:0;font-size:13px;color:var(--text-secondary);cursor:pointer}
.tsch-sortbar__opt:focus-visible{outline:2px solid var(--interactive-tab-active);outline-offset:2px}
.tsch-sortbar__opt.is-active{color:var(--interactive-tab-active);font-weight:700}

/* 통합검색 로딩 오버레이 (Livewire 전환 중 표시) */
.tsch-results{position:relative}
.tsch-loading{display:none;position:absolute;inset:0;z-index:5;align-items:flex-start;justify-content:center;background:var(--bg-overlay);border-radius:8px}
.tsch-loading__spinner{width:32px;height:32px;border:3px solid var(--border-divider);border-top-color:var(--interactive-tab-active);border-radius:50%;animation:tsch-spin .7s linear infinite;position:sticky;top:calc(50vh - 16px)}
@keyframes tsch-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.tsch-loading__spinner{animation-duration:2s}}
/* 전체 오버레이 로더 — common.css 의 999 보다 위 */
.total-search-site-body .loader{z-index:99999}
/* 검색 사이드(오늘의 베스트 위젯)는 메인 복원(#888) 대상 밖 — 전역 댓글수 토큰으로 재적용 */
.right-sub-wrap .best-content-item .common-comments{color:var(--qz-text-comment-count)}
}