@charset "utf-8";

:root {
  --bk: #000;
  --wh: #fff;

  /* grey */
  --grey-50: #f6f6f6;
  --grey-100: #f4f4f4;
  --grey-200: #f1f1f1;
  --grey-300: #efefef;
  --grey-400: #dddddd;
  --grey-500: #aaaaaa;
  --grey-600: #999999;
  --grey-700: #666666;
  --grey-800: #333333;
  --grey-900: #191919;

  /* point color : 참가기업(사전등록 변수명과 동일) */
  --primary-50: #eef8ff;
  --primary-200: #c5e7ff;
  --primary-400: #000;
  --primary-700: #0c79df;

  /* 참가기업 : 용도별 토큰 */
  --text-strong: var(--grey-900);
  --text-base: var(--grey-800);
  --text-sub: var(--grey-700);
  --text-muted: var(--grey-600);
  --line: var(--grey-400);
  --bg-soft: var(--grey-50);
  --bg-chip: var(--grey-300);
  --point: var(--primary-400);
  --point-strong: var(--primary-700);
  --point-bg: var(--primary-200);
  --point-bg-soft: var(--primary-50);

  /* 여백 : 이름 = 실제 px (PC root 16px) */
  --space-2: 0.13rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-10: 0.63rem;
  --space-12: 0.75rem;
  --space-14: 0.88rem;
  --space-15: 0.94rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-60: 3.75rem;
  --space-80: 5rem;
  --space-100: 6.25rem;

  /* 높이 레벨 : PC 값 */
  --height-sm: 2.13rem;
  --height-md: 2.69rem;
  --height-lg: 3.75rem;
  --height-xl: 3.75rem;
  --height-2xl: 3.75rem;
}
@media screen and (max-width: 760px) {
  :root {
    /* 모바일 root 12px 기준 : 위와 동일한 px 값 유지 */
    --space-2: 0.17rem;
    --space-4: 0.33rem;
    --space-8: 0.67rem;
    --space-10: 0.83rem;
    --space-12: 1rem;
    --space-14: 1.17rem;
    --space-15: 1.25rem;
    --space-16: 1.33rem;
    --space-20: 1.67rem;
    --space-24: 2rem;
    --space-32: 2.67rem;
    --space-40: 3.33rem;
    --space-48: 4rem;
    --space-60: 5rem;
    --space-80: 6.67rem;
    --space-100: 8.33rem;

    --height-sm: 2.5rem;
    --height-md: 2.67rem;
    --height-lg: 4rem;
    --height-xl: 4.33rem;
    --height-2xl: 4.58rem;
  }
}

.guide {
  position: relative;
  max-width: 1400px;
  min-width: 280px;
  height: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 761px) {
  .mob_view {
    display: none !important;
  }
}
@media screen and (max-width: 760px) {
  .pc_view {
    display: none !important;
  }
}
.point_color01 {
  color: var(--point-strong);
}

/* input */
.brand_list_wrap input::placeholder {
  color: var(--grey-500);
}
.brand_list_wrap input:focus::-webkit-input-placeholder,
.brand_list_wrap textarea:focus::-webkit-input-placeholder {
  color: transparent !important;
}

/* =========================================================
   버튼 : 공통 .btn_base + 용도별 클래스 조합 (예: class="btn_base sch_submit")
   ========================================================= */
.btn_base {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

/* 검색 버튼 */
.sch_submit {
  width: 12.5rem;
  height: var(--height-lg);
  border-radius: 0.75rem;
  background-color: var(--text-strong);
  color: var(--wh);
  font-size: 1.13rem;
}
.sch_submit:hover {
  color: var(--wh);
}

/* 카테고리 선택 버튼 (모바일 : 하단 모달 열기) */
.cate_open_btn {
  position: relative;
  justify-content: flex-start;
  width: 100%;
  height: var(--height-lg);
  padding: 0 var(--space-15);
  background-color: var(--wh);
  border: 1px solid var(--line);
  border-radius: 0.67rem;
  color: var(--text-base);
  font-size: 1.33rem;
  font-weight: 500;
}
.cate_open_btn .arrow {
  position: absolute;
  top: 50%;
  right: var(--space-16);
  transform: translateY(-50%);
  font-size: 1.67rem;
  color: var(--text-muted);
}

/* 모달 액션 버튼 : 선택 초기화 · 적용 (모바일) */
.reset_btn,
.apply_btn {
  flex: 1;
  height: var(--height-xl);
  border-radius: 1rem;
  font-size: 1.33rem;
}
.reset_btn {
  background-color: var(--wh);
  border: 1px solid var(--line);
  color: var(--text-strong);
}
.apply_btn {
  background-color: var(--text-strong);
  color: var(--wh);
}

/* 아이콘 버튼 : 선택 칩 삭제 (모바일) */
.del_btn {
  width: 1.17rem;
  height: 1.17rem;
  border-radius: 50%;
  background-color: var(--point-bg);
}
.del_btn span {
  font-size: 1rem;
  color: var(--point-strong);
}

/* 버튼 : 모바일 */
@media screen and (max-width: 760px) {
  .sch_submit {
    width: 6rem;
    border-radius: 0.67rem;
    background-color: var(--text-base);
    font-size: 1.33rem;
  }
}

/* =========================================================
   참가기업 리스트 (Figma : company-list)
   ========================================================= */
.company_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-60);
}

/* 필터 + 검색 박스 */
.filter_section {
  display: flex;
  flex-direction: column;
}
.filter_search {
  background-color: var(--bg-soft);
  border-radius: 0.63rem;
  padding: var(--space-40) var(--space-100);
}
.filter_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}

/* 카테고리 : PC 는 인라인 탭 / 모바일은 하단 모달 */
.cate_wrap {
  width: 100%;
}
.cate_box {
  width: 100%;
}
.fusion-fullwidth .fusion-row {
  z-index: auto !important;
}
@media screen and (min-width: 761px) {
  .cate_wrap {
    display: block !important;
    opacity: 1 !important;
  }
  .cate_box {
    bottom: auto !important;
  }
}

/* 카테고리 탭 : 개수가 늘어나면 자동 줄바꿈 */
.cate_tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  width: 100%;
}
.cate_tabs input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.cate_tabs label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--height-md);
  padding: 0 var(--space-20);
  border: 1px solid var(--line);
  border-radius: 3.13rem;
  background-color: var(--wh);
  color: var(--text-sub);
  font-size: 1.13rem;
  font-weight: 600;
  line-height: 1.17;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.cate_tabs label:hover {
  border-color: var(--point);
  color: var(--point);
}
.cate_tabs input[type='checkbox']:checked + label {
  background-color: var(--point);
  border-color: var(--point);
  color: var(--wh);
}
.cate_tabs input[type='checkbox']:focus-visible + label {
  outline: 2px solid var(--point-strong);
  outline-offset: 2px;
}

/* 구분선 */
.filter_wrap .divider {
  width: 100%;
  height: 1px;
  background-color: var(--line);
}

/* 검색바 */
.sch_bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: stretch;
  gap: var(--space-20);
  width: 100%;
}
.sch_bar .sch_field,
.sch_bar .sch_submit {
  position: relative;
  z-index: 2;
}
.sch_bar .sch_field {
  position: relative;
  flex: 1;
  min-width: 0;
}
.sch_bar .sch_field .material-symbols-outlined {
  position: absolute;
  top: 50%;
  left: var(--space-20);
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--text-muted);
  pointer-events: none;
}
.sch_bar input {
  width: 100%;
  height: var(--height-lg);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: var(--wh);
  padding: 0 var(--space-20) 0 var(--space-48);
  font-size: 1.13rem;
  color: var(--text-strong);
}
.sch_bar input:focus {
  border-color: var(--point);
}

/* 모바일 : 선택된 카테고리 (모달 선택 시 실시간 반영) */
.sel_cate_wrap {
  position: relative;
  display: none;
  width: 100%;
}
.sel_cate_wrap.on {
  display: block;
}
.sel_cate_wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-24);
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--wh) 60%);
  pointer-events: none;
}
.sel_cate_scroll {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  overflow-x: auto;
  padding-right: var(--space-24);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sel_cate_scroll::-webkit-scrollbar {
  display: none;
}
.sel_count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  color: var(--point-strong);
  font-size: 1rem;
  font-weight: 700;
}
.sel_count .material-symbols-outlined {
  font-size: 1.33rem;
}
.sel_cate_list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}
.sel_cate_list::after {
  content: none;
}
.sel_cate_list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  height: var(--height-md);
  padding: 0 var(--space-16);
  background-color: var(--point-bg-soft);
  border: 1px solid var(--point);
  border-radius: 4.17rem;
  color: var(--point-strong);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* 결과 헤더 */
.result_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.result_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
}
.result_head .total {
  color: var(--text-base);
  font-weight: 400;
  margin: 0;
}
.result_head .total b {
  color: var(--text-strong);
  font-weight: 700;
  margin: 0;
}
.result_head .notice {
  font-size: max(0.88rem, 12px);
  font-weight: 300;
  color: var(--text-muted);
  margin: 0;
}

/* 기업 카드 리스트 */
.company_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-40);
  row-gap: var(--space-60);
  margin: 0;
  padding: 0;
}
.company_list::after {
  content: none;
}
.company_list li {
  list-style: none;
}
.company_list a {
  display: block;
  text-decoration: none;
}
.company_list .logo_area {
  position: relative;
  width: 100%;
  padding-top: 87.5%;
  background-color: var(--wh);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.2s;
}
.company_list .logo_area img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 88%;
  max-height: 78%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.company_list .name {
  margin-top: var(--space-20);
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
  text-align: center;
  word-break: keep-all;
}
.company_list a:hover .logo_area {
  border-color: var(--point);
}
.company_list a:hover .name {
  color: var(--point-strong);
}

.company_list li.empty {
  grid-column: 1 / -1;
  padding: var(--space-80) 0;
  text-align: center;
  color: var(--text-muted);
}

@media screen and (max-width: 1200px) {
  .filter_search {
    padding: var(--space-40) var(--space-48);
  }
  .company_list {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ---------- 모바일 (Figma : company-list-mobile) ---------- */
@media screen and (max-width: 760px) {
  .company_wrap {
    gap: var(--space-32);
  }
  .filter_section {
    gap: var(--space-16);
  }

  /* 필터 + 검색 */
  .filter_search {
    padding: var(--space-20) var(--space-15);
    border-radius: 0.33rem;
  }
  .filter_wrap {
    align-items: stretch;
    gap: var(--space-12);
  }

  /* 검색바 */
  .sch_bar {
    gap: var(--space-8);
  }
  .sch_bar .sch_field .material-symbols-outlined {
    left: var(--space-16);
  }
  .sch_bar input {
    border-radius: 0.67rem;
    padding: 0 var(--space-16) 0 var(--space-40);
    font-size: 1.33rem;
  }

  /* 카테고리 : 하단 모달 */
  .cate_wrap {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    min-width: 280px;
    background-color: rgba(25, 25, 25, 0.5);
  }
  .cate_box {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    padding: var(--space-32) var(--space-15);
    background-color: var(--wh);
    border-radius: 1.67rem 1.67rem 0 0;
  }
  .cate_head {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
    padding-bottom: var(--space-20);
    border-bottom: 1px solid var(--line);
  }
  .cate_head .tit {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-strong);
    margin: 0;
  }
  .cate_head .desc {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-sub);
    margin: 0;
  }
  .cate_tabs {
    justify-content: flex-start;
    gap: var(--space-8);
    padding: var(--space-20) 0;
  }
  .cate_tabs label {
    font-size: 1rem;
    padding: 0 var(--space-16);
    border-radius: 4.17rem;
  }
  .cate_actions {
    display: flex;
    gap: var(--space-8);
    padding-top: var(--space-20);
    border-top: 1px solid var(--line);
  }

  /* 결과 */
  .result_head {
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
  }
  .result_head .total {
    font-size: 1rem;
    margin: 0;
  }
  .result_head .notice {
    flex-shrink: 0;
    text-align: right;
    margin: 0;
  }

  /* 카드 : 2열 */
  .company_list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-12);
    row-gap: var(--space-15);
    margin: 0;
    padding: 0;
  }
  .company_list .logo_area {
    border-radius: 1rem;
  }
  .company_list .name {
    margin-top: var(--space-10);
    font-size: 1.17rem;
  }
}

[v-cloak] {
  display: none;
}

.brand_list_wrap,
.brand_view_wrap {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
}

.sch_close_btn {
  position: absolute;
  top: 50%;
  right: var(--space-16);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.sch_close_btn .material-symbols-outlined {
  position: static !important;
  transform: none !important;
  color: var(--text-muted);
  pointer-events: auto !important;
}

.recent_sch_wrap {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 0;
  z-index: 3;
  width: calc(100% - 13.75rem);
  padding: var(--space-20);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: var(--wh);
}

.recent_sch_mask {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: rgba(25, 25, 25, 0.5);
}

.recent_sch_wrap .head,
.recent_sch_list,
.recent_sch_list li {
  display: flex;
  align-items: center;
}

.recent_sch_wrap .head {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.recent_sch_wrap .head p,
.recent_sch_list {
  margin: 0;
}

.recent_sch_wrap button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.recent_sch_list {
  position: relative;
  z-index: 1;
  gap: var(--space-8);
}

.recent_sch_list li {
  width: auto;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-12);
  border-radius: 3rem;
  background-color: var(--bg-soft);
  white-space: nowrap;
}

.recent_sch_list li.empty {
  width: 100%;
  justify-content: center;
  color: var(--text-muted);
}

.recent_sch_list .material-symbols-outlined {
  font-size: 1rem;
  color: var(--text-muted);
}

.company_list .cate {
  margin: var(--space-8) 0 0;
  color: var(--text-sub);
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
}

.pagination,
.pagination > ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination {
  width: 100%;
  padding-top: var(--space-20);
}

.pagination > ul {
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}

.pagination li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  color: var(--text-muted);
  cursor: pointer;
}

.pagination li.now {
  background-color: var(--point-bg-soft);
  color: var(--point-strong);
  font-weight: 700;
}

@media screen and (max-width: 760px) {
  .sch_bar.on .recent_sch_wrap,
  .sch_bar.on .recent_sch_mask {
    display: block;
  }

  .recent_sch_wrap {
    width: calc(100% - 6.67rem);
  }

  .pagination {
    display: none;
  }
}