/* Custom styles for Modern & Warm theme with Usability Improvements */
html {
  font-size: 16px; /* 기본 폰트 크기 */
}

body {
  margin: 0;
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  background-color: #F8F5F2;
  color: #333333;
  line-height: 1.6;
}

.layout {
  display: flex;
  min-height: 100vh;
  background-color: #F8F5F2;
}

/* Sidebar styles */
.sidebar {
  width: 280px;
  background-color: #4A4A4A;
  color: #FFFFFF;
  padding: 2.5rem 1.5rem;
  flex-shrink: 0;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out; /* 슬라이드 인/아웃 효과 */
  transform: translateX(0); /* 데스크톱 기본값 */
  z-index: 1001; /* 사이드바가 오버레이 위에 있도록 보장 */
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar h1 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

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

.sidebar ul li {
  margin-bottom: 1rem;
}

.sidebar ul li a {
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: background-color 0.2s, color 0.2s;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
  background-color: #60A5FA; /* 강조 색상: 새로운, 약간 더 밝은 파란색 */
  color: #FFFFFF;
}

/* Overlay for mobile sidebar */
.overlay {
  display: none; /* 기본적으로 숨김 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none; /* 열려 있지 않을 때 클릭 통과 허용 */
}

.overlay.open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Topbar for mobile */
.topbar {
  display: none; /* 데스크톱에서는 기본적으로 숨김 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  align-items: center;
  padding: 0 1rem;
  z-index: 100;
}

.hamburger {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #333333;
}

.site-name-mobile {
  display: none; /* 기본적으로 숨김 */
}

/* Content area styles */
.content {
  flex-grow: 1;
  padding: 2rem;
  overflow-y: auto; /* 콘텐츠 스크롤 허용 */
}

/* Card styles */
.card {
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  flex: 1; /* flex 컨테이너에서 카드 확장 허용 */
  /* min-width: 300px; 이 부분은 그리드에서 크기 조절하므로 제거 */
}

/* Specific styling for the yield calculator's main card based on the new design */
#yieldCalculatorSection .card {
  background-color: #f7f7f7; /* 밝은 회색 배경 */
  border-radius: 8px; /* 약간 덜 둥근 모서리 */
  padding: 2rem; /* 더 많은 내부 패딩 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); /* 부드러운 그림자 */
}

#yieldCalculatorSection .card h2 {
  font-size: 1.8rem; /* 더 큰 제목 */
  color: #333; /* 제목에 더 어두운 회색 */
  margin-bottom: 2rem; /* 마진 증가 */
  border-bottom: none; /* 하단 테두리 제거 */
  padding-bottom: 0; /* 패딩 제거 */
  text-align: center; /* 제목 가운데 정렬 */
}

#yieldCalculatorSection .card h3 {
  font-size: 1.4rem; /* 섹션 제목에 약간 더 큰 글꼴 */
  color: #555;
  margin-bottom: 1.5rem;
  font-weight: 600; /* 더 굵은 제목 */
}


.card-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap; /* 작은 화면에서 카드 줄바꿈 허용 */
}

.card.result-card {
  background-color: #E8F0F8; /* 결과 카드에 더 밝은 배경 */
  border: 1px solid #60A5FA; /* 강조 테두리 */
  color: #2C3E50;
}

.card.result-card p {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #34495E;
}

/* Two-column layout for input sections */
.input-section-container {
  display: flex;
  gap: 2rem; /* 열 사이의 간격 */
  flex-wrap: wrap; /* 작은 화면에서 열 줄바꿈 허용 */
  margin-bottom: 2rem; /* 주요 버튼 앞 공간 */
}

.input-column {
  flex: 1; /* 각 열은 동일한 공간 차지 */
  min-width: 300px; /* 줄바꿈 전 최소 너비 */
  background-color: #FFFFFF; /* 각 열 카드에 흰색 배경 */
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); /* 내부 열에 미묘한 그림자 */
}


/* Form styles */
.form-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem; /* 폼 그룹의 기본 마진 */
}

.form-item {
  display: flex;
  flex-direction: column;
}

.form-item label {
  font-size: 0.95rem;
  color: #555555;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-item input[type="text"],
.form-item input[type="number"],
.form-item select {
  padding: 0.75rem 1rem;
  border: 1px solid #CED4DA;
  border-radius: 4px; /* 인풋에 약간 덜 둥근 모서리 */
  font-size: 1rem;
  color: #333333;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-item input[type="text"]:focus,
.form-item input[type="number"]:focus,
.form-item select:focus {
  border-color: #60A5FA; /* 강조 색상 */
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); /* 강조 색상 그림자 */
  outline: none;
}

.form-item input[type="checkbox"] {
  margin-top: 0.75rem;
  width: 20px;
  height: 20px;
  accent-color: #60A5FA; /* 체크박스 강조 색상 */
}

/* Button styles */
.button-group {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap; /* 버튼 줄바꿈 허용 */
  justify-content: flex-end; /* 버튼을 오른쪽으로 정렬 */
}

.button-group.right-aligned {
    justify-content: flex-end;
}

/* Common button base styles */
.submit-btn,
.reset-btn,
.add-part-btn,
.remove-part-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 8px; /* 약간 둥근 모서리 */
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    min-width: 100px; /* 일관된 너비 보장 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* Primary action buttons */
.submit-btn, .add-part-btn {
    background-color: #60A5FA; /* 주요 작업에 새로운 파란색 음영 */
    color: #FFFFFF;
    border: 1px solid #60A5FA;
}

.submit-btn:hover, .add-part-btn:hover {
    background-color: #3B82F6; /* 호버 시 더 어두운 음영 */
    border-color: #3B82F6;
}

/* Secondary/Reset/Delete action buttons */
.reset-btn, .remove-part-btn {
    background-color: #FFFFFF;
    color: #6C757D; /* 텍스트에 더 어두운 회색 */
    border: 1px solid #CED4DA;
}

.reset-btn:hover, .remove-part-btn:hover {
    background-color: #F0F2F5;
    border-color: #B0B5BB;
}

/* Specific button styles for the new design */
#yieldCalculatorSection .submit-btn { /* '계산하기' 버튼 */
    background-color: #60A5FA; /* 새로운 강조 파란색으로 변경 */
    border-color: #60A5FA;
}

#yieldCalculatorSection .submit-btn:hover {
    background-color: #3B82F6; /* 새로운 강조 파란색 호버로 변경 */
    border-color: #3B82F6;
}

#yieldCalculatorSection .add-part-btn { /* '부위 추가' 버튼 - 이제 새로운 강조 파란색 사용 */
    background-color: #60A5FA;
    border-color: #60A5FA;
}

#yieldCalculatorSection .add-part-btn:hover {
    background-color: #3B82F6;
    border-color: #3B82F6;
}


/* Buttons within a button-group should grow */
.button-group .submit-btn,
.button-group .reset-btn,
.button-group .add-part-btn,
.button-group .remove-part-btn {
    flex-grow: 1; /* 이 버튼들이 버튼 그룹 내에서 확장되도록 허용 */
}

/* Adjust for the main buttons which should span full width in a single row */
.button-group.main-buttons {
    margin-top: 2rem; /* 이 버튼들 위에 더 많은 공간 */
    justify-content: center; /* 데스크톱에서 가운데 정렬 */
}

.button-group.main-buttons .submit-btn,
.button-group.main-buttons .reset-btn {
    flex-grow: 0; /* 이 버튼들 확장 안 함 */
    width: auto; /* 자동 너비 */
    min-width: 150px; /* 적절한 최소 너비 보장 */
}


/* Styles for individual dynamically added custom part rows */
.custom-part-row {
    margin-bottom: 1rem; /* 사용자 정의 부품 마진 조정 */
    border: 1px solid #E0E0E0; /* 각 행에 미묘한 테두리 */
    border-radius: 8px; /* 둥근 모서리 */
    padding: 1rem; /* 각 행 내부 패딩 */
    background-color: #FCFCFC; /* 약간 다른 배경 */
}

/* Ensure form-group inside custom-part-row has no extra bottom margin */
.custom-part-row .form-group {
    margin-bottom: 0;
}

/* Style for the form-item containing the delete button */
.custom-part-row .form-item.delete-button-item {
    display: flex; /* 정렬을 위한 flexbox 사용 */
    align-items: flex-end; /* 버튼을 그리드 셀 하단에 정렬 */
    justify-content: flex-end; /* 버튼을 셀 내에서 오른쪽으로 정렬 */
    padding-top: 1.5rem; /* 다른 입력 필드 콘텐츠와 정렬하기 위해 패딩 추가 */
}

/* Style the delete button itself within this context */
.custom-part-row .form-item.delete-button-item .remove-part-btn {
    width: 100%; /* 버튼이 컨테이너를 채우도록 함 */
    max-width: 120px; /* 최대 너비 제한 */
    margin-top: 0; /* 기본 상단 마진 재정의 */
}


/* Calculator section specific styles */
.calculator-section {
    display: none; /* 기본적으로 숨김 */
}

.calculator-section.active-section {
    display: block; /* 활성 섹션 표시 */
}

/* Home section card container specific styles */
.home-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; /* 충분한 간격 보장 */
    max-width: 1200px; /* 큰 화면에서 최대 너비 제한 */
    margin-left: auto; /* 컨테이너 가운데 정렬 */
    margin-right: auto; /* 컨테이너 가운데 정렬 */
}

/* Add hover effects for home cards */
.home-card-container .card {
  cursor: pointer; /* 상호 작용 가능성 표시 */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.home-card-container .card:hover {
  transform: translateY(-5px); /* 리프트 효과 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 더 눈에 띄는 그림자 */
}

/* Style for the calculation explanation section */
.calculation-explanation {
  font-size: 12px; /* 텍스트 크기 조정 */
  color: #555; /* 설명을 위한 약간 더 밝은 색상 */
  line-height: 1.4; /* 줄 높이 조정 */
  margin-top: 2rem; /* 설명 위에 공간 */
}

.calculation-explanation h3 {
  font-size: 14px; /* 제목 폰트 크기 조정 */
  color: #333;
  margin-top: 0;
  margin-bottom: 0.6rem; /* 마진 조정 */
}

.calculation-explanation p {
  font-size: 12px; /* 문단 폰트 크기 조정 */
  margin-bottom: 0.3rem; /* 마진 조정 */
  overflow-wrap: break-word; /* 긴 단어가 줄바꿈되도록 허용 */
}

/* Specific style for break-even explanation box (now inside a .card) */
.break-even-explanation {
  margin-top: 0; /* 부모 .card의 패딩을 사용하므로 자체 마진 제거 */
  padding: 0; /* 부모 .card의 패딩을 사용하므로 자체 패딩 제거 */
  background-color: transparent; /* .card 배경색을 따르도록 투명 설정 */
  border: none; /* .card 테두리를 따르도록 제거 */
}

.break-even-explanation h3 {
  /* .calculation-explanation h3의 스타일을 따르되 필요시 조정 */
  font-size: 1.2rem; /* 일반 카드 제목과 유사하게 조정 */
  margin-bottom: 1rem;
}

.break-even-explanation p {
  /* .calculation-explanation p의 스타일을 따르되 필요시 조정 */
  font-size: 0.95rem; /* 일반 카드 텍스트와 유사하게 조정 */
  margin-bottom: 0.5rem;
}

/* 애드센스 광고 박스 스타일 */
.adsense-box {
  width: 720px;
  height: 90px; /* 배너 이미지 크기에 맞춰 높이 조정 */
  background-color: #ddd; /* 회색 */
  margin: 1rem auto 4rem; /* 하단 마진을 4rem으로 더 늘려 카드와의 간격 확보 */
  text-align: center; /* 필요에 따라 광고 가운데 정렬 */
  line-height: 90px; /* 텍스트를 세로로 가운데 정렬 (선택 사항) */
  color: #888; /* 회색 텍스트 (선택 사항) */
  font-size: 0.8rem; /* 텍스트 크기 (선택 사항) */
}


/* Responsive adjustments */
@media (min-width: 1024px) { /* 더 큰 데스크톱용 */
    .home-card-container {
        grid-template-columns: repeat(3, 1fr); /* 3열 강제 */
    }
}

@media (min-width: 1400px) { /* 매우 큰 데스크톱용 */
    .home-card-container {
        grid-template-columns: repeat(4, 1fr); /* 4열 강제 */
    }
}

@media (max-width: 768px) {
  .layout {
    flex-direction: column; /* 사이드바와 콘텐츠 쌓기 */
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%); /* 사이드바 화면 밖으로 숨기기 */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }

  .sidebar.open {
    transform: translateX(0); /* 사이드바 표시 */
  }

  .topbar {
    display: flex; /* 모바일에서 탑바 표시 */
  }

  /* 흰색 탑바에서 햄버거 어두운 색상 */
  .hamburger {
    color: #333333;
  }

  /* 모바일에서만 사이트 이름 표시 */
  .site-name-mobile {
    display: block;
    font-size: 1.2rem; /* 모바일에서 적절한 크기 */
    margin-left: 1rem; /* 햄버거 버튼과의 간격 */
    color: #333333; /* 탑바 배경색에 맞게 조정 */
  }

  /* 모바일에서 사이드바의 사이트 이름 숨기기 */
  .sidebar .site-name {
    display: none;
  }

  .content {
    padding: 1rem;
    margin-top: 60px; /* 고정된 탑바를 위한 공간 */
  }

  .home-card-container {
    grid-template-columns: 1fr; /* 모바일에서 카드 쌓기 */
  }

  .card-row {
    flex-direction: column; /* 계산기 섹션에서 카드 쌓기 */
  }

  .card {
    min-width: unset; /* 최소 너비 제약 제거 */
  }

  .form-group {
    grid-template-columns: 1fr; /* 모바일에서 폼 항목 쌓기 */
  }

  .button-group {
    flex-direction: column;
  }

  .button-group .right-buttons { /* 이 클래스는 현재 HTML에서 사용되지 않는 것 같음 */
      flex-direction: column;
      width: 100%;
  }

  /* Adjust mobile specific styles for part-input-row if needed */
  .custom-part-row .form-item.delete-button-item { /* custom-part-row 내에서 타겟팅 */
      padding-top: 0; /* 쌓였을 때 상단 패딩 제거 */
      justify-content: stretch; /* 버튼이 너비를 채우도록 확장 */
  }

  .custom-part-row .form-item.delete-button-item .remove-part-btn { /* custom-part-row 내에서 타겟팅 */
      width: 100%; /* 모바일에서 버튼 전체 너비 */
      margin-top: 1rem; /* 쌓였을 때 공간 추가 */
      max-width: unset; /* 최대 너비 제약 제거 */
  }

  /* Mobile adjustments for new two-column layout */
  .input-section-container {
    flex-direction: column; /* 모바일에서 열 쌓기 */
  }

  .button-group.main-buttons {
      justify-content: stretch; /* 모바일에서 버튼 확장 */
  }

  .button-group.main-buttons .submit-btn,
  .button-group.main-buttons .reset-btn {
      width: 100%; /* 주요 버튼 전체 너비 */
  }
}

/* 퀵토픽 페이지 광고 배너*/
.quicktopic-banner {
  background-color: #fff7ed;
  border: 1px solid #ffb84d;
  padding: 1rem;
  margin-top: 2rem;
  border-radius: 8px;
  text-align: center;
  font-size: 0.95rem;
}
.quicktopic-button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #ff9900;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}
.quicktopic-banner .highlight {
  color: #e65100;
  font-weight: 600;
}

/* 하단 업데이트 정보*/
.home-footer-note {
  display: block;
  text-align: center;
  color: #777;
  font-size: 1.00em;
  margin-top: 20px;
}
.home-footer-note a {
  color: #0077cc;
  text-decoration: none;
}
.home-footer-note a:hover {
  text-decoration: underline;
}