@charset "utf-8";
/* =============================================================
   마이페이지 > My Contents (History / Bookmarks)
   Figma: MDEK 디자인 섹션 1845:2185
     - filter-list-wrap  1848:2444
     - list_li_hover(PC) 1848:2474
     - list_li(Mobile)   1848:3059
   수치·색상은 Figma 노드 값을 그대로 옮긴 것. 임의 조정 금지.
   ============================================================= */

:root {
    --mc-green:        #71BF44;  /* 유형 필터 선택 / 날짜칩 선택 */
    --mc-orange:       #FF7C0A;  /* 유·무료 필터 선택 */
    --mc-chip-bg:      #FFFFFF;
    --mc-chip-line:    #DDDDDD;
    --mc-panel-bg:     #F8F8F8;  /* 필터 패널 / 카테고리칩 */
    --mc-card-line:    #EEEEEE;
    --mc-thumb-bg:     #DDDDDD;
    --mc-text:         #000000;
    --mc-title:        #111111;  /* 페이지 타이틀 */
    --mc-gray:         #666666;  /* 설명문 / placeholder / 총건수 / 날짜 */
    --mc-time:         rgba(115, 123, 140, 0.5);  /* 리스트 아이템의 조회 시각 전용 */
    --mc-free-bg:      rgba(123, 255, 47, 0.1);
    --mc-free-text:    #5EC424;
    --mc-bookmark:     #AAAAAA;  /* 북마크 해제 상태 (외곽선 하트) */
    --mc-bookmark-on:  #EF4452;  /* 북마크 설정 상태 (채워진 하트) */
    --mc-trash:        #F64C4C;
}

/* ---------- 페이지 고정 아이콘 ----------
   SVG 는 JS 가 주입하고 색상·크기만 여기서 정한다.
   전부 fill="currentColor" 라 color 로 제어된다. */
.mc-icon-history,
.mc-icon-heart-title,
.mc-icon-heart,
.mc-search-icon,
.mc-icon-filter,
.mc-icon-reset,
.mc-icon-calendar { display: inline-flex; line-height: 0; flex: 0 0 auto; }

.mc-icon-history      svg { width: 38px; height: 38px; }
.mc-icon-heart-title svg { width: 32px; height: 28px; }
.mc-icon-heart        svg { width: 19px; height: 17px; }
.mc-search-icon       svg { width: 20px; height: 20px; }
.mc-icon-filter       svg { width: 15px; height: 15px; }
.mc-icon-reset        svg { width: 16px; height: 16px; }
.mc-icon-calendar     svg { width: 17px; height: 17px; }

.mc-icon-history      { color: var(--mc-green); }
.mc-icon-heart-title { color: var(--mc-trash); }
.mc-icon-heart        { color: var(--mc-text); }
.mc-search-icon       { color: #666666; }
.mc-icon-filter       { color: var(--mc-text); }
.mc-icon-reset        { color: #666666; }
.mc-icon-calendar     { color: currentColor; }

/* ---------- 페이지 헤더 ---------- */
.mc-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-page-title {
    display: flex;
    /* QC No.1 : 타이틀과 건수(case)의 글자 밑선을 맞춘다. */
    align-items: baseline;
    gap: 2px;
    font-family: 'SUIT', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 39.9px;
    letter-spacing: -0.4px;
    color: var(--mc-title);
}

/* 아이콘은 밑선 정렬에서 뺀다.
   inline-flex 안의 SVG 는 baseline 이 자기 아래쪽 모서리라, 그대로 두면
   글자 밑선에 "바닥"이 붙어 아이콘 전체가 위로 뜬다.
   (히스토리 38px 아이콘 기준 4.5px, 북마크 28px 하트 기준 3.0px 들림)
   타이틀 줄 높이도 40px -> 47px 로 늘어난다. 세로 중앙에 두는 편이 맞다. */
.mc-page-title .mc-title-icon { align-self: center; }

.mc-title-count {
    font-size: 14.4px;
    line-height: 23px;
    color: var(--mc-gray);
    letter-spacing: -0.4px;
}

.mc-bookmarks-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'SUIT', sans-serif;
    font-size: 17px;
    line-height: 25.6px;
    letter-spacing: -0.4px;
    color: var(--mc-text);
}

/* reset.css 의 `p:not(.nocss p){margin:0}` 은 특이도가 (0,1,2) 라
   단일 클래스(0,1,0)로는 못 이긴다. p 요소인 .mc-page-desc / .mc-total 은
   부모까지 붙여 (0,2,0) 으로 올려야 margin 이 실제로 먹는다. */
.mypage_right_wrap .mc-page-desc {
    margin-top: 8px;
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: -0.4px;
    color: var(--mc-gray);
}

/* ---------- 검색 ---------- */
.mc-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    padding: 14px;
    border: 1px solid var(--mc-chip-line);
    border-radius: 10px;
    background: var(--mc-chip-bg);
}

.mc-search-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: -0.4px;
    color: var(--mc-text);
}

.mc-search-input::placeholder { color: var(--mc-gray); }

/* ---------- 필터 ---------- */
.mc-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 38px;
    margin-bottom: 9px;
}

.mc-filter-label,
.mc-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: -0.4px;
    color: var(--mc-text);
}

.mc-filter-reset {
    padding: 6px 10px;
    border: 1px solid var(--mc-chip-line);
    border-radius: 6px;
    background: var(--mc-chip-bg);
    font-size: 13.333px;
    line-height: 16.6px;
    color: var(--mc-gray);
    cursor: pointer;
}

.mc-filter-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 58px;   /* 시안 950x58 */
    padding: 14px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--mc-panel-bg);
}

.mc-chip-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.mc-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px;
    border: 1px solid var(--mc-chip-line);
    border-radius: 100px;
    background: var(--mc-chip-bg);
    font-family: 'SUIT', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 16.8px;
    letter-spacing: -0.4px;
    color: var(--mc-text);
    white-space: nowrap;
    cursor: pointer;
}

/* QC No.3 : 달력 아이콘과 Date 글자의 밑선이 어긋나 보인다.
   폰트 메트릭 차이라 글자 쪽만 2px 내린다. */
.mc-chip-date #mc_date_label { margin-top: 2px; }

/* 선택 상태 — 유형은 초록, 유·무료는 주황 */
.mc-chip.is-on {
    border-color: transparent;
    background: var(--mc-green);
    color: #FFFFFF;
}

.mc-chip-price.is-on {
    background: var(--mc-orange);
}

/* 날짜칩 — 기간이 설정되면 초록 + 기간 라벨로 바뀐다.
   우측 정렬은 .mc-calendar-wrap 이 담당한다(위 캘린더 섹션 참고). */
.mc-chip-date { gap: 2px; }
.mc-chip-date.is-on {
    border-color: transparent;
    background: var(--mc-green);
    color: #FFFFFF;
}

.mc-filter-divider {
    display: inline-block;
    width: 1px;
    height: 23px;
    margin: 0 5px;
    background: var(--mc-chip-line);
}

/* ---------- 총 건수 ---------- */
.mypage_right_wrap .mc-total {
    margin-top: 40px;
    font-family: 'SUIT', sans-serif;
    font-size: 14.4px;
    line-height: 23px;
    letter-spacing: -0.4px;
    color: var(--mc-gray);
}

.mc-total b { color: var(--mc-text); font-weight: 700; }

/* ---------- 날짜 그룹 ----------
   디자인 세로 리듬(1848:2186 실측):
     총건수 → 첫 그룹헤더 38 / 그룹헤더 → 아이템 20 / 아이템 → 아이템 20
     아이템 → 다음 그룹헤더 60
   리스트 gap 을 20 으로 두고 두 번째 이후 그룹헤더에만 40 을 더한다. */
.mc-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

.mc-group-head:not(:first-child) { margin-top: 40px; }

.mc-group-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'SUIT', sans-serif;
    letter-spacing: -0.4px;
    color: var(--mc-text);
}

/* Today / Yesterday 는 강조, 그 외 날짜는 일반 */
.mc-group-title .mc-group-label {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: var(--mc-text);
}

.mc-group-title .mc-group-date {
    font-size: 14.4px;
    font-weight: 400;
    line-height: 23px;
    color: var(--mc-gray);
}

.mc-group-head.is-plain .mc-group-label { display: none; }

.mc-group-count {
    font-family: 'SUIT', sans-serif;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.4px;
    color: var(--mc-green);
}

/* ---------- 리스트 아이템 ---------- */
.mc-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 38px;
}

.mc-item {
    display: flex;
    align-items: stretch;
}

/* 썸네일은 목적지를 아는 유형에서만 <a> 로 그려진다.
   <a> 는 기본이 inline 이라 width/height 가 먹지 않으므로 display 를 지정한다.
   (flex 아이템이라 대개는 블록화되지만, 규칙을 명시해 두는 편이 안전하다) */
.mc-item-thumb {
    display: block;
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    border: 1px solid var(--mc-card-line);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: var(--mc-thumb-bg) center / cover no-repeat;
    /* QC No.11 : hover 확대를 위해 넘치는 부분을 잘라낸다. */
    position: relative;
    overflow: hidden;
}

/* QC No.11 : 카드에 hover 하면 썸네일이 커진다.
   썸네일은 <img> 가 아니라 인라인 style 의 background-image 라,
   요소 자체를 scale 하면 테두리와 모서리까지 같이 커진다.
   그래서 background-image 를 물려받은 가상 요소만 확대한다. */
.mc-item-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.4s;
}

.mc-item:hover .mc-item-thumb::before {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .mc-item-thumb::before { transition: none; }
}

.mc-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px 20px 24px;
    border: 1px solid var(--mc-card-line);
    border-radius: 0 8px 8px 0;
    background: #FFFFFF;
}

.mc-item-top { display: flex; flex-direction: column; gap: 9px; }

.mc-item-meta { display: flex; align-items: center; gap: 4px; }

/* 콘텐츠 유형 배지.
   배경 pill·아이콘·라벨이 모두 들어있는 완성 SVG 라 여기서 다시 그리지 않는다.
   원본 비율(예: Program 89x26)을 유지하려고 높이만 고정하고 폭은 auto 로 둔다. */
.mc-type-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
}

.mc-type-chip svg {
    display: block;
    height: 26px;
    width: auto;
}

/* 유형별 색상은 배지 SVG 자체가 들고 있으므로 CSS 에서 지정하지 않는다.
   배지가 없는 유형(놀이자신감·놀이랩·미분류)은 서버에서 제외되어 도착하지 않는다. */

.mc-item-time {
    font-family: 'SUIT', sans-serif;
    font-size: 14.4px;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: var(--mc-time);
}

/* 제목 — 최대 2줄, 말줄임 */
.mc-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: -0.4px;
    color: var(--mc-text);
}

/* 제목 링크는 inline 이라 부모 <p> 의 2줄 말줄임이 그대로 유지된다.
   reset.css 가 이미 color:inherit / text-decoration:none 을 주므로
   여기서는 클릭 가능하다는 표시만 더한다. */
.mc-item-title-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 키보드 이동 시 어디에 있는지 보이게 한다 (마우스 클릭에는 표시하지 않음) */
.mc-item-thumb:focus-visible,
.mc-item-title-link:focus-visible {
    outline: 2px solid var(--mc-green);
    outline-offset: 2px;
}

.mc-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mc-item-tags { display: flex; align-items: center; gap: 8px; min-width: 0; }

.mc-item-menu {
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: var(--mc-text);
    white-space: nowrap;
}

.mc-tag-group { display: flex; align-items: center; gap: 4px; }

.mc-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 50px;
    background: var(--mc-panel-bg);
    font-family: 'SUIT', sans-serif;
    font-size: 11px;
    line-height: 13.7px;
    letter-spacing: -0.4px;
    color: var(--mc-text);
    white-space: nowrap;
}

.mc-tag-free {
    background: var(--mc-free-bg);
    color: var(--mc-free-text);
}

/* ---------- 액션 버튼 (PC: hover 시 노출) ---------- */
.mc-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .15s ease;
}

.mc-item:hover .mc-item-actions { opacity: 1; }

.mc-action-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

/* 아이콘은 Figma 원본 벡터이고 fill="currentColor" 라 color 로만 제어한다 */
.mc-action-btn svg { height: 20px; width: auto; display: block; }
.mc-btn-bookmark        { color: var(--mc-bookmark); }
.mc-btn-bookmark.is-on  { color: var(--mc-bookmark-on); }
.mc-btn-delete          { color: var(--mc-trash); }

/* 북마크 페이지에서는 삭제 버튼이 없고 하트가 상시 노출 */
.mc-list.is-bookmarks .mc-item-actions { opacity: 1; }

/* ---------- 캘린더 ---------- */
/* Figma "Calendar" 1848:2709 (318x356) */
/* 날짜칩을 감싸는 래퍼가 실제 flex 아이템이므로, 시안의 우측 정렬
   (스페이서 Frame 93) 은 버튼이 아니라 이 래퍼에 걸어야 한다. */
.mc-calendar-wrap { position: relative; margin-left: auto; }

.mc-calendar {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    right: 0;
    width: 318px;
    padding: 16px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(12, 12, 13, 0.12);
}

.mc-calendar[hidden] { display: none; }

.mc-cal-close {
    position: absolute;
    top: 16px; right: 20px;
    width: 20px; height: 20px;
    padding: 0; border: 0; background: transparent; cursor: pointer;
    color: #1C1B1F; line-height: 0;
}

.mc-cal-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* QC No.5 : 닫기(X) 버튼과 겹치지 않도록 아래로 내린다.
       월/연도 select 단독이 아니라 좌우 화살표를 포함한 행 전체에 준다.
       select 에만 주면 화살표와 세로 정렬이 어긋난다. */
    margin: 30px 0 10px 0;
}

.mc-cal-nav {
    width: 32px; height: 32px;
    padding: 0;
    border: 0; border-radius: 32px;
    background: transparent;
    cursor: pointer;
    color: #666666;
    line-height: 0;
}

.mc-cal-nav svg { width: 20px; height: 20px; display: block; margin: 0 auto; }
.mc-cal-nav[disabled] { opacity: .3; cursor: default; }

.mc-cal-selects { display: flex; align-items: center; gap: 8px; }

.mc-cal-select {
    padding: 4px 6px;
    border: 0;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: 'Inter', 'SUIT', sans-serif;
    font-size: 22px;
    font-weight: 600;
    /* QC No.4 : 22px 로 두면 August 의 g 밑이 잘린다. 디센더까지 담는다. */
    line-height: 30px;
    letter-spacing: -0.4px;
    color: #000000;
    cursor: pointer;
}

.mc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.mc-cal-wd {
    height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Geist', 'Inter', 'SUIT', sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #757575;
}

.mc-cal-day {
    position: relative;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: 'Inter', 'SUIT', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: #1E1E1E;
    border-radius: 8px;
    cursor: pointer;
}

.mc-cal-day.is-empty { visibility: hidden; }

/* 1년을 넘어간 날짜는 선택 불가 (기획: 1년 이상 조회 불가) */
.mc-cal-day.is-disabled { color: #C8C8C8; cursor: default; }

/* 범위 안쪽 */
.mc-cal-day.in-range {
    background: #F2FFEB;
    color: #71BF44;
    border-radius: 0;
}

/* 범위 양 끝 */
.mc-cal-day.is-edge {
    background: #71BF44;
    color: #F5F5F5;
    font-weight: 600;
    border-radius: 100px;
}

/* ---------- 빈 상태 ---------- */
.mc-empty {
    padding: 60px 0;
    text-align: center;
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: -0.4px;
    color: var(--mc-gray);
}

/* ---------- 모바일 ---------- */
/* ---------- 모바일 ----------
   시안 [Mobile] My Contents > History (1848:2859, 430x1363) 실측.
   데스크톱과 세로 리듬·칩 수치가 전부 다르므로 그대로 물려받으면 안 된다.
     타이틀→설명 6 / 설명→검색 20 / 검색→Filter행 30 / Filter행→칩 8
     칩→Total 30 / Total→첫 그룹헤더 20 / 헤더→아이템 12 / 아이템→아이템 12
     아이템→다음 그룹헤더 30 / 아이템 높이 166 */
@media screen and (max-width: 768px) {
    .mc-page-title { font-size: 24px; line-height: 30px; }

    .mypage_right_wrap .mc-page-desc { margin-top: 6px; }

    .mc-search { margin-top: 20px; }

    .mc-filter-head { margin-top: 30px; margin-bottom: 8px; }

    /* 모바일은 칩이 3줄로 감기는 것이 시안 의도 (398x145) */
    .mc-filter-wrap {
        min-height: 0;
        gap: 8px 4px;   /* 행 8 / 열 4 — 데스크톱(2)과 다르다 */
    }

    .mc-chip-group { gap: 4px; }

    .mc-chip { font-size: 15px; line-height: 18.7px; }

    /* 구분선이 세로 막대가 아니라 가로 전체선으로 바뀐다 (Line 4, 370x0)
       행 간격 8 + 여백 6 = 시안의 14 */
    .mc-filter-divider {
        width: 100%;
        height: 1px;
        margin: 6px 0;
    }

    .mypage_right_wrap .mc-total { margin-top: 30px; }

    .mc-list { margin-top: 20px; gap: 12px; }

    .mc-group-head:not(:first-child) { margin-top: 18px; }  /* 12 + 18 = 30 */

    .mc-item-thumb {
        flex: 0 0 166px;
        width: 166px;
        height: 166px;
    }

    .mc-item-body { padding: 14px 16px; }

    .mc-item-top { gap: 8px; }

    /* 배지는 SVG 라 글자·여백이 아니라 높이로 축소한다.
       시안 모바일 배지는 78x23 (PC 89x26). width:auto 가 비율을 유지한다. */
    .mc-type-chip svg { height: 23px; }

    .mc-item-title { font-size: 14px; line-height: 20px; }

    .mc-item-menu { font-size: 14px; }

    /* 모바일은 hover 없이 상시 노출 */
    .mc-item-actions { opacity: 1; }

    .mc-item-bottom { flex-wrap: wrap; }

    /* 시안은 430(내용 398) 기준이라 그 아래 폭은 정의돼 있지 않다.
       태그가 nowrap 이라 360px 이하에서 가로로 넘쳐 페이지 전체에
       가로 스크롤이 생겼다. 줄바꿈과 축소를 허용해 막는다. */
    .mc-item-tags { flex-wrap: wrap; row-gap: 4px; }
    .mc-tag-group { flex-wrap: wrap; min-width: 0; row-gap: 4px; }
    .mc-tag {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* 소형 단말(≈360px 이하). 썸네일이 폭의 절반을 넘어 본문이 눌리므로 줄인다. */
@media screen and (max-width: 380px) {
    .mc-item-thumb {
        flex: 0 0 132px;
        width: 132px;
        height: 132px;
    }
    .mc-item-body { padding: 12px 12px; }
    .mc-item-title { -webkit-line-clamp: 2; }
}