/* 기본 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* style1.css의 색상 테마 변수 추가 */
:root{
  --bg:#f7f9fb;   /* 배경색: 아주 밝은 회색/흰색 톤 */
  --card:#fff;    /* 카드 배경색: 흰색 */
  --accent:#246;  /* 강조 색상: 진한 파란색 계열 */
  --muted:#666;   /* 약한 텍스트 색상: 회색 */
}

body {
  font-family: 'Segoe UI', sans-serif;
  /* 배경색과 글자색을 style1.css 테마로 변경 */
  background: var(--bg);
  color: #111; /* style1.css의 기본 텍스트 색상 */
}

/* 컨테이너 */
.container {
  /* style1.css 기준으로 최대 너비와 패딩 변경 */
  max-width: 960px;
  margin: 0 auto;
  padding: 12px;
}


/* 헤더 */
.header {
  /* 배경색을 style1.css의 강조색으로 변경 */
  background: var(--accent);
  color: #fff;
  padding: 1rem 0;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
}

/* --- [수정 및 추가] style1.css의 필터/검색 폼 스타일 추가 및 균형 조정 --- */
.filter-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.filter-form input,.filter-form select{flex:1;min-width:120px;padding:8px;border:1px solid #ccc;border-radius:6px;}
.filter-form button{padding:8px 12px;border:none;background:var(--accent);color:#fff;border-radius:6px;}
/* ----------------------------------------------------------------- */


/* 기존 plant-card 스타일 (유지) */
.plant-card {
  display: flex;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 15px;
  background: #f9f9f9;
}
.plant-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}
.plant-info h2 { margin: 0 0 5px; }
.plant-info p { margin: 3px 0; }

.transparent-button {
  all: unset;
  -webkit-appearance: none;
  appearance: none;
  color: black;
  background-color: white;
  padding: 4px 10px;
  border: 1px solid #999;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.transparent-button:hover {
  background: #333;
  color: rgb(255, 255, 255);
}


a {
  color: inherit;            /* 기본 텍스트 색상으로 */
  text-decoration: none;    /* 밑줄 제거 */
}

a:hover {
  /* style1.css 강조색으로 변경 */
  color: var(--accent);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}


.list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.list li a {
  color: #333;
  text-decoration: none;
  display: block;
}

.list li a:hover {
  background: #cfcaca;
}

.viewer {
  width: 100%;
  height: 80vh;
  background: black;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 메인 콘텐츠 */
main h1 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

/* --- [수정] 전국 골프장 날씨 정보(header h1) 글자 크기 수정 --- */
/* style1.css의 header h1에 대한 스타일을 추가하여 크기를 조정합니다. */
.container header h1 { 
    margin: 0 0 12px;
    font-size: 1.6rem; /* style1.css 기준인 1.6rem으로 조정 */

}
/* --------------------------------------------------------------- */

/* 그리드 레이아웃 (style1.css 스타일 적용) */
.grid {
  display: grid;
  /* style1.css 기준 레이아웃 */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* 카드 스타일 (style1.css 스타일 적용) */
.card {
  /* 기존 스타일 덮어쓰기 */
  background: var(--card);
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  color: inherit;
  text-decoration: none;
}

.card h3 {
  /* style1.css 기준 스타일 적용 */
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: var(--accent);
}

.card p {
  /* style1.css 기준 스타일 적용 */
  margin: 0;
  font-size: .95rem;
  word-break: break-word;
}


/* --- [추가] style1.css의 페이징 스타일 추가 --- */
.pagination{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:16px 0;
    font-size:.9rem;
}
.pagination a{
    text-decoration:none;
    color:var(--accent);
}
/* ------------------------------------------------- */


/* 푸터 */
.footer {
  text-align: center;
  /* style1.css의 배경색(var(--bg) 또는 흰색)을 따르도록 배경을 투명하게 변경 */
  background: var(--bg); /* 사이트 배경색과 동일하게 설정 */
  /* 글자색을 #aaa에서 #666 (muted) 또는 #111 (기본)로 변경하여 더 잘 보이게 함 */
  color: var(--muted); 
  padding: 1rem;
  margin-top: 2rem;
  /* style1.css처럼 그림자를 추가하여 카드와 통일감을 줄 수 있음 (선택 사항) */
  box-shadow: 0 -2px 6px rgba(0,0,0,0.03); 
}

/* 푸터 내 링크 스타일 개선 */
.footer a {
  color: var(--accent); /* 링크 색상을 강조색으로 */
  text-decoration: none;
  display: inline; /* 링크를 글자 부분에만 적용 */
  font-size: 0.95rem;
}

.footer a:hover {
  text-decoration: underline; /* 호버 시 밑줄 추가 */
  color: var(--accent); /* hover 색상은 이미 설정되어 있지만 명시적으로 */
}

.footer p {
    line-height: 1.6;
    margin-bottom: 0; /* 푸터의 p 태그는 마진을 제거 */
    font-size: 0.85rem;
}

p {
  line-height: 1.6;
  margin-bottom: 1em;
}

@media (max-width:600px){
  .grid{grid-template-columns:1fr;}
  .filter-form{flex-direction:column;}
}


/* 반응형 */
@media (max-width: 768px) {
  .nav {
    display: none;
    flex-direction: column;
    /* 모바일 메뉴 배경색을 헤더 색상인 var(--accent)로 통일 */
    background: var(--accent);
    position: absolute;
    right: 1rem;
    top: 60px;
    width: 150px;
    padding: 1rem;
    border-radius: 5px;
  }

  .nav.active {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }
}

@media (prefers-color-scheme: dark) {
  .transparent-button {
    color: black;
    background-color: white;
  }
}