/* 상단 영역 */
#top-bar {
    width: 100%;
    height: 60px;
    padding: 5px 0 5px 0;
    background: #3c8e63;
    display: flex;
    align-items: center;
    position: relative;   /* center-box 정렬용 */
}

/* 중앙 박스: width 80%, 가운데 정렬 */
#center-box {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;   /* 내부 요소 가운데 정렬 */
    margin: 0 auto;            /* 박스를 가로 중앙에 배치 */
    font-size: 18px; color: white;
}

.icon-btn {
    width: 5%;   /* 양쪽 동일한 폭 */
    min-width: 30px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    font-size: 18px;
}

.icon-btn2 {
    width: 5%;   /* 양쪽 동일한 폭 */
    min-width: 40px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: left;
    color: white;
    font-size: 18px;
}

.display_n { display: none; }


.page-tip{
    position:fixed;
    max-width:320px;
    width:max-content;
    background:#e8f5e9;
    color:#1b5e20;
    border:1px solid #c8e6c9;
    padding:12px 16px;
    font-size:14px;
    border-radius:8px;
    display:flex;
    gap:10px;
    z-index:1000;
}


/* 말풍선 꼬리 (위쪽 우측)*/
/*
.page-tip::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 20px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #e8f5e9 transparent;
}
*/


/* 텍스트만 늘어나게 */
.tip-text{
    text-align: center;
    flex:1;
    line-height:1.4;
}

/* 닫기 버튼 고정 */
.tip-close{
    white-space:nowrap;
    flex-shrink:0;
    cursor:pointer;
    opacity:.8;
    padding:4px 6px;
}

.tip-close:hover{
    opacity:1;
}

.page-tip.hide {
    opacity: 0;
}