@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: #16a1fe;
  --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_view_wrap input::placeholder {
  color: var(--grey-500);
}
.brand_view_wrap input:focus::-webkit-input-placeholder,
.brand_view_wrap textarea:focus::-webkit-input-placeholder {
  color: transparent !important;
}

/* =========================================================
   버튼 : 공통 .btn_base + 용도별 클래스 조합 (예: class="btn_base list_btn")
   ========================================================= */
.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;
}

/* 링크 버튼 : 인스타그램 · 홈페이지 */
.link_btn {
  width: 6.25rem;
  height: var(--height-sm);
  border-radius: 0.5rem;
  color: var(--wh);
  font-size: 0.75rem;
}
.link_btn:hover {
  opacity: 0.85;
  color: var(--wh);
}
.link_btn img {
  width: 0.75rem;
  height: 0.75rem;
  object-fit: contain;
}
.link_btn .material-symbols-outlined {
  font-size: 0.88rem;
}
.link_btn.insta {
  background-color: var(--text-sub);
}
.link_btn.home {
  background-color: var(--text-strong);
}

/* 목록보기 CTA */
.list_btn {
  width: 20rem;
  height: var(--height-2xl);
  padding: 0;
  border-radius: 6.25rem;
  background-color: var(--point);
  color: var(--wh);
  font-size: 1.13rem;
}
.list_btn:hover {
  background-color: var(--point-strong);
  color: var(--wh);
}

/* 아이콘 버튼 : 이미지 슬라이드 화살표 — swiper 기본값을 덮기 위해 부모 스코프 유지 */
.img_slide_wrap .swiper-button {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 2rem;
  height: 2rem;
  margin-top: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: rgba(25, 25, 25, 0.5);
  color: var(--wh);
}
.img_slide_wrap .swiper-button::after {
  content: none;
}
.img_slide_wrap .swiper-button span {
  font-size: 1rem;
}
.img_slide_wrap .swiper-button-prev {
  left: var(--space-14);
  right: auto;
}
.img_slide_wrap .swiper-button-next {
  right: var(--space-14);
  left: auto;
}
.img_slide_wrap .swiper-button-lock {
  display: none;
}

/* 버튼 : 모바일 */
@media screen and (max-width: 760px) {
  .link_btn {
    width: 8.83rem;
    border-radius: 0.67rem;
    font-size: 1rem;
  }
  .link_btn img {
    width: 0.83rem;
    height: 0.83rem;
  }
  .link_btn .material-symbols-outlined {
    font-size: 1rem;
  }
  .list_btn {
    width: 100%;
    border-radius: 8.33rem;
    font-size: 1.5rem;
  }
}

/* =========================================================
   참가기업 상세 (Figma : company-detail)
   ========================================================= */
.view_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-100);
}
.detail_cont {
  display: flex;
  flex-direction: column;
  gap: var(--space-60);
  width: 100%;
}

/* 섹션 타이틀 앞 포인트 바 */
.bar {
  display: block;
  flex-shrink: 0;
  width: 0.38rem;
  height: 1.25rem;
  background-color: var(--point);
}

/* 기업 정보 박스 */
.company_info {
  display: flex;
  align-items: center;
  gap: var(--space-60);
  background-color: var(--bg-soft);
  border-radius: 0.63rem;
  padding: var(--space-40) var(--space-100);
}

/* 기업 정보 : 로고 카드 */
.company_card {
  flex: 0 0 20rem;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.company_card .logo_area {
  position: relative;
  width: 100%;
  padding-top: 87.5%;
  background-color: var(--wh);
  border: 1px solid var(--line);
  border-radius: 0.63rem;
  overflow: hidden;
}
.company_card .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;
}
.link_btns {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
}

/* 기업 정보 : 기업명 + 정보 */
.company_meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.company_name {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
  word-break: keep-all;
  margin: 0;
}
.company_meta .divider {
  width: 100%;
  height: 1px;
  background-color: var(--line);
}
.info_list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 0;
  margin: 0;
}
.info_list::after {
  content: none;
}
.info_row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}
.info_label {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-shrink: 0;
  min-height: var(--height-md);
}
.info_label .tit {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
  white-space: nowrap;
  margin: 0;
}
.info_tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}
.info_tags .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--height-md);
  padding: 0 var(--space-20);
  background-color: var(--wh);
  border: 1px solid var(--line);
  border-radius: 3.13rem;
  color: var(--text-sub);
  font-size: 1.13rem;
  font-weight: 500;
  line-height: 1.17;
  white-space: nowrap;
}

/* 기업 설명 */
.brand_desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 51rem;
}
.sec_tit {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.sec_tit .tit {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
  margin: 0;
}
.brand_desc .desc {
  font-size: 1.13rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-base);
  word-break: keep-all;
  margin: 0;
}

/* 기업 이미지 : PC 4장 나열 / 모바일 1장씩 슬라이드 (화살표는 버튼 블록 참고) */
.img_slide_wrap {
  position: relative;
  width: 100%;
}
.img_slide_wrap ul {
  margin: 0;
  padding: 0;
}
.img_slide_wrap li {
  list-style: none;
}
.img_slide .swiper-wrapper::after {
  content: none;
}
.img_slide .img {
  position: relative;
  width: 100%;
  padding-top: 87.5%;
  background-color: var(--bg-soft);
  border-radius: 1.25rem;
  overflow: hidden;
}
.img_slide .img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 1200px) {
  .company_info {
    gap: var(--space-40);
    padding: var(--space-40) var(--space-48);
  }
  .company_card {
    flex-basis: 16rem;
  }
}
@media screen and (max-width: 960px) {
  .company_info {
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
  }
  .company_card {
    flex: none;
    max-width: 20rem;
    width: 100%;
  }
  .company_meta {
    width: 100%;
  }
}
/* ---------- 모바일 (Figma : company-detail-mobile) ---------- */
@media screen and (max-width: 760px) {
  .view_wrap {
    gap: var(--space-32);
  }
  .detail_cont {
    gap: var(--space-32);
  }
  .bar {
    width: 0.33rem;
    height: 1.17rem;
  }

  /* 기업 정보 박스 */
  .company_info {
    gap: var(--space-32);
    padding: var(--space-20);
    border-radius: 0.83rem;
  }
  .company_card {
    max-width: none;
    gap: var(--space-12);
  }
  .company_card .logo_area {
    border-radius: 0.83rem;
  }
  .link_btns {
    gap: var(--space-12);
  }

  /* 기업명 + 정보 */
  .company_meta {
    gap: var(--space-20);
  }
  .company_name {
    font-size: 1.83rem;
  }
  .info_list {
    gap: var(--space-8);
  }
  .info_row {
    gap: var(--space-8);
  }
  .info_label {
    gap: var(--space-8);
  }
  .info_label .tit {
    font-size: 1.33rem;
  }
  .info_tags {
    gap: var(--space-8);
  }
  .info_tags .tag {
    padding: 0 var(--space-16);
    font-size: 1rem;
  }

  /* 기업 설명 */
  .brand_desc {
    gap: var(--space-8);
  }
  .sec_tit {
    gap: var(--space-8);
  }
  .sec_tit .tit {
    font-size: 1.33rem;
  }
  .brand_desc .desc {
    font-size: 1.5rem;
  }

  /* 기업 이미지 */
  .img_slide .img {
    border-radius: 1.67rem;
  }
}