h3{ margin:0 0 14px; font-size:18px; }

.wordcloud_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

/* ===== Toggle Dropdown ===== */
.dropdown {
  width: 320px;
  position: relative;
    }
    .toggle-btn{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 14px;
      border:1px solid #d9d9d9;
      border-radius:10px;
      background:#f7f7f7;
      cursor:pointer;
      font-size:14px;
    }
    .toggle-btn:focus{
      outline: 2px solid #9ecbff;
      outline-offset: 2px;
    }
    .label{
      display:flex;
      flex-direction:column;
      gap:2px;
      text-align:left;
    }
    .label .title{
      font-size:12px;
      color:#666;
    }
    .label .value{
      font-size:14px;
      font-weight:600;
      color:#111;
    }
    .chev{
      width: 0; height: 0;
      border-left:6px solid transparent;
      border-right:6px solid transparent;
      border-top:8px solid #333;
      transition: transform .15s ease;
      flex: 0 0 auto;
    }
    .dropdown.open .chev{ transform: rotate(180deg); }

    .menu{
      position:absolute;
      top: calc(100% + 8px);
      left:0;
      width:100%;
      max-height: 360px;
      overflow:auto;
      background:#fff;
      border:1px solid #d9d9d9;
      border-radius:10px;
      box-shadow: 0 10px 28px rgba(0,0,0,.08);
      padding:6px;
      display:none;
      z-index: 10;
    }
    .dropdown.open .menu{ display:block; }

    .item{
      width:100%;
      text-align:left;
      border:none;
      background:transparent;
      padding:10px 10px;
      border-radius:8px;
      cursor:pointer;
      font-size:13px;
    }
    .item:hover{ background:#f2f6ff; }
    .item[aria-selected="true"]{
      background:#e8f1ff;
      font-weight:700;
    }

    /* optional: 작은 인덱스 표시 */
    .item .idx{
      display:inline-block;
      min-width: 22px;
      color:#666;
      font-variant-numeric: tabular-nums;
    }

    /* 아래에 선택값 보여주기(필요 없으면 삭제 가능) */
    .out{
      width: min(100% - 32px, 560px);
      margin-top: 18px;
      color: #444;
      font-size: 16px;
    }
    code{ background:#f4f4f4; padding:2px 6px; border-radius:6px; }

    /* 이미지 */

    .emotion-description{
    margin-top: 10px;
    padding-top: 10px;
    }

    .emotion-description img{
    max-width: 500px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    }

    .shap_desc{
      max-width: 540px;
      margin: 10px auto 0;
      color: #454545;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: 0.005em;
      text-align: center;
      text-wrap: pretty;
      overflow-wrap: break-word;
    }

    .shap_desc:first-of-type{
      margin-top: 16px;
      color: #292929;
      font-size: 16px;
    }

    .shap_desc b{
      color: #111;
      font-weight: 650;
    }

    .shap_desc:last-child{
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid #e7e7e7;
      color: #737373;
      font-size: 13px;
      line-height: 1.5;
    }

    .shap_desc:last-child br{
      display: none;
    }

    .shap_desc a{
      color: #315f93;
      font-weight: 600;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }

    .shap_desc a:hover{
      color: #183f6d;
    }

    @media (max-width: 560px){
      .out{
        width: min(100% - 28px, 540px);
      }

      .shap_desc{
        font-size: 14px;
        line-height: 1.7;
      }

      .shap_desc:first-of-type{
        font-size: 15px;
      }
    }