/* ============================================================
   메디넷(medinet) 테마 — 의료기기·에스테틱 쇼핑몰
   레퍼런스: docs/쇼핑몰테마/메디넷 (민트 포인트 · 블랙 네비 · 연하늘 푸터)
   ============================================================ */

:root {
    --mn-accent:      #4ab8bc;   /* 민트/틸 포인트 */
    --mn-accent-dark: #33999d;
    --mn-dark:        #191919;   /* 메인 네비게이션 바 */
    --mn-red:         #e8464b;   /* SALE 뱃지 */
    --mn-text:        #333333;
    --mn-muted:       #8a8a8a;
    --mn-line:        #e9e9e9;
    --mn-footer-bg:   #e8f4f8;   /* 연하늘 푸터 */
}

body.mn-body {
    color: var(--mn-text);
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, sans-serif;
    letter-spacing: -.01em;
}

/* ── 상단 유틸바 + 로고 ─────────────────────────────── */
.mn-utilbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 22px 0;
}
.mn-utillinks { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.mn-utillinks a {
    color: var(--mn-text);
    text-decoration: none;
    font-size: .82rem;
}
.mn-utillinks a:hover { color: var(--mn-accent-dark); }
.mn-utillinks .mn-admin-link { color: var(--mn-accent-dark); font-weight: 600; }
.mn-util-right { justify-content: flex-end; }
.mn-util-right li + li::before { content: "/"; color: #ccc; margin-right: 18px; font-size: .75rem; }

.mn-logo { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.mn-logo img { max-height: 44px; }
.mn-logo-text {
    font-size: 1.55rem;
    font-weight: 700;
    color: #222;
    letter-spacing: .02em;
}
.mn-logo-text .mn-logo-dot { color: var(--mn-accent); }

/* ── 메인 네비게이션 (블랙 바) ──────────────────────── */
.mn-nav {
    background: var(--mn-dark);
    position: relative;
    z-index: 1030;
}
.mn-nav .mn-nav-inner {
    display: flex;
    align-items: center;
    min-height: 52px;
}
.mn-nav-menu {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mn-nav-menu > li > a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: .92rem;
    letter-spacing: .06em;
    padding: 14px 22px;
}
.mn-nav-menu > li > a:hover { color: var(--mn-accent); }
.mn-nav .dropdown-menu {
    border-radius: 0;
    border: 1px solid var(--mn-line);
    margin-top: 0;
    font-size: .88rem;
}
.mn-nav .dropdown-item:active { background: var(--mn-accent); }
.mn-nav-icons { display: flex; align-items: center; gap: 6px; }
.mn-nav-icons .btn {
    color: #fff;
    border: none;
    font-size: 1.05rem;
    padding: 8px 10px;
}
.mn-nav-icons .btn:hover { color: var(--mn-accent); }
.mn-cart-badge {
    position: absolute;
    top: 2px; right: 0;
    background: var(--mn-red);
    color: #fff;
    border-radius: 50rem;
    font-size: .6rem;
    padding: .2em .45em;
    line-height: 1;
}
.mn-search-bar { background: #f7f7f7; border-bottom: 1px solid var(--mn-line); }
.mn-search-bar .form-control { border-radius: 0; }
.mn-search-bar .btn { border-radius: 0; }

/* 모바일 메뉴 */
.mn-mobile-menu { background: var(--mn-dark); border-top: 1px solid #333; }
.mn-mobile-menu a {
    display: block;
    color: #eee;
    text-decoration: none;
    padding: 11px 18px;
    font-size: .9rem;
    border-bottom: 1px solid #2a2a2a;
}
.mn-mobile-menu a.mn-sub { padding-left: 34px; color: #aaa; font-size: .84rem; }

/* ── 섹션 공통 ──────────────────────────────────────── */
.mn-section { padding: 64px 0; }
.mn-section-title {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.mn-section-sub {
    text-align: center;
    color: var(--mn-muted);
    font-size: .88rem;
    margin-bottom: 36px;
}
.mn-btn-dark {
    display: inline-block;
    background: var(--mn-dark);
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: .85rem;
    letter-spacing: .08em;
    padding: 10px 34px;
    text-decoration: none;
}
.mn-btn-dark:hover { background: #000; color: var(--mn-accent); }

/* ── 히어로 ─────────────────────────────────────────── */
.mn-hero .carousel-item img {
    width: 100%;
    height: clamp(300px, 42vw, 560px);
    object-fit: cover;
}
.mn-hero-fallback {
    background: linear-gradient(135deg, #d9f1f2 0%, #f4fbfb 60%, #ffffff 100%);
    text-align: center;
    padding: 96px 16px;
}
.mn-hero-fallback h1 { font-weight: 700; letter-spacing: .04em; color: #222; }
.mn-hero-fallback p { color: var(--mn-muted); margin-bottom: 28px; }

/* ── 카테고리 바로가기 타일 ─────────────────────────── */
.mn-cat-tile {
    display: block;
    border: 1px solid var(--mn-line);
    text-align: center;
    padding: 26px 12px;
    text-decoration: none;
    color: var(--mn-text);
    transition: all .15s ease;
    height: 100%;
}
.mn-cat-tile:hover { border-color: var(--mn-accent); color: var(--mn-accent-dark); }
.mn-cat-tile .mn-cat-name { font-weight: 600; font-size: .95rem; letter-spacing: .04em; }
.mn-cat-tile .mn-cat-desc {
    color: var(--mn-muted);
    font-size: .78rem;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 상품 카드 (중앙 정렬 · 미니멀) ─────────────────── */
.mn-card { position: relative; text-align: center; }
.mn-card .mn-card-img {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f8f8f8;
    margin-bottom: 14px;
}
.mn-card .mn-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.mn-card:hover .mn-card-img img { transform: scale(1.03); }
.mn-card a { text-decoration: none; color: var(--mn-text); }
.mn-card .mn-card-name {
    font-size: .85rem;
    line-height: 1.45;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mn-card .mn-card-price { margin-top: 6px; font-size: .9rem; }
.mn-card .mn-card-price .mn-price { font-weight: 600; }
.mn-card .mn-card-price .mn-price-was {
    color: #bbb;
    text-decoration: line-through;
    font-size: .8rem;
    margin-left: 6px;
}
.mn-badge {
    display: inline-block;
    margin-top: 8px;
    background: var(--mn-red);
    color: #fff;
    font-size: .62rem;
    letter-spacing: .1em;
    padding: 3px 9px;
}
.mn-badge.mn-badge-best { background: var(--mn-dark); }
.mn-soldout-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mn-soldout-overlay span {
    background: var(--mn-dark);
    color: #fff;
    font-size: .78rem;
    letter-spacing: .1em;
    padding: 6px 16px;
}

/* 찜 + 빠른 담기 (이미지 호버 시 노출) */
.mn-card .btn-wish {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 2;
    background: rgba(255,255,255,.9);
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    line-height: 1;
    opacity: 0;
    transition: opacity .15s ease;
}
.mn-card .mn-quick-cart {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    background: rgba(25,25,25,.85);
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: .8rem;
    letter-spacing: .08em;
    padding: 9px 0;
    width: 100%;
    opacity: 0;
    transition: opacity .15s ease;
    text-decoration: none;
    display: block;
}
.mn-card .mn-quick-cart:hover { background: var(--mn-accent-dark); color: #fff; }
.mn-card:hover .btn-wish,
.mn-card:hover .mn-quick-cart,
.mn-card .btn-wish.mn-wished { opacity: 1; }

/* ── 카테고리 탭 (상품 목록) ────────────────────────── */
.mn-cat-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 8px 0 44px;
}
.mn-cat-tabs a {
    border: 1px solid var(--mn-line);
    margin: -1px 0 0 -1px;          /* 테두리 겹침 */
    padding: 11px 30px;
    font-size: .86rem;
    color: var(--mn-text);
    text-decoration: none;
    background: #fff;
}
.mn-cat-tabs a:hover { color: var(--mn-accent-dark); }
.mn-cat-tabs a.active { background: var(--mn-dark); border-color: var(--mn-dark); color: #fff; }

/* 정렬 링크 */
.mn-sort-links a {
    color: var(--mn-muted);
    text-decoration: none;
    font-size: .82rem;
    margin-left: 14px;
}
.mn-sort-links a.active { color: var(--mn-dark); font-weight: 600; }

/* ── 게시판/서브페이지 헤더 ─────────────────────────── */
.mn-page-head { padding: 40px 0 8px; }
.mn-breadcrumb { color: var(--mn-muted); font-size: .8rem; margin-bottom: 10px; }
.mn-breadcrumb a { color: var(--mn-muted); text-decoration: none; }
.mn-page-head h1 { font-size: 1.9rem; font-weight: 600; }

/* ── 페이지네이션 ───────────────────────────────────── */
.mn-body .pagination { --bs-pagination-border-radius: 0; }
.mn-body .pagination .page-link { color: var(--mn-text); border-color: var(--mn-line); }
.mn-body .pagination .active > .page-link {
    background: var(--mn-dark);
    border-color: var(--mn-dark);
}

/* ── 푸터 (연하늘) ──────────────────────────────────── */
.mn-footer { background: var(--mn-footer-bg); margin-top: 72px; }
.mn-footer .mn-footer-main { padding: 52px 0 40px; }
.mn-footer h6 {
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 16px;
}
.mn-footer .mn-footer-brand { font-size: 1.05rem; font-weight: 700; }
.mn-footer ul { list-style: none; margin: 0; padding: 0; }
.mn-footer li { margin-bottom: 7px; }
.mn-footer a { color: #555; text-decoration: none; font-size: .84rem; }
.mn-footer a:hover { color: var(--mn-accent-dark); }
.mn-footer p, .mn-footer .small { color: #555; font-size: .84rem; }
.mn-sns { display: flex; gap: 14px; margin-top: 4px; }
.mn-sns a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--mn-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.mn-sns a:hover { background: var(--mn-accent-dark); color: #fff; }
.mn-footer-legal {
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 16px 0;
    color: #777;
    font-size: .78rem;
}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .mn-utilbar { grid-template-columns: 1fr auto 1fr; padding: 14px 0; }
    .mn-utillinks { gap: 10px; }
    .mn-utillinks a { font-size: .74rem; }
    .mn-logo-text { font-size: 1.2rem; }
    .mn-section { padding: 40px 0; }
    .mn-cat-tabs a { padding: 9px 16px; font-size: .8rem; }
    /* 터치 기기: 호버 액션 항상 노출 */
    .mn-card .btn-wish, .mn-card .mn-quick-cart { opacity: 1; }
}