/* ============================================
   계산기 모음 - 공통 스타일
   ============================================ */

/* 기본 설정 */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
  padding-top: 58px;   /* 고정 헤더 높이만큼 본문 밀어내기 */
  padding-bottom: 60px;
}

/* ============================================
   헤더 / 내비게이션
   ============================================ */
.site-header {
  background: #1a1a2e;
  border-bottom: 2px solid #16213e;
  padding: 8px 0;
  position: fixed;      /* sticky → fixed 로 변경: 항상 상단 고정 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.site-header .navbar {
  padding: 4px 0;
}

.site-header .site-title {
  color: #fff !important;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.5px;
}

.site-header .site-title:hover {
  color: #e9c46a !important;
}

.site-header .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 6px 12px !important;
  border-radius: 4px;
  transition: all 0.2s;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,0.15);
}

.site-header .dropdown-menu {
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.site-header .dropdown-item {
  color: rgba(255,255,255,0.8) !important;
  font-size: 0.875rem;
  padding: 8px 16px;
  transition: all 0.2s;
}

.site-header .dropdown-item:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.1);
}

.navbar-toggler {
  border-color: rgba(255,255,255,0.3) !important;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* ============================================
   메인 콘텐츠 영역
   ============================================ */
.site-content {
  padding: 20px 0 0;
}

/* 페이지 제목 */
.entry-header {
  margin-bottom: 16px;
}

.entry-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  padding: 0;
}

.entry-title a {
  color: inherit;
  text-decoration: none;
}

/* 설명 박스 */
.border.p-3.text-center {
  background: #fff;
  border-color: #dee2e6 !important;
  border-radius: 8px;
}

.desc {
  font-size: 0.95rem;
  color: #555;
}

/* ============================================
   카테고리 제목
   ============================================ */
.category-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 20px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #1a1a2e;
}

.category-title i {
  margin-right: 6px;
  color: #e9c46a;
}

/* ============================================
   계산기 카드
   ============================================ */
.card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  transition: all 0.2s ease;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.card:hover {
  border-color: #1a1a2e;
  box-shadow: 0 4px 15px rgba(26,26,46,0.15);
  transform: translateY(-2px);
}

.card a {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
  padding: 12px 8px;
}

.card .card-icon {
  font-size: 2rem;
  color: #1a1a2e;
  margin-bottom: 6px;
  line-height: 1;
}

.card .card-icon i {
  display: block;
}

.card .card-body {
  padding: 0;
}

.card .card-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

/* 뱃지 (폐지 등) */
.card .badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.65rem;
}

/* ============================================
   광고 영역
   ============================================ */
.ad-area {
  text-align: center;
  overflow: hidden;
  min-height: 0;  /* 광고 미로드 시 공간 없애기 */
}

.ad-area ins {
  width: 100%;
}

/* ============================================
   SNS 공유
   ============================================ */
.share_sns {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.share-label {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.btn-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}

.btn-share:hover {
  opacity: 0.85;
  transform: scale(1.1);
  color: #fff;
}

.btn-share.kakao { background: #FEE500; color: #3C1E1E !important; }
.btn-share.facebook { background: #1877F2; }
.btn-share.twitter { background: #000; }
.btn-share.naverblog { background: #03C75A; }

/* ============================================
   계산기 서브 페이지 (탭)
   ============================================ */
.main-tabs {
  margin-bottom: 16px;
  border-bottom: 2px solid #1a1a2e;
  display: flex;
  gap: 4px;
}

.main-tabs .nav-link {
  border: none;
  background: none;
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.2s;
}

.main-tabs .nav-link:hover {
  color: #1a1a2e;
  background: rgba(26,26,46,0.05);
}

.main-tabs .nav-link.active {
  color: #fff;
  background: #1a1a2e;
}

/* ============================================
   계산기 입력 폼
   ============================================ */
.calculator-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.calculator-card .card-header {
  background: #1a1a2e;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 16px;
  margin: -20px -20px 20px;
  border-radius: 12px 12px 0 0;
}

.form-label.fw-bold {
  font-weight: 600 !important;
  font-size: 0.9rem;
  color: #333;
}

.form-control,
.form-select {
  border-radius: 6px;
  border-color: #ced4da;
  font-size: 0.95rem;
  padding: 8px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus,
.form-select:focus {
  border-color: #1a1a2e;
  box-shadow: 0 0 0 0.2rem rgba(26,26,46,0.15);
}

.input-group-text {
  background: #f8f9fa;
  border-color: #ced4da;
  color: #555;
  font-size: 0.9rem;
}

/* 계산 버튼 */
.btn-calculate {
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-calculate:hover {
  background: #16213e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,26,46,0.3);
}

.btn-reset {
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  margin-left: 8px;
}

.btn-reset:hover {
  background: #5a6268;
}

/* ============================================
   계산 결과 영역
   ============================================ */
.result-box {
  background: #fff;
  border: 2px solid #1a1a2e;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  display: none;
}

.result-box.show {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-box h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9c46a;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
}

.result-table tr td {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}

.result-table tr td:first-child {
  color: #555;
  font-weight: 500;
  width: 50%;
}

.result-table tr td:last-child {
  text-align: right;
  font-weight: 700;
  color: #333;
}

.result-table tr.highlight td {
  background: #f0f4ff;
  color: #1a1a2e;
  font-size: 1rem;
  font-weight: 700;
}

.result-table tr.highlight td:last-child {
  color: #d62828;
}

/* ============================================
   공지사항 / 위젯 사이드바
   ============================================ */
.widget {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.widget h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e0e0e0;
}

.widget ul {
  padding-left: 16px;
  margin: 0;
}

.widget ul li {
  margin-bottom: 6px;
}

.widget ul li a {
  color: #333;
  text-decoration: none;
  font-size: 0.875rem;
}

.widget ul li a:hover {
  color: #1a1a2e;
  text-decoration: underline;
}

/* ============================================
   레이아웃: 계산기 서브 페이지 (2컬럼)
   ============================================ */
@media (min-width: 768px) {
  .content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
  }
  
  .sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
  }
}

/* ============================================
   테이블 (세액표 등)
   ============================================ */
.table-responsive-sm {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dee2e6;
}

.table {
  margin: 0;
  font-size: 0.875rem;
}

.table-bordered th,
.table-bordered td {
  border-color: #dee2e6;
}

.table-warning {
  background: #fff3cd !important;
}

.how-to-use {
  font-size: 0.85rem;
  color: #555;
}

.how-to-use ul {
  padding-left: 20px;
}

/* ============================================
   SEO 텍스트
   ============================================ */
.seo-text {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
}

.seo-text h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}

.seo-text h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 14px 0 8px;
}

.seo-text p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
}

/* ============================================
   좌우 사이드바 광고
   - 테두리/그림자 없음, 배경 = 페이지 배경(#f8f9fa)
   - 좌측 컨텐츠가 없는 공간의 좌우 중앙에 위치
   - 닫기(✕) → 최소화 / ∧ → 펼치기 (좌우 독립)
   ============================================ */

/* 사이드바 표시 기준:
   컨텐츠(1320px) + 사이드바 양쪽(160px×2) = 1640px
   → 1640px 이상에서만 표시해야 컨텐츠와 겹치지 않음 */
.sidebar-ad {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 950;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  transition: top 0.3s ease, transform 0.3s ease, bottom 0.3s ease;
}

@media (min-width: 1640px) {
  .sidebar-ad { display: flex; }

  /* ── 중앙 배치 공식 ──
     좌측 빈 공간 = (100vw - 1320px) / 2
     사이드바 중심 = 빈 공간 / 2 = (100vw - 1320px) / 4
     사이드바 좌측끝 = 중심 - 80px(사이드바 절반)
     → left = (100vw - 1640px) / 4                    */
  .sidebar-ad-left  { left:  calc((100vw - 1640px) / 4); }
  .sidebar-ad-right { right: calc((100vw - 1640px) / 4); }
}

/* ── 광고 본체: 테두리·그림자 없음, 배경 = 페이지 배경 ── */
.sidebar-ad-body {
  background: #f8f9fa;   /* 메인화면 배경과 동일 */
  border: none;
  box-shadow: none;
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.3s ease;
}

/* 광고 단위 */
.sidebar-ad ins.adsbygoogle {
  display: block !important;
  width: 160px  !important;
  height: 600px !important;
  background: #f8f9fa;
}

/* ── 헤더(라벨 + 닫기버튼): 배경·테두리 통일 ── */
.sidebar-ad-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 160px;
  padding: 3px 6px;
  background: #f8f9fa;
  border-bottom: none;
}
.sidebar-ad-label {
  font-size: 10px;
  color: #aaa;
  letter-spacing: 0.5px;
}

/* ✕ 닫기 버튼 */
.sidebar-ad-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #ccc;
  color: #555;
  font-size: 9px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.2s;
  flex-shrink: 0;
}
.sidebar-ad-close:hover { background: #999; color: #fff; }

/* ── 최소화 상태 ── */
.sidebar-ad.sidebar-minimized {
  top: auto;
  transform: none;
  bottom: 100px;   /* 하단 플로팅 광고 위 */
}
.sidebar-ad.sidebar-minimized .sidebar-ad-body {
  height: 0 !important;
  overflow: hidden;
  opacity: 0;
}
.sidebar-ad.sidebar-minimized .sidebar-ad-header { display: none; }

/* ∧ 펼치기 탭 */
.sidebar-ad-expand {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 26px;
  background: #888;
  color: #fff;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.sidebar-ad-left  .sidebar-ad-expand { border-radius: 0 6px 6px 0; }
.sidebar-ad-right .sidebar-ad-expand { border-radius: 6px 0 0 6px; }
.sidebar-ad-expand:hover { background: #555; }
.sidebar-ad.sidebar-minimized .sidebar-ad-expand { display: flex; }

/* ============================================
   하단 플로팅 광고
   - 너비: 컨텐츠 폭 기준 (max-width 960px, 중앙정렬)
   - 닫기(✕) → 최소화 / ∧ → 펼치기
   ============================================ */
.floating-bottom-ad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 940;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* 광고 본체: 컨텐츠 폭(960px) 기준, 중앙 정렬 */
.floating-bottom-ad-body {
  pointer-events: all;
  background: #fff;
  border-top: 2px solid #ddd;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 44px 8px 12px;
  position: relative;
  /* overflow:hidden 제거 - AdSense 렌더링 방해 */
}

/* 광고 단위: 728×90 리더보드 고정 크기
   (AdSense는 명확한 px 크기 필요 - % 단독 사용 불가) */
.floating-bottom-ad ins.adsbygoogle {
  display: inline-block !important;
  width: 728px !important;
  height: 90px !important;
  background: #f8f9fa;
}
@media (max-width: 960px) {
  .floating-bottom-ad ins.adsbygoogle {
    width: 320px !important;
    height: 50px  !important;
  }
}

/* ✕ 닫기 버튼 */
.floating-bottom-close {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #ccc;
  color: #555;
  font-size: 11px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.2s;
}
.floating-bottom-close:hover { background: #999; color: #fff; }

/* ∧ 펼치기 탭 */
.floating-bottom-expand {
  pointer-events: all;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 14px;
  height: 24px;
  background: #888;
  color: #fff;
  font-size: 11px;
  border: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.floating-bottom-expand:hover { background: #555; }

/* 최소화: display:none (height:0 방식은 AdSense 렌더링 방해) */
.floating-bottom-ad.minimized .floating-bottom-ad-body { display: none; }
.floating-bottom-ad.minimized .floating-bottom-expand   { display: flex; }

/* ── 최상단 광고: 높이 절반 ──
   각 페이지 첫 번째 .ad-area에 .ad-area-top 클래스 부여 */
.ad-area-top {
  max-height: 140px !important;
  overflow: hidden;
}

/* ============================================
   달력 위젯
   ============================================ */
.my-calendar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  text-align: center;
}

.my-calendar-table caption {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a1a2e;
  margin-bottom: 6px;
}

.my-calendar-table th {
  background: #1a1a2e;
  color: #fff;
  padding: 5px;
  font-weight: 500;
}

.my-calendar-table td {
  padding: 5px;
  border: 1px solid #e0e0e0;
  color: #444;
}

.my-calendar-table td.today {
  background: #1a1a2e;
  color: #e9c46a;
  font-weight: 700;
  border-radius: 50%;
}

/* ============================================
   푸터
   ============================================ */
.site-footer {
  background: #1a1a2e;
  color: rgba(255,255,255,0.7);
  margin-top: 40px;
}

.site-footer a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}

.site-footer a:hover {
  color: #e9c46a;
}

.site-info p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.8;
}

/* ============================================
   반응형 조정
   ============================================ */
@media (max-width: 576px) {
  .entry-title {
    font-size: 1.2rem;
  }
  
  .card a {
    padding: 10px 4px;
  }
  
  .card .card-icon {
    font-size: 1.5rem;
  }
  
  .card .card-title {
    font-size: 0.72rem;
  }
  
  .calculator-card {
    padding: 16px;
  }
  
  .calculator-card .card-header {
    margin: -16px -16px 16px;
  }
}

@media (max-width: 767px) {
  .main-tabs {
    flex-wrap: wrap;
  }
}

/* ============================================
   Bootstrap 없이도 작동하는 폴백 그리드
   (col-4, col-sm-3, col-md-2 대응)
   ============================================ */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -6px;
  margin-left: -6px;
}

.row.g-2 > * {
  padding: 4px;
}

/* 기본: 3열 (col-4) */
.col-4 {
  width: 33.3333%;
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

/* sm: 4열 (col-sm-3) */
@media (min-width: 576px) {
  .col-sm-3 {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* md: 6열 (col-md-2) */
@media (min-width: 768px) {
  .col-md-2 {
    width: 16.6667%;
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-md-6 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* h-100 */
.h-100 { height: 100%; }

/* col-12 */
.col-12 {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

/* col-auto */
.col-auto {
  flex: 0 0 auto;
  width: auto;
}