* {
  font-family: 'Noto Sans';
  margin: 0px;
  list-style: none;
  text-decoration: none;
  border-collapse: collapse;
  color: #000;
}

h1 {
  font-size: 2rem;
  background-image: linear-gradient(135deg, rgb(30,64,175), rgb(14,165,233));
  color: transparent;
  background-clip: text;
  text-align: center;
}

header {
  width: 100%;
  height: calc(100vh - 60px);
  background-image:
    linear-gradient(135deg, rgba(30,64,175, 0.5), rgba(14,165,233, 0.5)),
    url('./img/header-background.jpeg');
  background-size: cover;
  box-shadow: 0 0 200px rgba(0,0,0,0.5) inset;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

header > h1 {
  color: white;
}

.lift-logo {
  width: 200px;
  filter: drop-shadow(0px 0px 55px);
}

.nav-bar {
  position: sticky;
  top: 0px;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:white;
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));
  z-index: 1;
}

.nav-logo {
  height: 40px;
  padding: 10px;
}

.nav-bar > .menu {
  display: flex;
}

.nav-bar > .menu > ul {
  color: black;
  text-align: center;
  padding: 30px;
}

.disabled {
  color: rgb(113, 119, 122);
}

section {
  padding: 100px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  gap: 60px;
}

h2 {
  font-size: 1.3rem;
  text-align: center;
}

.textbox {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  width: 90%;
}

.section-greeting {
  background-color: #dbeafe;
}

p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: center;
}

.bold-text {
  color: black;
  font-weight: bold;
}

.cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  
  justify-content: top;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  filter: drop-shadow(0px 10px 7px rgba(140, 140, 140, 0.5));
  width: 17%;
  padding: 30px;
  flex-shrink: 0;
}

.compact {
  flex-wrap: wrap;
}

.compact > .card {
  width: 160px;
  justify-content: space-between;
}

.full-width {
  flex-grow: 1;
}

i {
  display: flex;
  justify-content: center;
  align-items: center;
  scale: 200%;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  color: white;
  background-color: #3b82f6;
  margin: 20px;
}

.card > p {
  font-size: 1rem;
  color: rgb(73, 73, 73);
  width: auto;
}

.card > .imagebox {
  width: 100%;
  height: 130px;
  display: flex;
}

.card > .imagebox > img {
  width: 70%;
  height: auto;
  margin: auto;
  flex: 0 0;
}

.card > ul > li {
  margin: 0.5rem 0;
}

.bullet-points > * {
  list-style: disc;
  font-size: 0.9rem;
  color: rgb(73, 73, 73);
}

.bullet-points > li::marker {
  color: rgb(50, 81, 185);
}

.section-method {
  background-color: #dbeafe;
}

.align-left { /*for cards*/
  align-items: flex-start;
}

.align-left > * {
  text-align: left;
}

.section-partner {
  background-color: #eff6ff;
}

.section-join {
  background-image:
    linear-gradient(135deg, rgba(30,64,175, 0.5), rgba(14,165,233, 0.5)),
    url("./img/joinus-background.avif");
  background-position: center top;
}

.section-join > .textbox > h1 {
  color: white;
  background-color: transparent;
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.7));
}

.section-join > .textbox > p {
  color: rgb(238, 238, 238);
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.7));
}

.transparent-btn {
  width: 300px;
  margin: 30px auto;
  display: inline-block;
  background: #ffffff;               /* 흰색 배경 */
  color: #111827;                   /* 버튼 텍스트 색 (진한 회색) */
  border: 2px solid rgba(255, 255, 255, 0.8); /* 얇은 경계선 (선택사항) */
  padding: 0.55rem 1.0rem;          /* 높이/좌우 패딩 */
  font-size: 1rem;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: opacity 180ms ease, transform 120ms ease, box-shadow 180ms ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); /* 약한 그림자 (선택) */
  opacity: 1;
}

.transparent-btn > p {
  font-weight: bold;
  background-image: linear-gradient(135deg, rgb(30,64,175), rgb(14,165,233));
  color: transparent;
  background-clip: text;
}

/* hover 상태: 반투명으로 변경 */
.transparent-btn:hover {
  opacity: 0.5; /* 원하는 투명도에 맞춰 0.0 ~ 1.0 사이로 조절 */
  backdrop-filter: blur(10px);

}

/* 포커스(키보드 접근성) 강조 */
.transparent-btn:focus {
  outline: none;
}
.transparent-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15); /* 접근성 있는 포커스 링 */
}

footer {
  background-color: #1e40af;
  height: 100px;
}

footer > p {
  font-size: 1.1rem;
  color: rgb(194, 225, 255);
}

@media (max-width: 720px) {

  p {
    font-size: 1.1rem;
  }

  section {
    padding: 100px 10px;
  }

  .section-greeting > h1 {
    padding: 55px;
    font-size: 1.3rem;
    line-break: loose;
  }

  .textbox {
    width: 70%;
    gap: 10px;
  }

  .cards {
    flex-wrap: wrap;
  }

  .card {
    width: 70%;
  }
  
  .transparent-btn {
    width: 200px;
  }
}