/* 용어 풀이: 글 옆 물음표 버튼과 눌렀을 때 뜨는 말풍선 */
.term-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: none;
    /* 눈에 보이는 크기는 작게 두고, 손가락으로 누르기 쉽도록 보이지 않는 영역을 넓힌다. */
    padding: 0; margin: -6px 0 -6px 2px; position: relative;
    border: 0; border-radius: 50%; background: transparent;
    color: #B3A292; cursor: pointer; vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}
.term-help::after { content: ""; position: absolute; inset: -8px; }
.term-help:hover, .term-help[aria-expanded="true"] { color: #C96A1F; }
.term-help:focus-visible { outline: 2px solid #F08A3C; outline-offset: 1px; }

.term-pop {
    position: absolute; z-index: 2000; box-sizing: border-box;
    width: min(300px, calc(100vw - 24px));
    padding: 14px 16px 13px; border-radius: 16px;
    background: #fff; color: #3B2A1E;
    border: 1px solid #F0E6DA; box-shadow: 0 10px 32px rgba(80, 50, 20, 0.18);
    font-family: inherit; font-size: 13px; line-height: 1.6; text-align: left; white-space: normal;
}
.term-pop-title { font-size: 13.5px; font-weight: 800; color: #9A4B0F; margin-bottom: 4px; }
.term-pop-desc { word-break: keep-all; }
.term-pop-note { margin-top: 8px; font-size: 11.5px; color: #A08E7C; }