@charset "utf-8";

/* ============================================================
   layout.css — landing wrap / hero / contents card / notice
   ============================================================ */

/* ── Landing Wrap ── */
.woori_landing_wrap {
  width: 100%;
  overflow: hidden;
  background: var(--color-white);
}

/* ── Hero (배경 + 전경 이미지) ── */
.woori_hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100vh;
}
.woori_hero_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.woori_hero_fg {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}
.woori_hero_fg img {
  display: block;
  width: 100%;
}
.woori_rule_tit {
  color: #414655;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  position: relative;
  top: 20px;
  left: 10%;
}
.woori_hero.pc .woori_hero_fg {
  max-width: 860px;
  padding: 80px 20px 8px;
}
.woori_hero.mo .woori_hero_fg {
  max-width: 100%;
  padding: 18px 0 0;
}

/* ── Contents ── */
.woori_landing_contents {
  padding: 60px 20px 84px;
}
.woori_landing_contents_inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* 이벤트 카드 (흰색) */
.woori_evt_card {
  width: 100%;
  background: var(--color-white);
  border-radius: 32px;
  box-shadow: 0 14px 40px rgba(40, 90, 170, 0.09);
  padding: 0 20px 40px 20px;
  display: flex;
  border: 1px solid #d2d2d2;
  justify-content: center;
}
.woori_evt_inner {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.woori_evt_inner.is_narrow {
  max-width: 750px;
}
.woori_evt_inner.is_narrow .woori_btn {
  margin-top: 20px;
  margin-bottom: 40px;
}
.woori_sec_img {
  display: block;
  width: 100%;
  max-width: 760px;
}

/* ── Notice (유의사항) ── */
.woori_notice {
  width: 100%;
  background: var(--color-notice-bg);
}
.woori_notice_inner {
  max-width: 1200px;
  margin: 0 auto;
}
.woori_notice_inner img {
  width: 100%;
  display: block;
}
/* 브라우저 기본 search 'X'(clear) 버튼 제거 */
.woori_search input[type='search']::-webkit-search-cancel-button,
.woori_search input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.woori_search input[type='search']::-ms-clear {
  display: none;
}

.woori_search_clear {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--color-no-bg);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  display: none;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.woori_search_clear.is_show {
  display: block;
}
.woori_search_clear:hover {
  background: var(--color-text-muted);
  color: var(--color-white);
}
/* 매칭된 글자 하이라이트 (primary 색상) */
.woori_search_history_item .match {
  color: var(--color-primary);
  font-weight: 700;
}

/* 검색 결과 없음 */
.woori_search_history_empty {
  padding: 14px 16px;
  font-size: 15px;
  color: var(--color-text-muted);
  text-align: left;
  cursor: default;
}
/* ── Responsive ── */
@media screen and (max-width: 1199px) {
  .woori_rule_tit {
    font-size: 14px;
    left: 5%;
    display: block;
    width: 100%;
  }
  .woori_landing_contents {
    padding: 24px 12px 44px;
  }
  .woori_landing_contents_inner {
    gap: 20px;
  }
  .woori_sec_img {
    margin: auto;
  }
  .woori_hero {
    height: auto;
  }
  .woori_evt_card {
    padding: 0px 10px 30px 10px;
    border-radius: 24px;
  }
  .woori_hero.mo .woori_hero_fg {
    max-width: 96%;
  }
  .woori_evt_card {
    max-width: 90%;
  }
  .woori_evt_inner {
    gap: 20px;
    max-width: 100%;
  }
  .woori_evt_inner.is_narrow {
    max-width: 100%;
  }
  .woori_evt_inner.is_narrow .woori_btn {
    margin: 10px 0;
  }
}
@media screen and (max-width: 600px) {
  .woori_rule_tit {
    font-size: 8px;
    left: 5%;
    top: 10px;
  }
  .woori_evt_inner {
    gap: 12px;
  }
}
@media screen and (max-width: 430px) {
  .woori_evt_card {
    padding-bottom: 30px;
  }
  .woori_evt_inner.is_narrow .woori_btn {
    margin: 6px 0 0 0;
  }
  .woori_popup_head h2 {
    font-size: 1rem;
  }
  .woori_search {
    padding: 14px 8px;
  }
  .woori_search input {
    font-size: 0.8rem;
  }
  .woori_search_history_item {
    font-size: 0.8rem;
  }
  .woori_popup {
    padding: 24px 16px;
    min-height: 226px;
  }
}
@media screen and (max-width: 320px) {
  .woori_evt_inner {
    gap: 6px;
  }
  .woori_evt_card {
    padding-bottom: 16px;
  }
  .woori_evt_inner.is_narrow .woori_btn {
    width: 96%;
  }
  .woori_search input {
    font-size: 0.6rem;
  }
  .woori_search_history_item {
    font-size: 0.6rem;
  }
}