/* =========================================================
   search3.php 전용 스타일
   높이를 줄인 매장검색 카드
========================================================= */

/* 매장검색 페이지 전체 */
.storeSearchPage {
    width: 980px;
    margin: 0;
    padding: 0;

    color: #222222;
    font-family:
        "Malgun Gothic",
        "맑은 고딕",
        Arial,
        sans-serif;
}

.storeSearchPage * {
    box-sizing: border-box;
}

.storeSearchContent {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* =========================================================
   검색 카드 전체
========================================================= */

.storeSearchPanel {
    clear: both;

    width: 980px;
    height: auto;
    margin: 0;
    padding: 14px 18px;

    border: 1px solid #e3e7ed;
    border-radius: 7px;
    background: #ffffff;

    box-shadow: 0 4px 13px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   제목 영역
========================================================= */

.storeSearchHeading {
    display: flex;
    align-items: baseline;

    width: 100%;
    height: 29px;
    margin: 0 0 9px;
    padding: 0;

    gap: 10px;
}

.storeSearchHeading h2 {
    margin: 0;
    padding: 0;

    color: #111827;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: -0.9px;
    white-space: nowrap;
}

.storeSearchHeading p {
    margin: 0;
    padding: 0;

    color: #7a8492;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.6px;
    white-space: nowrap;
}

/* =========================================================
   전체 매장·단골 매장·일반 매장 탭
========================================================= */

.storeSearchTabs {
    display: flex;
    align-items: flex-end;

    width: 100%;
    height: 35px;
    margin: 0 0 9px;
    padding: 0;

    gap: 5px;

    border-bottom: 1px solid #e6e9ee;
}

.storeSearchTab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 35px;
    margin: 0 0 -1px;
    padding: 0 17px;

    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: #f5f7f9;

    color: #67717e;
    font-size: 15px;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: -0.6px;
    text-decoration: none;
    white-space: nowrap;
}

.storeSearchTab:hover {
    color: #dd1032;
}

.storeSearchTab.is-active {
    border-color: #dd1032;
    background: #dd1032;
    color: #ffffff;
}

/* =========================================================
   검색 폼과 검색 줄
========================================================= */

.storeSearchForm {
    width: 100%;
    margin: 0;
    padding: 0;
}

.storeSearchGrid {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0;
}

.storeSearchGridTop {
    margin: 0 0 8px;
}

.storeSearchGridBottom {
    margin: 0;
    padding: 9px 0 0;

    border-top: 1px solid #edf0f3;
}

/* =========================================================
   검색항목
   라벨과 입력창을 한 줄로 표시
========================================================= */

.storeField {
    display: flex;
    align-items: center;

    height: 40px;
    min-width: 0;
    margin: 0 13px 0 0;
    padding: 0;
}

.storeField > span {
    display: block;
    flex: 0 0 auto;

    height: 38px;
    margin: 0 8px 0 0;
    padding: 0;

    color: #303641;
    font-size: 15px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -0.6px;
    white-space: nowrap;
}

.storeField input {
    display: block;
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0 11px;

    border: 1px solid #d8dde5;
    border-radius: 6px;
    outline: none;
    background: #ffffff;

    color: #222b37;
    font-family:
        "Malgun Gothic",
        "맑은 고딕",
        Arial,
        sans-serif;
    font-size: 15px;
    line-height: 38px;
    letter-spacing: -0.5px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.storeField input::placeholder {
    color: #a1a8b2;
    opacity: 1;
}

.storeField input:hover {
    border-color: #b9c1cc;
}

.storeField input:focus {
    border-color: #dd1032;
    box-shadow: 0 0 0 3px rgba(221, 16, 50, 0.08);
}

/* =========================================================
   첫 번째 줄
   매장키워드·매장명·위치
========================================================= */

.storeSearchGridTop .storeField:nth-child(1) {
    width: 322px;
}

.storeSearchGridTop .storeField:nth-child(1) > span {
    width: 70px;
}

.storeSearchGridTop .storeField:nth-child(2) {
    width: 292px;
}

.storeSearchGridTop .storeField:nth-child(2) > span {
    width: 43px;
}

.storeSearchGridTop .storeField:nth-child(3) {
    flex: 1 1 auto;
    width: auto;
    margin-right: 0;
}

.storeSearchGridTop .storeField:nth-child(3) > span {
    width: 29px;
}

/* =========================================================
   두 번째 줄
   동·호·검색버튼
========================================================= */

.storeSearchGridBottom .storeField:nth-child(1) {
    width: 185px;
}

.storeSearchGridBottom .storeField:nth-child(1) > span {
    width: 15px;
}

.storeSearchGridBottom .storeField:nth-child(2) {
    width: 185px;
}

.storeSearchGridBottom .storeField:nth-child(2) > span {
    width: 15px;
}

/* 기존 클래스 너비 영향 제거 */
.storeFieldSmall {
    width: auto;
}

/* =========================================================
   검색 안내
   현재 PHP에서는 주석 처리되어 있음
========================================================= */

.storeSearchNotice {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0 4px;
}

.storeSearchNotice strong {
    color: #333333;
    font-size: 13px;
}

.storeSearchNotice span {
    margin-top: 3px;

    color: #8b929d;
    font-size: 15px;
    line-height: 1.4;
}

/* =========================================================
   매장검색·초기화 버튼
========================================================= */

.storeSearchActions {
    display: flex;
    flex: 0 0 222px;
    align-items: center;

    width: 222px;
    height: 40px;
    margin: 0 0 0 auto;
    padding: 0;

    white-space: nowrap;
}

.storeSearchBtn,
.storeResetBtn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 107px;
    height: 40px;
    margin: 0;
    padding: 0;

    border-radius: 7px;

    font-family:
        "Malgun Gothic",
        "맑은 고딕",
        Arial,
        sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -0.6px;
    text-decoration: none;

    cursor: pointer;
}

/* 매장 검색 버튼 */
.storeSearchBtn {
    margin-right: 8px;

    border: 1px solid #dd1032;
    background: #dd1032;
    color: #ffffff;

    box-shadow: 0 4px 10px rgba(221, 16, 50, 0.17);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.storeSearchBtn:hover {
    border-color: #c90d2b;
    background: #c90d2b;
    box-shadow: 0 6px 13px rgba(221, 16, 50, 0.22);
}

/* 검색 돋보기 아이콘 */
.storeSearchIcon {
    position: relative;
    display: block;

    width: 14px;
    height: 14px;
    margin: 0 8px 0 0;

    border: 2px solid #ffffff;
    border-radius: 50%;
}

.storeSearchIcon:after {
    content: "";
    position: absolute;

    right: -5px;
    bottom: -3px;

    width: 7px;
    height: 2px;

    border-radius: 2px;
    background: #ffffff;

    transform: rotate(45deg);
}

/* 초기화 버튼 */
.storeResetBtn {
    border: 1px solid #d8dde5;
    background: #ffffff;
    color: #4a5360;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

.storeResetBtn:hover {
    border-color: #adb5c0;
    background: #f8f9fb;
    color: #111827;
}

.storeResetBtn span {
    display: block;

    margin: 0 6px 0 0;

    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
}


.storeResultHeader{
	margin:18px 10px 25px 10px;}

.storeResultHeader > div{
	display:flex;
	align-items:center;
	gap:10px;}

.storeResultHeader h3{
	margin:0;
	font-size:13px;
	font-weight:700;
	color:#20242b;
	letter-spacing:-0.5px;}

	.storeResultHeader h3 strong{
	display: inline-flex;
    align-items: center;
    height: 27px;
    padding: 0 10px;
    border-radius: 7px;
    background: #fcecef;
    color: #dd1032;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.7px;
    white-space: nowrap;}

.storeResultHeader p{
	margin:0;
	font-size:13px;
	color:#7f8792;}

.storeResultHeader p strong{
	color:#dd1032;
	font-weight:700;}

.storeResultList{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	padding-top:8px;
}
.storeCard{
	position:relative;
	min-height:255px;
	padding:26px 16px;
	border:1px solid #dfe4eb;
	border-radius:10px;
	background:#fff;
	box-sizing:border-box;
	transition:transform .2s ease, box-shadow .2s ease;
	margin-top: 2px;
}
.storeCard:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 22px rgba(0,0,0,.07);
}

/* 첫 번째 줄 */
.storeCardTop{
	display:flex;
	align-items:flex-start;
	gap:16px;
}

/* 로고 */
.storeLogoBox{
	flex:0 0 132px;
	width:132px;
	height:100px;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	border:1px solid #e4e8ee;
	border-radius:8px;
	background:#fff;
	box-sizing:border-box;
}
.storeLogoBox a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}
.storeLogoBox img{
	display:block;
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
}
.storeNoLogo{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	font-size:18px;
	font-weight:700;
	color:#a0a7b1;
	background:#f6f7f9;
}

/* 매장명과 메모 */
.storeMainInfo{
	flex:1;
	min-width:0;
}

.storeCardTitleRow{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px;
	margin:0 0 8px;
}
.storeCardTitleRow h4{
	display: block;
    min-width: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #111827;
    font-weight: 600;
    letter-spacing: -.7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.storeCardTitleRow h4 a{
	color:#191c22;
	text-decoration:none;
}
.storeCardTitleRow h4 a:hover{
	color:#dd1032;
}
.storeBadges{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:4px;
}
.storeBadge{display:inline-flex;align-items:center;height:28px;padding:10px 10px;border-radius:4px;font-size:15px;font-weight:700;line-height:1;}
.badgeSale{background:#fff1c9;color:#b87500;}
.badgeBest{background:#e9f8e7;color:#198f28;}
.badgePremium{background:#ffe8ed;color:#d41438;}
.badgeHit{background:#efe9ff;color:#6843c7;}
.storeMemo{
	margin:0;
	font-size:15px;
	line-height:1.4;
	letter-spacing: -.7px;
	color:#555e69;
	word-break:keep-all;
}

/* 두 번째 줄 */
.storeCardBottom{
	margin-top:14px;
}
/* 키워드 */
.storeKeywordTags{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:0 0 13px;
}
.storeKeywordTags span{
	display: inline-flex;
    align-items: center;
    height: 27px;
    margin: 0 6px 6px 0;
    padding: 0 10px;
    border-radius: 7px;
    background: #eaf6f1;
    color: #2563eb;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.7px;
    white-space: nowrap;
}

/* 위치와 전화 */
.storeMeta{
	display:flex;
	flex-direction:column;
	gap:6px;
	padding-top: 12px;
	border-top: 1px dashed #e5e7eb;
}
.storeMeta p{
	display:flex;
	align-items:flex-start;
	margin:0;
	font-size:15px;
	line-height:1.4;
	letter-spacing: -.7px;
	color:#20242b;
	font-weight:700;
}
.storeMeta strong {
    flex: 0 0 38px;
    color: #737d89;
}
.storeMeta span{
	flex:1;
	min-width:0;
	word-break:keep-all;
	margin: 0 0 0 7px;
}

.storeEmpty{grid-column:1/-1;padding:70px 20px;text-align:center;background:#fff;border:1px solid #e1e5ea;border-radius:7px;}
.storeEmpty strong{display:block;font-size:18px;color:#333;}
.storeEmpty p{margin:8px 0 0;font-size:15px;color:#8a929e; line-height: 1.4;letter-spacing: -.7px;}
.storePaging{grid-column:1/-1;margin:24px 0 30px;text-align:center;}

@media(max-width:1000px){
  .storeSearchPage{width:auto;margin:14px 12px 0;}
  .storeSearchGridBottom{grid-template-columns:1fr 1fr;}
  .storeSearchNotice{grid-column:1/2;}
  .storeSearchActions{grid-column:2/3;justify-content:flex-end;}
}
@media(max-width:760px){
  .storeSearchHeading{display:block;}
  .storeSearchHeading p{margin-top:6px;}
  .storeSearchGridTop,.storeSearchGridBottom{grid-template-columns:1fr;}
  .storeSearchNotice,.storeSearchActions{grid-column:auto;}
  .storeSearchActions{justify-content:stretch;}
  .storeSearchBtn,.storeResetBtn{flex:1;}
  .storeResultList{grid-template-columns:1fr;}
}


/* =========================================================
   search2.php
   매장명 검색 전용 첫 번째 줄
   매장명 + 위치
========================================================= */

.storeSearchGridName .storeField:nth-child(1) {
    flex: 0 0 55%;
    width: 55%;
}

.storeSearchGridName .storeField:nth-child(1) > span {
    width: 55px;
}

.storeSearchGridName .storeField:nth-child(2) {
    flex: 1 1 auto;
    width: auto;
    margin-right: 0;
}

.storeSearchGridName .storeField:nth-child(2) > span {
    width: 43px;
}


/* 정상 매장은 카드 전체를 클릭할 수 있음을 시각적으로 표시 */
.storeCard--clickable {
    cursor: pointer;
}

/* 키보드 접근 시 포커스 표시 */
.storeCard--clickable:focus {
    outline: 2px solid #dd1032;
    outline-offset: 2px;
}