body {
      margin: 0;
      padding: 0;
      font-family: "Pretendard", "Noto Sans KR", sans-serif;
      background-color: #ffffff;
    }
    .forest {
      position: relative;
      min-height: 150vh;
      padding: 60px 20px 40px;
      background: linear-gradient(to bottom, #ffffff 0%, #eaf9e5 100%);
    }
    .tree, .subscriber {
      position: absolute;
      width: 64px;
      height: 100px;
      cursor: pointer;
    }
    .tree svg, .subscriber svg {
      width: 64px;
      height: 100%;
    }
    .footer {
      text-align: center;
      padding: 30px;
      color: #777;
      font-size: 14px;
    }
    h1 {
      text-align: center;
      margin-top: 40px;
      font-weight: 500;
      color: #2e5f3e;
      font-size: 2em;
    }
    .korean-title {
      font-family: 'Dongle', sans-serif;
    }
    .chinese-title {
      font-family: 'M PLUS Rounded 1c', cursive;
    }
    .popup, .email-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border-radius: 5px;
      padding: 12px;
      width: 240px; 
      max-width: 90%;
      border: 1px solid #ccc;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      z-index: 1000;
    }
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      z-index: 999;
    }
    .email-popup h3 {
      font-family: 'Dongle', sans-serif;
      font-size: 24px;
      font-weight: 400;
      margin-top: 0; 
      margin-bottom: 0 0 2px 0;
    }
    
      .input-field {
    width: calc(100% - 16px);
    padding: 3px;
    margin-top: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
      }

    .email-popup button {
      margin-top: 10px;
      padding: 4px 8px;
      background-color: transparent;  /* 기본은 테두리X, 투명 배경 */
      color: #2e5f3e;
      border: none;                   /* 테두리 제거 */
      font-family: 'Pretendard', sans-serif;
      font-size: 12px;
      cursor: pointer;
      float: right;                   /* 오른쪽 정렬 */
      transition: all 0.3s ease;
    }
    .email-popup button:hover {
      background-color: #2e5f3e;
      color: white;
    }
    
    .popup h3 {
      font-family: 'Dongle', sans-serif;
      font-size: 28px; /* 글씨가 너무 작을 수 있으니 적절히 키우기 */
      font-weight: 400; /* Dongle은 얇은 폰트이므로 굵게 안 하는 게 어울림 */
      margin: 0 0 10px 0;
    }

    /*태그 겹칠 때 목록 항목*/
     a {
      color: #2e5f3e;
      text-decoration: none;
    }
     a:hover {
      text-decoration: underline;
    }


    .info-icon {
      font-family: 'Dongle', sans-serif;
      cursor: pointer;
      display: inline-flex;          
      align-items: center;            /* 세로 중앙 정렬 */
      justify-content: center;        /* 가로 중앙 정렬 */ 
      font-size: 0.7em; 
      line-height: 1;  
      color: #2e5f3e;
      border: 1px solid #2e5f3e;
      border-radius: 50%;
      padding: 0 2px; 
      margin-left: 3px;     
      top: -4px;              /* 전체 아이콘 위치 살짝 위로 */
      transform: translateY(0.5px); /* 글자 세로 위치 미세 조정 */
      transition: background-color 0.3s, color 0.3s;
    }
    
    .info-icon:hover {
      background-color: #2e5f3e;
      color: white;
    }
    
    h1 {
      position: relative; /* intro-panel 위치 기준점 */
    }
    
    .intro-panel {
      font-family: "Pretendard", "Noto Sans KR", sans-serif;
      font-weight: 300;
      position: absolute;
      top: 100px; 
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 600px;
      background: rgba(46, 95, 62, 0.8);
      color: white;
      padding: 0 20px;
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 1s ease, opacity 1s ease, padding 1s ease;
    }


        @media screen and (min-width: 1024px) { /* 데스크톱 해상도 이상 */
          .intro-panel {
            max-width: 700px;
          }
        }

    .intro-panel.open {
      padding: 20px;
      opacity: 1;
    }

   .intro-panel a {
      color: white;
      text-decoration: underline;
    }

.citation {
  color: #eaf9e5; 
  cursor: pointer;
  position: relative;
  font-weight: bold;
}

/* 데스크톱만 ::after 사용 */
@media (min-width: 769px) {
  .citation::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e6f0ea;
    color: #333;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.9em;
    font-weight: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 10;
  }

  .citation:hover::after,
  .citation:focus::after {
    opacity: 1;
  }
}

/* 모바일용 tooltip-box */
#tooltip-box {
  position: absolute;
  background-color: #e6f0ea;
  color: #333;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: normal;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1000;
  white-space: nowrap;
}