@charset "utf-8";

/*
 * 수정 금지. 추가만 허용.
 * 이벤트별 스타일은 style.css에 작성.
 */

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2")
    format("woff2");
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2")
    format("woff2");
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2")
    format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2")
    format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2")
    format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR", sans-serif;
  src: url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");
  font-optical-sizing: auto;
  font-style: normal;
}

/* ── reset ── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Pretendard";
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  background: none;
  border: none;
  cursor: pointer;
}
body {
  -webkit-text-size-adjust: 100%;
}

/* ── layout ── */
.blind {
  position: absolute;
  left: -9999px;
}
.wrap {
  width: 1280px;
  margin: 0 auto;
}
.pc_con {
  display: block;
}
.t_con {
  display: none;
}
.m_con {
  display: none;
}

/* ── flex 유틸리티 ── */
.flex_wrap {
  display: flex;
}
.f_dc {
  display: flex;
  flex-direction: column;
}
.fd_c {
  flex-direction: column;
}
.fd_cr {
  flex-direction: column-reverse;
}
.ai_c {
  align-items: center;
}
.jc_c {
  justify-content: center;
}
.jc_sb {
  justify-content: space-between;
}

/* ── 아이콘 베이스 (i 태그) ── */
i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── 점 리스트 ── */
.dot_list > li {
  position: relative;
  padding-left: 14px;
  line-height: 1.7;
  word-break: keep-all;
}
.dot_list > li::before {
  position: absolute;
  left: 0;
  content: "·";
}

.dotL_list > li {
  position: relative;
  left: 16px;
  width: calc(100% - 16px);
}
.dotL_list > li::before {
  position: absolute;
  content: "";
  top: 12px;
  left: -12px;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: #000;
}

.list_dot > li {
  position: relative;
  padding-left: 12px;
}
.list_dot > li::before {
  position: absolute;
  left: 0;
  content: "·";
}

/* ── 인터랙션 (스크롤 진입 애니메이션) ── */
.interactive section {
  opacity: 0;
  transition: 0.5s;
}
.interactive section.is-active {
  opacity: 1;
}
.interactive section .wrap > * {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: 0.5s;
}
.interactive section.is-active .wrap > * {
  opacity: 1;
  transform: translateY(0);
}
.interactive section.is-active .wrap > *:nth-child(1) {
  transition-delay: 0.2s;
}
.interactive section.is-active .wrap > *:nth-child(2) {
  transition-delay: 0.4s;
}
.interactive section.is-active .wrap > *:nth-child(3) {
  transition-delay: 0.6s;
}
.interactive section.is-active .wrap > *:nth-child(4) {
  transition-delay: 0.8s;
}
.interactive section.is-active .wrap > *:nth-child(5) {
  transition-delay: 1s;
}
.interactive section.is-active .wrap > *:nth-child(6) {
  transition-delay: 1.2s;
}

/* ── FAQ (details/summary) ── */
.faq details {
  border-radius: 15px;
  overflow: hidden;
}
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 48px);
  font-size: clamp(16px, 1.8vw, 28px);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  background: var(--color-primary);
}
.faq summary::after {
  position: absolute;
  right: 4%;
  top: 50%;
  content: "＋";
  font-size: clamp(18px, 2vw, 28px);
  transform: translateY(-50%);
  transition: 0.3s;
}
.faq details[open] summary::after {
  content: "－";
}
.faq details > div {
  padding: clamp(16px, 3vw, 36px) clamp(20px, 3.5vw, 48px);
  background: #fff;
}

/* ── tit_wrap 공통 구조 ── */
.tit_wrap {
  display: flex;
  flex-direction: column;
}

/* ── reason KPI 카드 공통 ── */
.reason_list {
  display: flex;
}
.reason_list li {
  flex: 0 1 33.33%;
  text-align: center;
}
.reason_list strong {
  display: block;
  font-weight: 900;
  line-height: 1;
}
.reason_list sub {
  font-size: 0.7em;
}

/* ── br 태그 — 디바이스별 동작 ── */
/* br 앞뒤에 반드시 공백 문자 포함할 것 (모바일 스페이스 처리용) */
br.pc_con {
  display: block;
}
br.m_con {
  display: none;
}

/* ── 반응형 공통 ── */
@media screen and (max-width: 1220px) {
  .wrap {
    width: 100%;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media screen and (max-width: 1024px) {
  .pc_con {
    display: none;
  }
  .t_con {
    display: block;
  }
  .m_con {
    display: none;
  }
  br.pc_con {
    display: none;
  } /* 모바일: 앞뒤 공백이 스페이스 역할 */
  br.m_con {
    display: block;
  } /* 모바일: 줄바꿈 */
  .wrap {
    width: 100%;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
  .sticky {
    flex-direction: column;
    height: auto;
    gap: 4px;
    padding: 12px 20px;
  }
  .reason_list {
    flex-direction: column;
  }
  .reason_list li {
    border-right: none;
    border-top: 1px dashed #ddd;
    padding: 20px 0;
  }
  .reason_list li:first-child {
    border-top: none;
  }
}

@media screen and (max-width: 767px) {
  .t_con {
    display: none;
  }
  .m_con {
    display: block;
  }
  .wrap {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
}