@charset "utf-8";

/* 해빗트래커 게시판 스킨 habit */

#bo_list .habit-wrap {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 24px;
    background: #fdfcf8;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-sizing: border-box;
}

/* 상단 영역 */
#bo_list .habit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}
#bo_list .habit-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #333;
    /* 게시판 제목을 영문 입력과 무관하게 항상 대문자로 표시 */
    text-transform: uppercase;
}
#bo_list .habit-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
#bo_list .habit-month-label {
    min-width: 92px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
}
#bo_list .habit-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    color: #666;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.15s;
}
#bo_list .habit-nav-btn:hover {
    border-color: var(--habit-accent, #4a7c59);
    color: var(--habit-accent, #4a7c59);
}

/* 습관 한 줄 영역 */
#bo_list .habit-row { margin-bottom: 24px; }
#bo_list .habit-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}
#bo_list .habit-name {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
}
#bo_list .habit-count {
    font-size: 0.78rem;
    color: #999;
}
#bo_list .habit-count-num { font-weight: 700; }
#bo_list .habit-edit {
    margin-left: 8px;
    font-size: 0.72rem;
    color: #bbb;
    text-decoration: none;
}
#bo_list .habit-edit:hover { color: #666; text-decoration: underline; }
#bo_list .habit-del:hover { color: #c0392b; }

/* 날짜 원 그리드 */
#bo_list .habit-grid {
    display: grid;
    grid-template-columns: repeat(var(--habit-cols-pc, 16), 1fr);
    gap: 5px;
}
#bo_list .habit-day {
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: 0;
    border: 1px solid;
    border-radius: 50%;
    background: transparent;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s;
}
#bo_list .habit-day:hover:not(.readonly) { transform: scale(1.1); }
#bo_list .habit-day.checked { font-weight: 700; }
#bo_list .habit-day.today:not(.checked) { border-width: 2px; }
#bo_list .habit-day.readonly { cursor: default; opacity: 0.75; }

/* 비어 있을 때 */
#bo_list .habit-empty {
    padding: 60px 0;
    text-align: center;
    color: #999;
    font-size: 0.9rem;
    line-height: 2;
}
#bo_list .habit-empty a {
    color: var(--habit-accent, #4a7c59);
    text-decoration: underline;
}

/* 하단 영역 */
#bo_list .habit-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}
#bo_list .habit-total { font-size: 0.82rem; color: #777; }
#bo_list .habit-total b { color: #333; }
#bo_list .habit-write-btn {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 20px;
    background: var(--habit-accent, #4a7c59);
    color: #fff;
    font-size: 0.8rem;
    text-decoration: none;
    transition: opacity 0.15s;
}
#bo_list .habit-write-btn:hover { opacity: 0.88; }

/* 모바일 */
@media (max-width: 640px) {
    #bo_list .habit-wrap { padding: 20px 14px; }
    #bo_list .habit-grid {
        grid-template-columns: repeat(var(--habit-cols-mo, 8), 1fr);
        gap: 4px;
    }
    #bo_list .habit-day { font-size: 0.68rem; }
    #bo_list .habit-title { font-size: 1.1rem; }
}

/* 글쓰기 폼 */
#bo_w .habit-form-wrap {
    max-width: 560px;
    margin: 0 auto;
}
#bo_w .habit-form-title {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--habit-accent, #4a7c59);
    font-size: 1.1rem;
    font-weight: 600;
}
#bo_w .habit-field { margin-bottom: 18px; }
#bo_w .habit-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
}
#bo_w .habit-field label .req { color: var(--habit-accent, #4a7c59); }
#bo_w .habit-field .frm_input {
    width: 100%;
    box-sizing: border-box;
}
#bo_w .habit-field .desc {
    margin-top: 5px;
    font-size: 0.74rem;
    color: #aaa;
}

/* 색상 선택 */
#bo_w .habit-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#bo_w .habit-color-item { position: relative; }
#bo_w .habit-color-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
#bo_w .habit-color-item .swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.12s;
}
#bo_w .habit-color-item .swatch:hover { transform: scale(1.08); }
#bo_w .habit-color-item input[type="radio"]:checked + .swatch {
    border-color: #333;
}
#bo_w .habit-color-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
#bo_w .habit-color-custom input[type="color"] {
    width: 38px;
    height: 38px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
}
#bo_w .habit-color-custom span { font-size: 0.78rem; color: #888; }

/* 폼 버튼 */
#bo_w .habit-form-btns {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}
#bo_w .habit-form-btns button,
#bo_w .habit-form-btns a {
    display: inline-block;
    padding: 9px 26px;
    border: 1px solid #ddd;
    border-radius: 22px;
    background: #fff;
    color: #666;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}
#bo_w .habit-form-btns button.point {
    background: var(--habit-accent, #4a7c59);
    border-color: var(--habit-accent, #4a7c59);
    color: #fff;
}
#bo_w .habit-form-btns button.point:hover { opacity: 0.88; }