/* 메인 화면 전용. 서비스 목록과 이용권 안내 띠. */

/* --- 화면 제목 --- */

/* 이 화면은 제목 바로 아래에 목록의 첫 선이 붙는다. 다른 화면의 40px 는
   제목 다음에 오는 본문 문단을 받기 위한 값이라 여기서는 넓다. */
header.page { margin-bottom: 28px; }

/* --- 서비스 목록 --- */

/* 열리는 기능은 카드로, 준비 중인 항목은 목록으로 보여 준다.
   준비 중인 것을 카드로 늘어놓으면 누를 수 있는 것처럼 보여서
   방문한 사람이 하나씩 눌러 보다가 계속 막힌다. */

.service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.service-list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
}

.service-list .no {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    min-width: 22px;
}

.service-list .name {
    font-size: 14.5px;
    color: var(--sub);
    flex: 1;
}

.service-list .state {
    font-size: 12px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* 열린 기능은 이 모양을 쓴다. 지금은 쓰이는 곳이 없다. */
.service-list li.open .name { color: var(--fg); }
.service-list li.open a { color: var(--fg); text-decoration: none; }
.service-list li.open a:hover { color: var(--key); }
.service-list li.open .state { color: var(--ok); border-color: var(--ok); }

/* --- 가입 안내 --- */

.signup-note {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--muted);
}

.signup-note a { color: var(--key); }