/* BASIC css start */
/* BASIC css start */
/* 매장안내 */
#storeWrap {
    --text-sm: .875rem; /* 14px */
    --text-xs: .813rem; /* 13px */
}
.h-full { height: 100%; }
.col-lg-4 { padding-right: 0; }
.col-lg-8 { padding-left: 0; }
.no-data { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 40px 0; font-size: var(--text-sm); }
.store-wrapper .content-body { margin-top: 40px; border: 1px solid var(--cw-color-30); }
.store-info-wrap { padding: 20px; border-right: 1px solid var(--cw-color-30); }
.store-search .search-box { position: relative; }
.store-search .search-box input { width: 100%; }
.store-search .search-box .btn-search { position: absolute; right: 12px; top: 8px; width: 24px; height: 24px; background: url(//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_search.svg) no-repeat right center / 24px 24px; } 
.store-count { padding: 16px 0; font-size: var(--text-sm); border-bottom: 1px solid var(--cw-color-30); }
.store-count strong { font-weight: 600; }
.store-list-wrap  { height: 778px; margin-right: -13px; padding-right: 7px; overflow-y: scroll; box-sizing: content-box; }
.store-list-wrap::-webkit-scrollbar { width: 6px; }
.store-list-wrap::-webkit-scrollbar-thumb { height: 50%; background: #7a7a7a; border-radius: 10px; }
.store-list-wrap::-webkit-scrollbar-track { background: var(--cw-color-white); }
.store-list-wrap .list-info { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--cw-color-30); font-size: var(--text-sm); cursor: pointer; }
.store-list-wrap .list-info > :not(.name) { margin-left: 32px; }
.store-list-wrap .list-info .name { display: flex; gap: 6px; align-items: center; font-size: 1rem; }
.store-list-wrap .list-info .ico-map { width: 24px; height: 24px; margin-right: 2px; background: url(//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_location_off.svg) no-repeat right center / 24px 24px; }
.store-list-wrap .list-info.selected .ico-map { background: url(//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_location_on.svg) no-repeat right center / 24px 24px; }
.store-list-wrap .list-info .icon { padding: 0 6px; line-height: 18px; font-size: .688rem; font-weight: 600; border: 1px solid var(--cw-heading-color); }
.store-list-wrap .list-info .icon.ico-wh { background: var(--cw-color-white); }
.store-list-wrap .list-info .icon.ico-bl { background: var(--cw-heading-color); color: var(--cw-color-white); } 
.store-list-wrap .list-info .tel { margin-top: 4px; padding-left: 22px; color: var(--cw-color-80); background: url(//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_store_tel.svg) no-repeat left center / 12px 12px; }
.store-list-wrap .list-info dl { display: flex; flex-wrap: wrap; color: var(--cw-color-80); }
.store-list-wrap .list-info dt { width: 82px; padding-left: 22px; font-weight: 400; }
.store-list-wrap .list-info dt.hours { background: url(//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_store_time.svg) no-repeat left center / 12px 12px; }
.store-list-wrap .list-info dl.active dd:first-of-type { padding-right: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M10.6663 1L5.99967 5.66667L1.33301 1' stroke='%23555555' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 7px / 12px 7px; }
.store-list-wrap .list-info dl.active.on dd:first-of-type { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1.33301 6L5.99967 1.33333L10.6663 6' stroke='%23555555' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 5px / 12px 7px; }
.store-list-wrap .list-info dd:not(:first-of-type) { display: none; width: 100%; margin-left: 82px; }
#map { width: 100%; height: 100vh !important; margin: 0 !important; }
.cw-btn-more { margin-top: 20px; }

/* 태블릿 */
@media (min-width: 768px) and (max-width: 991.98px) { 
    .page-title-wrap { margin-top: 40px; }
	.page-title-wrap h2 { display: none; }
    .col-lg-4 { padding-right: calc(var(--bs-gutter-x) * 0.5); }
    .col-lg-8 { padding-left: calc(var(--bs-gutter-x) * 0.5); }
    .order-1 { order: 1; }
    .order-2 { order: 2; }
    .store-wrapper .content-body { border: 0; }
    .store-info-wrap { padding: 0; border-right: 0; min-width: auto; }
    .store-list-wrap { height: 100%; margin-right: 0; padding: 0; }
    #map { height: 200px !important; margin: 0 0 16px !important; }
}

/* 모바일 */
@media (max-width: 767.98px) {
    .page-title-wrap { margin-top: 40px; }
	.page-title-wrap h2 { display: none; }
    .col-lg-4 { padding-right: calc(var(--bs-gutter-x) * 0.5); }
    .col-lg-8 { padding-left: calc(var(--bs-gutter-x) * 0.5); }
    .order-1 { order: 1; }
    .order-2 { order: 2; }
    .store-wrapper .content-body { border: 0; }
    .store-info-wrap { padding: 0; border-right: 0; min-width: auto; }
    .store-list-wrap { height: 100%; margin-right: 0; padding: 0; }
    #map { height: 200px !important; margin: 0 0 16px !important; }
    .cw-btn-more .btn { width: 100%; }
}


/* =========================================
   1. 공통 및 PC 기본 스타일 (Desktop First)
   ========================================= */
.pharmacy-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F7F7F7; /* 배경색 (필요에 따라 수정) */
  max-width: 100%;
  overflow: hidden;
  margin-top: 32px;
}

.banner-text-area {
  flex: 1;
  padding: 64px 56px;
  /* 텍스트 페이드인 애니메이션 */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.banner-title {
  font-size: 48px; /* 약 40px */
  font-weight: 700;
  color: #000;
  margin: 0 0 28px 0;
}

.banner-desc {
  font-size: 22px; /* 16px */
  line-height: 1.4;
  color: #505050;
  margin: 0;
}

.banner-image-area {
  flex: 1;
  max-width: 466px;
  display: flex;
  justify-content: flex-end;
}

.banner-image-area img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* =========================================
   2. 키프레임 애니메이션
   ========================================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} 

/* =========================================
   3. 모바일 레이아웃 (1024px 이하)
   ========================================= */
@media (max-width: 1024px) {
  .pharmacy-banner {
    flex-direction: column; /* 세로 배치 */
    padding: 16px 16px 40px;
    margin-top: 16px;
  }

  .banner-text-area {
    order: 2; /* 텍스트를 아래로 */
    padding: 28px 0 0 0;
    text-align: center; /* 텍스트 중앙 정렬 */
    animation-delay: 0.2s; /* 모바일에서는 이미지 다음으로 부드럽게 나오도록 딜레이 */
  }

  .banner-title {
    font-size: 18px; /* 모바일에 맞게 폰트 사이즈 축소 */
    margin-bottom: 8px;
  }

  /* 모바일에서는 "나와 가까운 약국찾기"가 한 줄로 나오도록 처리 */
  .pc-only {
    display: none;
  }

  .banner-desc {
    font-size: 12px; /* 14px */
    word-break: keep-all; /* 단어 단위로 줄바꿈 유지 */
  }

  .banner-image-area {
    order: 1; /* 이미지를 위로 */
    max-width: 100%;
    width: 100%;
    justify-content: center;
  }

  .banner-image-area img {
    /* 모바일 디자인에 있는 이미지 둥근 모서리 적용 */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 약간의 그림자 추가 (선택사항) */
  }
}
/* BASIC css end */


/* BASIC css end */