/* =============================================
   model_meta.css - 전속 배지 + 전용 페이지 버튼
   inc_model_meta.asp 가 뿌리는 마크업의 스타일.

   목록 카드와 상세페이지에서 배지의 자리가 다르다:
     · 목록 카드 — 카드에 이름이 hover 때만 뜨는 오버레이라, 배지를 이름 옆에 두면
                   평소에 보이지 않는다. 그래서 사진 좌상단에 항상 떠 있는 칩으로 얹는다.
     · 상세     — 이름(.pf-name)이 항상 보이므로 이름 앞에 인라인 칩으로 붙인다.
   ============================================= */

.m-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:24px;
    padding:0 10px 0 7px;
    border-radius:999px;
    vertical-align:middle;
    font-size:11.5px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

/* 라벨은 영문 대문자(STAR)다. 대문자는 글자 사이가 붙어 보이므로 자간을 벌린다.
   한글 라벨로 되돌릴 경우 letter-spacing 을 0.02em 으로 낮출 것 —
   한글은 자간을 벌리면 오히려 읽기 나빠진다. */
.m-badge-t{
    display:block;
    letter-spacing:0.10em;
    /* 대문자에는 오른쪽 자간이 한 칸 더 붙어 보여 가운데가 밀린다.
       마지막 글자 뒤 자간만큼 왼쪽으로 당겨 광학적으로 맞춘다. */
    margin-right:-0.10em;
}

/* 인장 마크. currentColor 를 쓰므로 배지 색만 바꾸면 함께 따라온다. */
.m-badge-ico{
    width:14px;
    height:14px;
    flex:none;
    display:block;
}

/* 도장 느낌 — 안쪽에 얇은 링을 한 겹 넣어 납작한 라벨이 아니라
   찍힌 인장처럼 보이게 한다. box-shadow 라 레이아웃에 영향이 없다. */
.m-badge-excl{
    background:#B3272D;
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

/* ── 목록 카드 위 인장 ─────────────────────────────────────────
   .profile-list .img 가 position:relative; overflow:hidden; border-radius 를 가진다.
   12px 인셋이면 데스크톱(radius 20px)과 모바일(radius 10%) 모두 둥근 모서리 안쪽에 들어온다.
   hover 시 사진만 scale(1.2) 되고 배지는 형제 요소라 제자리에 머문다.

   사진은 밝기가 제각각이라 그림자를 두 겹 준다:
   좁고 진한 그림자로 흰 사진 위에서 윤곽을 잡고,
   넓고 옅은 그림자로 어두운 사진 위에서 붕 뜨지 않게 한다.
   ------------------------------------------------------------- */
.m-badge-card{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),
               0 1px 3px rgba(0,0,0,.30),
               0 4px 12px rgba(0,0,0,.16);
}

/* 카드에 마우스를 올리면 사진이 확대된다. 인장도 아주 살짝 반응시켜
   카드 전체가 하나로 움직이게 한다(과하지 않게 4% 만). */
section .profile-list .img .m-badge-card{
    transition:transform .5s ease;
}
section .profile .profile-list .img:hover .m-badge-card{
    transform:scale(1.04);
}

/* ── 목록 카드 VIEW MORE 버튼 ──────────────────────────────────
   전용 페이지가 있는 모델에만 붙는다. 눌리는 물건이므로 인장보다 크고,
   hover·focus 상태를 갖는다.

   ⚠ 카드의 사진 링크와 형제로 놓인다(<a> 안의 <a> 금지).
      z-index 로 사진 위에 올라와 클릭을 먼저 받는다.
   ⚠ 카드 하단(top:85%)에는 이름 오버레이(.middlename)가 hover 시 떠오른다.
      그래서 좌상단에 둔다 — 자리를 옮기면 그 오버레이와 겹친다.
   ------------------------------------------------------------- */
.m-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:34px;
    padding:0 15px;
    border-radius:999px;
    background:#B3272D;
    color:#fff;
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
    transition:background .2s ease, transform .2s ease;
}

.m-cta-t{
    display:block;
    letter-spacing:0.12em;
    margin-right:-0.12em;   /* 마지막 글자 뒤 자간만큼 당겨 광학 중앙을 맞춘다 */
}

.m-cta-a{
    flex:none;
    font-size:15px;
    line-height:1;
    transition:transform .2s ease;
}

.m-cta-card{
    position:absolute;
    top:14px;
    left:14px;
    z-index:3;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),
               0 1px 3px rgba(0,0,0,.30),
               0 4px 12px rgba(0,0,0,.16);
}

.m-cta:hover,
.m-cta:focus{
    background:#8E1F24;
    color:#fff;
    text-decoration:none;
}
.m-cta:hover .m-cta-a{ transform:translateX(3px); }
.m-cta:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* 상세페이지 이름 앞 인장 — 42px 이름 옆이라 조금 키운다 */
.pf-name .m-badge{
    height:29px;
    padding:0 12px 0 9px;
    gap:6px;
    font-size:14px;
    margin-right:10px;
    position:relative;
    top:-6px;
}
.pf-name .m-badge-ico{
    width:17px;
    height:17px;
}

/* ── 전용 페이지 진입 버튼 ─────────────────────────────────────
   상세페이지 이름·기본정보 아래, 사진 갤러리 위.
   배지와 같은 색을 써서 목록의 배지 → 상세의 버튼이 한 줄기로 읽히게 한다.
   ------------------------------------------------------------- */
.m-landing{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    box-sizing:border-box;
    width:92%;
    max-width:560px;
    margin:6px auto 28px;
    padding:15px 20px;
    border:1px solid #B3272D;
    border-radius:6px;
    background:#B3272D;
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    line-height:1.4;
    text-align:left;
    transition:background .2s ease, border-color .2s ease;
}

.m-landing:hover,
.m-landing:focus{
    background:#8E1F24;
    border-color:#8E1F24;
    color:#fff;
    text-decoration:none;
}

.m-landing:focus-visible{
    outline:2px solid #B3272D;
    outline-offset:3px;
}

.m-landing-a{
    flex:none;
    font-size:18px;
    line-height:1;
}

@media (max-width:768px){
    .m-badge-card{
        top:10px;
        left:10px;
        height:2.6rem;
        padding:0 1.1rem 0 0.9rem;
        font-size:1.3rem;
        gap:0.5rem;
    }
    .m-badge-card .m-badge-ico{
        width:1.5rem;
        height:1.5rem;
    }
    .m-cta-card{
        top:1.2rem;
        left:1.2rem;
        height:3.6rem;
        padding:0 1.6rem;
        font-size:1.35rem;
        gap:0.8rem;
    }
    .m-cta-a{ font-size:1.6rem; }
    .m-landing{
        width:90%;
        padding:14px 16px;
        font-size:1.5rem;
    }
    .m-landing-a{ font-size:1.7rem; }
    .pf-name .m-badge{
        height:2.6rem;
        font-size:1.4rem;
        top:-4px;
    }
}

/* 흑백 인쇄에서 배경색이 날아가도 글자는 남는다.
   색만으로 구분되지 않게 하는 것이 이 배지의 전제다. */
@media print{
    .m-badge-excl{
        background:transparent;
        color:#000;
        border:1px solid #000;
        box-shadow:none;
    }
    .m-landing{ display:none; }
    .m-cta{ display:none; }
}

/* 모션을 줄이도록 설정한 사용자에게는 hover 확대·이동을 걸지 않는다. */
@media (prefers-reduced-motion:reduce){
    section .profile-list .img .m-badge-card,
    section .profile .profile-list .img:hover .m-badge-card{
        transition:none;
        transform:none;
    }
    .m-cta,
    .m-cta-a,
    .m-cta:hover .m-cta-a{
        transition:none;
        transform:none;
    }
}