/* custom-styles.css */

/*
  문서 전체에 적용될 기본 스타일입니다.
  Tailwind CSS를 사용하고 계시기 때문에, Tailwind의 'preflight' (기본 브라우저 스타일 초기화) 기능과
  충돌하지 않도록 주의하거나, 보조적인 역할로 사용합니다.
*/

body {
  background-color: #f9fafb; /* Tailwind 'gray-50' */
  color: #1f2937;            /* Tailwind 'gray-800' */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
               Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0; /* body의 기본 마진 제거 */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 기존 HTML 문서의 <style> 태그 내용 시작 */
.hole-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 기본 2열 그리드 */
    gap: 1rem; /* 그리드 아이템 간 간격 */
    padding: 1rem; /* 내부 패딩 */
}
/* 모바일 화면(768px 이하)에서 1열로 변경 */
@media (max-width: 768px) {
    .hole-images {
        grid-template-columns: 1fr;
    }
}
.feature-info ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.feature-info li {
    font-size: 1rem;
    line-height: 1.75;
    color: #4a5568; /* Tailwind gray-700 */
}
@media (max-width: 768px) {
    .feature-info ul {
        padding-left: 1rem;
    }
    .feature-info li {
        font-size: 0.9rem;
        line-height: 1.5;
    }
}

.top-banner {
    width: 100%;
    min-height: 130px; /* 고정 높이 대신 최소 높이 사용 고려 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #85a770; /* 기존 녹색 계열 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding-top: 1rem; /* 패딩 추가하여 내용물 공간 확보 */
    padding-bottom: 1rem; /* 패딩 추가 */
    margin-bottom: 20px;
}
.top-banner h1 {
    font-size: 2.4em;
    color: #ffffff;
    margin: 0 0 5px 0;
    font-weight: 700;
    text-align: center;
}
.top-banner p {
    color: #ffffff;
    font-size: 0.9em;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    padding-left: 1rem; /* 문장이 길어질 경우를 대비한 좌우 패딩 */
    padding-right: 1rem;
}

/* 맨 위로 가기 버튼 스타일 (Tailwind 클래스로 대체 가능하지만, CSS 파일에 명시) */
.scroll-to-top-button {
    position: fixed;
    bottom: 1.5rem; /* 24px */
    right: 1.5rem; /* 24px */
    z-index: 50;
    background-color: #2f855A; /* Tailwind green-700 */
    color: white;
    padding: 0.75rem; /* 12px */
    border-radius: 9999px; /* full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* lg */
    transition-property: background-color, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.scroll-to-top-button:hover {
    background-color: #276749; /* Tailwind green-800 */
    transform: scale(1.1);
}
.scroll-to-top-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.5); /* Tailwind ring-green-500 ring-opacity-50 */
}
@media (min-width: 768px) { /* md 이상 화면에서는 숨김 (기존 HTML의 md:hidden과 동일 효과) */
    .scroll-to-top-button {
        display: none;
    }
}


/* 기존 HTML 문서의 <style> 태그 내용 끝 */


/*
  -----------------------------------------------------------------------------
  !!! 주의: 강제 스타일 적용 (Force Styles) !!!
  -----------------------------------------------------------------------------
  아래 스타일들은 페이지 요소들을 강제로 보이게 하거나 상호작용 가능하게 만들려는
  매우 강력한 규칙들입니다. 이 규칙들은 페이지의 정상적인 디자인과 기능을
  심각하게 훼손할 수 있으므로, 문제 진단을 위한 최후의 수단으로만 사용하세요.

  "새로고침해야 스크립트가 작동하는 문제"는 대부분 JavaScript 실행 시점이나
  코드 자체의 문제이므로, 이 CSS로 해결될 가능성은 낮습니다.
  근본적인 JavaScript 문제를 해결하는 것이 중요합니다.
*/

/*
* {
    display: revert !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: revert !important;
    overflow: visible !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
*/

/*
  개별적으로 시도해볼 수 있는 속성들:

  .target-element {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 1px !important;
    min-height: 1px !important;
    overflow: visible !important;
  }

  .target-element {
    pointer-events: auto !important;
    z-index: 9999 !important;
  }

  .target-element {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
*/