@charset "utf-8";

/*
 * 공지사항 (폰 목업 셸 전용)
 *
 * 기존 규칙은 style.css:2743-2782 에 `.all_notice_wrap .mypage_contbox .notice_list`
 * 로 스코프되어 있었다. 폰 목업 페이지는 style.css / mob.css 를 로드하지 않으므로
 * (셸과 충돌하는 규칙이 대량으로 딸려온다) 필요한 것만 여기로 옮긴다.
 *
 * rem -> px 로 환산했다. 폰 프레임은 360px 고정폭이라 rem 기준이 흔들리면
 * 레이아웃이 어긋난다. 공통 셸은 page/css/mypage_shell.css 가 담당한다.
 */

.notice-content {
    min-height: calc(var(--phone-visible-height, 740px) - 50px);
    padding: 8px 0 30px;
    background: #fff;
}

.notice_list {
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 20px;
}

.notice_list > .item { width: 100%; }

.notice_list > .item .link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}

.notice_list > .item .link .tit {
    flex: 1;
    margin: 0;
    color: #212121;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    word-break: keep-all;
}

.notice_list > .item.point .link .tit {
    color: var(--red);
    font-weight: 700;
}

/* 화살표 — 원본은 img/ico_arrow.png 였다. 신규 화면들과 같은 CSS 삼각형으로 맞춘다. */
.notice_list > .item .link .arrow {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-top: 1.7px solid #555;
    border-right: 1.7px solid #555;
    transform: rotate(45deg);
}

.notice_list > .bar {
    width: 100%;
    height: 1px;
    background: #ededed;
}

.notice_list > .bar:last-child { display: none; }

/* JS 가 데이터 없을 때 삽입하는 요소 */
.notice_list .empty-message {
    width: 100%;
    padding: 40px 0;
    color: #999;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}