body {
      margin: 0;
      padding: 0;
      font-family: '맑은 고딕', sans-serif;
      background: #f9f9f9;
    }

    /* -----------------------------------
       1) 고정된 위치에 떠 있는 위젯 컨테이너
    ------------------------------------ */
    #chat-widget {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 10000;
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-start;
    }

    /* -----------------------------------
       2) 작은 원형 아이콘 (항상 보이는 버튼)
    ------------------------------------ */
    #chat-toggle {
        /* 원형 스타일 제거 */
        background: none;
        border: none;
        box-shadow: none;
        /* 크기는 아이콘에 딱 맞게 */
        width: auto;
        height: auto;
        padding: 0;
        cursor: pointer;
    }

    #chat-toggle img#chat-icon {
        background: transparent !important;
        display: block;
        width: 100px;    /* 원하시는 아이콘 크기로 조정 */
        height: 100px;
    }



    /* -----------------------------------
       3) 챗봇 창 (기본 숨김)
    ------------------------------------ */
    #chat-window {
      display: none;            /* 기본 숨김 */
      width: 360px;
      height: 500px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
      overflow: hidden;
      flex-direction: column;
    }

    /* 챗 위젯에 open 클래스가 붙으면 챗봇 창 보이기 */
    #chat-widget.open #chat-window {
      display: flex;
    }

    /* -----------------------------------
       4) 챗봇 창 내부 스타일
    ------------------------------------ */
    #chat-window header {
      background: #003366;
      color: #fff;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    #chat-window header h1 {
      margin: 0;
      font-size: 16px;
    }
    #chat-close {
      background: none;
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }

    #chat-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 8px;
      overflow: hidden;
    }
    #section-list {
      display:flex; flex-wrap:wrap; gap:8px;
      max-height:100px; overflow-y:auto; margin-bottom:12px;
    }
    #section-list button {
      border:1px solid #aaa; border-radius:20px;
      padding:3px 12px; background:#fff; cursor:pointer;
      white-space:nowrap; font-size:12px;
    }
    #section-list button:hover { background:#e6f0ff; }

    /* === 섹션 콘텐츠 영역 패딩 줄이기 === */
    #section-content {
      flex: 1;
      border: 1px solid #ddd;
      background: #fff;
      /* padding:12px → padding-top:6px로만 줄이고, 나머지는 유지 */
      padding: 1px 12px 18px;   /* top 4px, right/left 12px, bottom 8px */
      white-space: pre-line;
      overflow-y: auto;
      font-size: 13px;
    }
    /* === 제목 위쪽 여백 줄이기 === */
    #section-content h2,
    #section-content h3,
    #section-content h4 {
      margin-top: 8px;    /* 기존보다 살짝만 띄움 */
      margin-bottom: 4px;
    }    

    /* 1) 푸터를 flex 컨테이너로 */
  #chat-window footer {
    display: flex;
    align-items: center;      /* 세로 가운데 정렬 */
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #ddd;
    background: #fafafa;
  }

  /* === 입력창 === */
  #question {
    flex: 1;
    height: 44px;             /* 버튼 높이와 딱 맞춤 */
    padding: 6px 8px;
    font-family: '맑은 고딕', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    resize: none;
    box-sizing: border-box;
    border: 1px solid #ccc;

  }

  /* === 질문하기 버튼 === */
  #send-btn {
    flex-shrink: 0;
    height: 44px;             /* 입력창과 동일 높이 */
    padding: 0 16px;
    font-size: 13px;
    background: #0066cc;
    color: #fff;
    border: none;

    cursor: pointer;
  }
  #send-btn:hover {
    background: #005bb5;
  }