/* BASIC css start */
/* =====================================================================
   NAILMALL RENEWAL · MO 기본 기획전  (PC 기획전과 같은 각진 시안 스타일)
   이 파일만으로 화면이 그려지도록 색 변수를 [공용:토큰] 블록으로 함께 담았다.
   ===================================================================== */

/* ===== [공용:토큰] 시작 =====
   색·글꼴·폭 변수 (--nr-*).
   같은 블록이 여러 화면 CSS 에 똑같이 들어 있다. 고칠 때는 한 곳을 고친 뒤
   dev-server 에서 npm run shared -- --sync "<고친 파일>" 로 나머지에 복사한다. */
:root {
    --nr-ink: #111111;          /* 제목, 강조 글씨, 검정 버튼 */
    --nr-text: #222222;         /* 본문 */
    --nr-sub: #666666;          /* 보조 글씨 */
    --nr-muted: #999999;        /* 설명, 비활성 */
    --nr-line: #e5e5e5;         /* 기본 구분선 */
    --nr-line-dark: #111111;    /* 헤더 아래 선, 강조 선 */
    --nr-bg-soft: #f5f5f5;      /* 회색 바탕 (푸터 링크 줄, 합계 바) */
    --nr-accent: #ff6b2c;       /* 할인율, 리뷰 수 */
    --nr-pink: #ff8e95;         /* 브랜드 핑크 */
    --nr-grad: linear-gradient(90deg, #ff6a00 0%, #e4007f 100%);  /* 주문하기 */
    --nr-container: 1280px;
    --nr-font: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --nr-font-en: 'Montserrat', 'Pretendard', sans-serif;
}
/* ===== [공용:토큰] 끝 ===== */

/* ---------- 화면 기본 ---------- */
.nm-mplan { padding-bottom: 32px; background: #fff; color: var(--nr-text); font-family: var(--nr-font); }
.nm-mplan * { box-sizing: border-box; }
.nm-mplan :is(p, ul, li, h2, h3) { margin: 0; padding: 0; }
.nm-mplan ul { list-style: none; }
.nm-mplan a { color: inherit; text-decoration: none; }
.nm-mplan [hidden] { display: none !important; }

/* 기획전 배너 */
.nm-mplan-hero img { display: block; width: 100%; height: auto; }
.nm-mplan-hero--html img { max-width: 100%; height: auto; }

/* 분류 선택 (분류가 없으면 비어 있어 숨긴다) */
.nm-mplan-tools { padding: 16px 16px 0; }
.nm-mplan-select { position: relative; }
.nm-mplan-select:empty { display: none; }
.nm-mplan-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-right: 2px solid var(--nr-ink);
    border-bottom: 2px solid var(--nr-ink);
    transform: rotate(45deg);
    pointer-events: none;
}
.nm-mplan-select:empty::after { display: none; }
.nm-mplan-select select {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--nr-ink);
    border-radius: 0;
    background: #fff;
    font-family: var(--nr-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--nr-ink);
    -webkit-appearance: none;
    appearance: none;
}

/* 보기 방식 */
.nm-mplan-bar { display: flex; justify-content: flex-end; gap: 4px; margin: 16px 16px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--nr-ink); }
.nm-mplan-bar a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; color: #bbb; }
.nm-mplan-bar a.on { color: var(--nr-ink); }
.nm-mplan-bar svg { width: 20px; height: 20px; }

/* 상품 목록: 갤러리 2열 / 리스트 1열 */
.nm-mplan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 10px; padding: 0 16px; }
.nm-mcard { position: relative; min-width: 0; }
.nm-mcard-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f4f4f4; }
.nm-mcard-thumb img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.nm-mcard-thumb > * { max-width: 100%; }
.nm-mcard-soldout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    font-family: var(--nr-font-en);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
}
.nm-mcard-info { padding-top: 10px; }
.nm-mcard-name {
    font-size: 13px;
    line-height: 1.45;
    color: var(--nr-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
}
.is-soldout .nm-mcard-name { color: var(--nr-muted); }
.nm-mcard-icons { margin-top: 6px !important; line-height: 0; }
.nm-mcard-icons img { max-height: 16px; margin-right: 3px; vertical-align: middle; }

.nm-mplan-grid.is-list { grid-template-columns: 1fr; gap: 0; }
.nm-mplan-grid.is-list .nm-mcard { padding: 14px 0; border-bottom: 1px solid var(--nr-line); }
.nm-mplan-grid.is-list .nm-mcard > a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; }
.nm-mplan-grid.is-list .nm-mcard-info { padding-top: 0; }

/* 가격: 윗줄 취소선 원래 가격, 아랫줄 할인율 + 가격 + 회원가 표시 (PC 기획전과 같다) */
.nm-mcard-price { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-end; gap: 0 6px; min-height: 40px; margin-top: 8px !important; }
.nm-mcard-price del { order: -1; flex-basis: 100%; margin-bottom: 2px; font-size: 12px; line-height: 1.3; color: #b0b0b0; }
.nm-mcard-price strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--nr-ink); }
.nm-mprice-pct { font-style: normal; font-family: var(--nr-font-en); font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--nr-accent); }
.nm-mprice-member { order: 1; padding: 0 5px; background: var(--nr-ink); font-size: 10px; font-weight: 700; line-height: 17px; color: #fff; }
.nm-mcard-price .nm-mprice-replace, .nm-mcard-price .nm-mprice-soldout { font-size: 13px; font-weight: 600; color: var(--nr-sub); }

.nm-mplan-empty { padding: 80px 0; text-align: center; font-size: 14px; color: var(--nr-muted); }

/* 더보기 */
.nm-mplan-more { padding: 28px 16px 0; }
.nm-mplan-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 48px;
    border: 1px solid var(--nr-ink);
    font-size: 14px;
    font-weight: 700;
    color: var(--nr-ink);
}
.nm-mplan-more svg { width: 16px; height: 16px; }
.nm-mplan-more a.is-loading { border-color: var(--nr-line); color: var(--nr-muted); pointer-events: none; }
.nm-mplan-grid + .nm-mplan-grid { margin-top: 28px; }
/* BASIC css end */