/*
 * 마이페이지 > 내 로드맵 (목록·편집) 전용 배치.
 *
 * .widget-card / .roadmap-track__head|__title|__count / .empty-state / .filter-chips 는
 * css/theme/components.css 의 공용 컴포넌트를, .roadmap-steps/.roadmap-step* 은
 * css/roadmap/roadmap.css 를 재사용한다(편집 화면이 두 스타일시트를 함께 불러온다).
 * 색상은 hex 대신 --mili-* 토큰만 참조한다(design-system.md §2).
 */

/* 빈 목록 안내의 보조 한 줄. .empty-state 는 components.css 의 공용 컴포넌트다. */
.empty-state__hint {
    font-size: 0.875rem;
    color: var(--mili-muted);
}

/* ===== 목록: 새 로드맵 만들기 ===== */

.my-roadmap-new {
    margin-bottom: 1.5rem;
}

.my-roadmap-new__form {
    max-width: 32rem;
    margin-top: 0.75rem;
    padding: 1.25rem;
    background: var(--mili-surface);
    border: 1px solid var(--mili-border);
    border-radius: 0;
}

.my-roadmap-new__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mili-muted);
}

/* ===== 목록: 카드 ===== */

.my-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.my-roadmap-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--mili-surface);
    border: 1px solid var(--mili-border);
    border-radius: 0;
    box-shadow: var(--mili-shadow-sm);
}

.my-roadmap-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--mili-ink);
    text-decoration: none;
    word-break: keep-all;
}

.my-roadmap-card__title:hover,
.my-roadmap-card__title:focus-visible {
    text-decoration: underline;
}

.my-roadmap-card__count {
    margin: 0.375rem 0 1rem;
    font-size: 0.875rem;
    color: var(--mili-muted);
}

/* 진행률 트랙은 카드 높이가 달라도 액션 줄 바로 위에 붙게 아래로 밀어 둔다. */
.my-roadmap-card__progress {
    margin-top: auto;
}

.my-roadmap-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--mili-border);
}

.my-roadmap-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: none;
    border: 1px solid var(--mili-border);
    border-radius: var(--mili-radius-pill);
    font-size: 0.8125rem;
    color: var(--mili-muted);
    text-decoration: none;
    cursor: pointer;
}

.my-roadmap-card__btn:hover,
.my-roadmap-card__btn:focus-visible {
    color: var(--mili-ink);
    border-color: var(--mili-primary-600);
}

.my-roadmap-card__btn--danger:hover,
.my-roadmap-card__btn--danger:focus-visible {
    color: var(--mili-danger);
    border-color: var(--mili-danger);
}

/* ===== 편집 ===== */

.my-roadmap-back {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.my-roadmap-back a {
    color: var(--mili-muted);
    text-decoration: none;
}

.my-roadmap-back a:hover,
.my-roadmap-back a:focus-visible {
    color: var(--mili-ink);
    text-decoration: underline;
}

.my-roadmap-section {
    margin-bottom: 2rem;
}

.my-roadmap-section__title {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mili-ink);
}

.my-roadmap-section form {
    max-width: 32rem;
}

/* 순서·삭제 버튼이 붙으므로 단계 줄의 오른쪽 여백을 확보한다. */
.my-roadmap-steps .roadmap-step {
    align-items: center;
}

.my-roadmap-step__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* 이동·삭제는 각각 독립 POST 폼이라 폼 자체는 배치에 관여하지 않게 둔다. */
.my-roadmap-step__actions form {
    max-width: none;
    margin: 0;
}

.my-roadmap-step__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    background: none;
    border: 1px solid var(--mili-border);
    border-radius: var(--mili-radius-pill);
    color: var(--mili-muted);
    cursor: pointer;
}

.my-roadmap-step__btn:hover:not(:disabled),
.my-roadmap-step__btn:focus-visible:not(:disabled) {
    color: var(--mili-ink);
    border-color: var(--mili-primary-600);
}

.my-roadmap-step__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.my-roadmap-step__btn--danger:hover:not(:disabled),
.my-roadmap-step__btn--danger:focus-visible:not(:disabled) {
    color: var(--mili-danger);
    border-color: var(--mili-danger);
}

/* ===== 편집: 담을 항목 찾기 ===== */

.my-roadmap-search {
    display: flex;
    gap: 0.5rem;
    max-width: 32rem;
    margin: 0.75rem 0 1rem;
}

.candidate-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.candidate-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    background: var(--mili-surface);
    border: 1px solid var(--mili-border);
    border-radius: 0;
}

.candidate-row__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.candidate-row__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mili-ink);
    word-break: keep-all;
}

.candidate-row__subtitle {
    font-size: 0.8125rem;
    color: var(--mili-muted);
}

.candidate-row form {
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
}

.candidate-row__flag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--mili-radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.candidate-row__flag--added {
    background: var(--mili-success);
    color: var(--mili-surface);
}

/* 같은 번호가 다른 유형으로 담혀 담을 수 없는 줄(tb_roadmap_item 복합 PK 제약). */
.candidate-row__flag--blocked {
    background: var(--mili-bg);
    color: var(--mili-muted);
    cursor: help;
}

@media (max-width: 36rem) {
    .candidate-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .my-roadmap-search {
        flex-direction: column;
    }
}