/*
 * REDESIGN_GM030 — マイリスト (/mylist) + its もっと見る sub-pages.
 * Figma: desktop 2051:35280 (content 960) / mobile 1909:73378 (390). Numbers: 01_doc/REDESIGN_GM030/spec-vi.md
 */

/* theme.min.css gives every bare h1-h6/p/span/a margin-bottom:1em + font-weight:500 + line-height:1. */
.mylist-page h1,
.mylist-page h2,
.mylist-page h3,
.mylist-page p,
.mylist-page span,
.mylist-page a {
    margin: 0;
    clear: none;
    font-weight: inherit;
    line-height: inherit;
}

/* Figma font: Noto Sans (Latin) first, Noto Sans JP only for the glyphs it lacks (loaded in
   mylist/partials/styles). `*` also beats theme.min.css, which sets Hiragino on h1-h6/p/span/a. */
.mylist-page,
.mylist-page * {
    font-family: "Noto Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

.mylist-page {
    padding: 35px 0 60px;
    color: #333;
}

/* ---- Page title (Figma 2051:35532) ---- */
.mylist-page h1.mylist-title {
    font-size: 36px !important;
    font-weight: 500;
    line-height: 36px;
    color: #3264be;
    padding-bottom: 7px;
    border-bottom: 6px solid #3264be;
    margin-bottom: 50px;
}

/* ---- Section (Figma Frame 627275/627276/627272: padding 0 30, gap 20) ---- */
.mylist-section {
    padding: 0 30px;
    margin-bottom: 50px;
}

.mylist-page h2.mylist-section__title {
    font-size: 24px !important;
    font-weight: 500;
    line-height: 25px;
    color: #3264b4;
    background: #ecf4fe;
    padding: 7px 10px;
    border-bottom: 1px solid #3264b4;
    margin-bottom: 20px;
}

/* ---- Card grid (Figma Frame 627188: wrap, gap 24) ---- */
.mylist-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.mylist-grid + .mylist-group,
.mylist-group + .mylist-group {
    margin-top: 20px;
}

/* ---- Compact job card (Figma Job Card, Device=Desktop 438 x 129) ---- */
.mylist-card {
    position: relative;
    width: calc((100% - 24px) / 2);
    background: #fff;
    border: 1px solid #f3f3f3;
    box-sizing: border-box;
}

.mylist-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.mylist-card__link:hover {
    color: inherit;
    text-decoration: none;
    opacity: .8;
}

.mylist-card__head {
    padding: 15px 50px 10px 15px;
}

.mylist-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mylist-page span.mylist-tag {
    display: inline-block;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 400;
    line-height: 11px;
    color: #333;
    background: #e8e8e8;
}

.mylist-page span.mylist-tag--area {
    color: #fff;
    background: #a8a8a8;
}

.mylist-page span.mylist-tag--ended {
    color: #fff;
    background: #666;
}

.mylist-page span.mylist-tag--pr {
    color: #fff;
    background: #f5871f;
    font-weight: 700;
}

.mylist-page p.mylist-card__name {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    color: #4d4d4d;
    /* 14/14 clips descenders; keep the row pitch while leaving room for them. */
    padding-bottom: 3px;
    margin-bottom: -3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Info Group: 3 columns, gap 5, padding 4 15 15 15. Figma splits them equally; the date column is a
   little wider here because it also carries 「他N件」 (D-7), which Figma does not draw. */
.mylist-card__info {
    display: grid;
    /* B2026-10-0185: two items (months / 就業日 + 給与), the time item was dropped. The wage takes
       its natural width; the months keep at least 40% and get the rest (long lists end in …). */
    grid-template-columns: minmax(40%, 1fr) minmax(0, max-content);
    gap: 5px;
    padding: 4px 15px 15px;
}

.mylist-card__info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mylist-card__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #fff0a8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mylist-card__icon svg {
    width: 14px;
    height: 14px;
}

.mylist-card__icon--wage svg {
    width: 10px;
    height: 13px;
}

.mylist-page span.mylist-card__text {
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ID Group: full width strip, #FAFAFA, right aligned */
.mylist-card__id {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    background: #fafafa;
    font-size: 11px;
    line-height: 16px;
    color: #7f7f7f;
}

.mylist-card__id svg {
    width: 12px;
    height: 11px;
}

.mylist-page span.mylist-card__id-text {
    font-weight: 400;
}

/* Bookmark (Figma Button / ReviewList / Icon 34 x 34) */
.mylist-bookmark {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e8e8e8;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}

.mylist-bookmark svg {
    width: 14px;
    height: 18px;
}

.mylist-bookmark path {
    fill: #d4d4d4;
}

.mylist-bookmark.is-on {
    border-color: #ffe4df;
    background: #fff3f1;
}

.mylist-bookmark.is-on path {
    fill: #ff7e64;
}

.mylist-bookmark:focus-visible {
    outline: 1px solid #ff7e64;
    box-shadow: 0 0 0 3px rgba(255, 126, 100, .25);
}

/* ---- Group headers: favorite pharmacy / saved condition (Figma Notification settings) ---- */
.mylist-group__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 10px 20px 20px;
}

.mylist-page .mylist-group__name {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: #264b88;
    text-decoration: none;
}

.mylist-page a.mylist-group__name:hover {
    text-decoration: underline;
}

.mylist-group__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mylist-page span.mylist-badge {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid #ffcfc5;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    color: #ff7e64;
}

.mylist-page a.mylist-group__cond {
    font-size: 13px;
    font-weight: 500;
    line-height: 13px;
    color: #477acc;
    text-decoration: underline;
}

.mylist-group__empty {
    padding: 0 20px;
}

/* Per-pharmacy expand (PBI-146, > 2 jobs): only the first 2 cards show until expanded. */
.mylist-card--extra {
    display: none;
}

.mylist-group.is-expanded .mylist-card--extra {
    display: block;
}

/* ---- Links under a section / group (Figma Button / More: right aligned, 14px #477ACC) ---- */
.mylist-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 15px 5px 0;
}

.mylist-page .mylist-link {
    display: inline-block;
    padding: 7px 10px 7px 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    color: #477acc;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.mylist-page .mylist-link:hover {
    text-decoration: underline;
}

.mylist-links--group {
    padding-top: 10px;
}

/* ---- Recommendation perspective sub-heading ---- */
.mylist-page h3.mylist-subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: #264b88;
    padding: 20px 10px 20px 20px;
}

/* ---- Empty / guest ---- */
.mylist-page p.mylist-empty,
.mylist-page p.mylist-guest {
    padding: 10px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #7f7f7f;
}

.mylist-guest-actions {
    display: flex;
    gap: 10px;
    padding: 0 20px;
}

.mylist-page a.mylist-guest-btn {
    display: inline-block;
    min-width: 140px;
    padding: 10px 20px;
    border: 1px solid #3264b4;
    border-radius: 4px;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #3264b4;
    text-decoration: none;
}

.mylist-page a.mylist-guest-btn--primary {
    color: #fff;
    background: #3264b4;
}

/* ---- Paging (recommendation sub-page) ---- */
.mylist-paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.mylist-page a.mylist-paging__link {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #3264b4;
    border-radius: 4px;
    font-size: 14px;
    line-height: 14px;
    color: #3264b4;
    text-decoration: none;
}

.mylist-page span.mylist-paging__count {
    font-size: 13px;
    color: #666;
}

/* ================= Mobile (Figma Mobile / Default 390) ================= */
@media (max-width: 765px) {
    .mylist-page {
        padding: 0 0 40px;
    }

    .mylist-page h1.mylist-title {
        font-size: 16px !important;
        line-height: 16px;
        color: #3264b4;
        padding: 16px 0 4.8px 16px;
        border-bottom: 3.2px solid #3264b4;
        margin-bottom: 30px;
    }

    .mylist-section {
        padding: 0;
        margin-bottom: 30px;
    }

    .mylist-page h2.mylist-section__title {
        font-size: 15px !important;
        line-height: 15px;
        color: #3264be;
        padding: 8px 15px;
        border-bottom-color: #3264be;
        margin-bottom: 15px;
    }

    /* 1 column, no gap: cards are separated by their own top/bottom 1px lines. */
    .mylist-grid {
        flex-direction: column;
        gap: 0;
    }

    .mylist-card {
        width: 100%;
        border-left: 0;
        border-right: 0;
        margin-top: -1px;
    }

    .mylist-card__head {
        padding: 15px 58px 10px 15px;
    }

    .mylist-card__tags {
        gap: 4px;
    }

    .mylist-page span.mylist-tag {
        padding: 4px 7px;
        font-size: 9px;
        line-height: 9px;
    }

    .mylist-page p.mylist-card__name {
        margin-top: 10px;
        font-size: 12px;
        line-height: 12px;
    }

    .mylist-card__info-item {
        gap: 5px;
    }

    .mylist-card__icon {
        flex-basis: 16px;
        width: 16px;
        height: 16px;
    }

    .mylist-card__icon svg {
        width: 11px;
        height: 11px;
    }

    .mylist-card__icon--wage svg {
        width: 8px;
        height: 11px;
    }

    .mylist-page span.mylist-card__text {
        font-size: 11px;
        line-height: 16px;
    }

    .mylist-card__id {
        font-size: 10px;
        line-height: 15px;
    }

    .mylist-bookmark {
        width: 28px;
        height: 28px;
    }

    .mylist-bookmark svg {
        width: 10px;
        height: 13px;
    }

    .mylist-group__head {
        justify-content: space-between;
        gap: 10px;
        padding: 20px 10px 20px 20px;
        border-bottom: 1px solid #f3f3f3;
    }

    .mylist-page .mylist-group__name {
        font-size: 14px;
        line-height: 14px;
    }

    .mylist-page span.mylist-badge {
        padding: 3px 8px;
        font-size: 11px;
        line-height: 11px;
    }

    /* Saved condition header stacks: 検索条件N over the link. */
    .mylist-group__head--cond {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6px;
    }

    .mylist-page a.mylist-group__cond {
        font-size: 11px;
        line-height: 13px;
    }

    .mylist-grid + .mylist-group,
    .mylist-group + .mylist-group {
        margin-top: 10px;
    }

    .mylist-links {
        padding: 10px 10px 10px 5px;
    }

    .mylist-page .mylist-link {
        padding: 5px 0 5px 10px;
        font-size: 12px;
        line-height: 12px;
    }

    .mylist-page h3.mylist-subtitle {
        font-size: 14px;
        line-height: 14px;
    }
}