/*
  [비즈니스 로직 요약]
  - AllDayStock 주식 및 ETF 수익률 분석 리포트 전용 가이드 팝업 스타일시트입니다.
  - 리포트의 시그니처 컬러(엑셀 그린, 세이지 배경)를 복원하여 전문 투자 데이터 리포트의 신뢰도와 가독성을 제공합니다.
  - stock_guide.html 및 etf_guide.html에서 공통으로 사용됩니다.

  [핵심 요구사항 리스트]
  1. 시그니처 엑셀 그린(#107c41) 및 연녹색 톤 배경(#f0f4f1) 테마 복원 및 흰색 카드와의 입체적 대비 확보
  2. 우측 상단 닫기 원형 버튼(.close-circle-btn)의 시그니처 초록 배경 및 마우스 호버 반전 효과 복원
  3. 섹션 타이틀(h2)의 초록색 포인트 및 시그니처 언더라인(border-bottom) 복원
  4. 데이터 테이블 헤더(th)의 연녹색 배경(#e6efe8) 복원 및 테이블 라운드 테두리/행 호버 효과
  5. 뱃지(.badge-red, .badge-blue, .format-badge-box), 캔들 시나리오 카드 그리드 모던화
  6. prefers-color-scheme 기반 다크 모드 및 모바일 반응형(헤더 닫기 버튼 겹침 방지 등) 완벽 지원
*/

/* [요구사항 1] 가이드 전용 컬러 시스템 및 테마 변수 */
:root {
  --bg-color: #f0f4f1;               /* 차분하고 눈이 편안한 세이지-그레이 배경 */
  --card-bg: #ffffff;               /* 콘텐츠 카드 순백색 배경 */
  --text-main: #1c2128;             /* 주요 텍스트 짙은 먹색 */
  --text-muted: #57606a;            /* 부가 설명 보조 텍스트 */
  --border-color: #d0d7de;          /* 카드 및 테이블 테두리선 */
  --accent-color: #107c41;          /* AllDayStock 시그니처 엑셀 그린 */
  --accent-hover: #0d6334;          /* 엑셀 그린 호버 색상 */
  --accent-light: rgba(16, 124, 65, 0.08); /* 엑셀 그린 틴트 배경 */
  --red-color: #cf222e;             /* 상승/양봉 레드 */
  --red-light: rgba(207, 34, 46, 0.1);
  --blue-color: #0969da;            /* 하락/음봉 블루 */
  --blue-light: rgba(9, 105, 218, 0.1);
  --gray-color: #57606a;            /* 보합/도지 텍스트 그레이 */
  --gray-light: rgba(108, 117, 125, 0.12); /* 보합/도지 옅은 회색 배경 */
  --th-bg: #e6efe8;                 /* 테이블 헤더 은은한 연녹색 배경 */
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03); /* 카드 입체 그림자 */
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.09);
}

/* [요구사항 6] 다크 테마 변수 매핑 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0d1117;
    --card-bg: #161b22;
    --text-main: #c9d1d9;
    --text-muted: #8b949e;
    --border-color: #30363d;
    --accent-color: #3fb950;        /* 다크모드 시인성 높은 에메랄드 그린 */
    --accent-hover: #2ea043;
    --accent-light: rgba(63, 185, 80, 0.12);
    --red-color: #ff7b72;
    --red-light: rgba(255, 123, 114, 0.15);
    --blue-color: #79c0ff;
    --blue-light: rgba(121, 192, 255, 0.15);
    --gray-color: #8b949e;
    --gray-light: rgba(156, 163, 175, 0.18);
    --th-bg: #21262d;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

/* 기본 리셋 및 폰트 세팅 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.65;
  padding: 24px 16px 60px 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.guide-container {
  max-width: 920px;
  margin: 0 auto;
}

/* [요구사항 1] 헤더 영역 스타일 */
header {
  text-align: center;
  padding: 32px 24px 28px 24px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  position: relative;
}

header h1 {
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  font-size: 2.05rem;
  font-weight: 800;
  color: var(--accent-color);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
  line-height: 1.3;
}

header p {
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 500;
}

/* [요구사항 2] 우측 상단 닫기 원형 버튼 */
.close-circle-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--accent-color);
  border: 1.5px solid var(--accent-color);
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(16, 124, 65, 0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  padding: 0;
  z-index: 10;
}

.close-circle-btn .material-symbols-outlined {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1;
}

.close-circle-btn:hover {
  background-color: var(--card-bg);
  color: var(--accent-color) !important;
  border-color: var(--accent-color);
  transform: scale(1.12);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.close-circle-btn:hover .material-symbols-outlined {
  color: var(--accent-color) !important;
}

/* [요구사항 1 & 3] 카드 섹션 및 타이틀 스타일 */
.section-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 28px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease;
}

.section-card:hover {
  box-shadow: var(--shadow-hover);
}

.section-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.3px;
}

.section-card h2 .material-symbols-outlined {
  font-size: 1.3em;
  color: var(--accent-color);
  vertical-align: middle;
}

.section-card p {
  margin-bottom: 14px;
  color: var(--text-main);
  line-height: 1.7;
}

/* [요구사항 5] 포맷 뱃지 박스 */
.format-badge-box {
  background-color: var(--accent-light);
  border: 1.5px dashed var(--accent-color);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  font-family: 'Outfit', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-color);
  margin: 20px 0;
  letter-spacing: 0.5px;
}

/* [요구사항 4] 테이블 스타일 */
.table-wrapper {
  overflow-x: auto;
  margin: 18px 0;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background-color: var(--card-bg);
}

th,
td {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  text-align: left;
}

th {
  background-color: var(--th-bg);
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

tbody tr {
  transition: background-color 0.15s ease;
}

tbody tr:hover {
  background-color: var(--accent-light);
}

code {
  font-family: 'Outfit', monospace;
  background-color: var(--accent-light);
  color: var(--accent-color);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 600;
}

/* [요구사항 5] 등락 뱃지 */
.badge-red {
  display: inline-block;
  background-color: var(--red-light);
  color: var(--red-color);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.88rem;
}

.badge-blue {
  display: inline-block;
  background-color: var(--blue-light);
  color: var(--blue-color);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.88rem;
}

.badge-gray {
  display: inline-block;
  background-color: var(--gray-light);
  color: var(--gray-color);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.88rem;
}

/* 종목 편입 ETF 아이콘 뱃지 스타일 */
.etf-rel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-light);
  color: var(--accent-color);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(16, 124, 65, 0.2);
  vertical-align: middle;
  margin-left: 4px;
}

.etf-rel-badge svg,
.etf-rel-badge .material-symbols-outlined {
  width: 16px;
  height: 16px;
  font-size: 16px;
  fill: currentColor;
}

/* [요구사항 5] 캔들 시나리오 카드 그리드 */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.scenario-item {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scenario-item .title {
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--accent-color);
  display: flex;
  align-items: center;
}

.scenario-item ul {
  list-style: none;
  padding-left: 0;
  font-size: 0.88rem;
}

.scenario-item ul li {
  margin-bottom: 5px;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.scenario-item ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-weight: bold;
}

.summary-tag {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  display: flex;
  align-items: center;
}

/* 푸터 영역 */
footer {
  text-align: center;
  margin-top: 40px;
  padding: 20px 0 10px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

footer p {
  margin: 0;
  word-break: keep-all;
}

footer .footer-copy {
  margin-bottom: 6px;
  font-weight: 500;
}

footer .footer-disclaimer {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.9;
}

footer .disclaimer-part {
  display: inline;
}

/* [요구사항 6] 모바일 반응형 쿼리 */
@media (max-width: 768px) {
  body {
    padding: 16px 12px 40px 12px;
  }

  header {
    padding: 24px 44px 20px 16px;
  }

  header h1 {
    font-size: 1.4rem;
    word-break: keep-all;
    padding-right: 10px;
  }

  header p {
    font-size: 0.92rem;
  }

  .close-circle-btn {
    top: 14px;
    right: 12px;
    width: 26px;
    height: 26px;
  }

  .section-card {
    padding: 20px 16px;
    border-radius: 12px;
  }

  .section-card h2 {
    font-size: 1.18rem;
    padding-bottom: 10px;
    margin-bottom: 16px;
  }

  .format-badge-box {
    font-size: 1.0rem;
    padding: 12px 14px;
  }

  footer {
    padding: 15px 10px;
  }

  footer .footer-copy {
    line-height: 1.6;
  }

  footer .footer-divider {
    display: none;
  }

  footer .footer-contact {
    display: block;
    margin-top: 3px;
  }

  footer .footer-disclaimer {
    margin-top: 8px;
    font-size: 0.78rem;
    line-height: 1.45;
    word-break: keep-all;
  }

  footer .disclaimer-part {
    display: block !important;
    margin-top: 2px;
  }
}