/* ─────────────────────────────────────────────────────────────
 * AV100 관리자 전용 위젯 (다크 테마)
 *   - 상세 페이지 하단: "같은 메이커 배우" + "관련 추천"
 *   - 추천 페이지     : /av100_recommend.php
 *   - 비관리자에게는 노출되지 않음
 *
 * 컬러 토큰
 *   --avadm-bg          외곽 박스 배경 (거의 검정)
 *   --avadm-bg-2        카드 배경
 *   --avadm-line        구분선/테두리
 *   --avadm-text        본문 흰색
 *   --avadm-muted       서브 회색
 *   --avadm-accent      포인트 핑크
 * ───────────────────────────────────────────────────────────── */

.av100-adm {
    --avadm-bg:     #0d0d0d;
    --avadm-bg-2:   #1a1a1a;
    --avadm-line:   #2a2a2a;
    --avadm-text:   #fff;
    --avadm-muted:  #9aa0a6;
    --avadm-pcode:  #c5c5c5;
    --avadm-accent: #ef5d7d;

    background: var(--avadm-bg);
    border-radius: 10px;
    padding: 28px;
    margin: 20px 0;
    color: var(--avadm-text);
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
}
/* 타이틀 폰트: 사이트 본문(Pretendard)에 맞춤 — default.css 의 h1~h6 룰을 덮어씀 */
.av100-adm h2,
.av100-adm-page h2,
.av100-adm__title,
.av100-adm__rec-title,
.av100-adm-page__title { font-family: 'Pretendard', sans-serif; }

/* ────── 헤더 (타이틀 + 전체보기 링크) ────── */
.av100-adm__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.av100-adm__title {
    margin: 0;
    padding-left: 14px;
    border-left: 4px solid var(--avadm-accent);
    line-height: 1.2;
    font-size: 20px;
    font-weight: 700;
    color: var(--avadm-text);
}
.av100-adm__more {
    color: var(--avadm-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.av100-adm__more:hover { text-decoration: underline; }
.av100-adm__more-arrow { margin-left: 4px; }

.av100-adm__sub {
    margin: 6px 0 0 18px;
    color: var(--avadm-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* ────── 카드 그리드 (4 × 2) ────── */
.av100-adm__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 24px;
}

/* ────── 카드 ────── */
.av100-adm__card {
    display: flex;
    align-items: center;          /* 사진/정보 영역 수직 중앙 */
    gap: 12px;
    padding: 10px;
    background: var(--avadm-bg-2);
    border: 1px solid var(--avadm-line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--avadm-text);
    transition: border-color .15s ease, transform .15s ease;
}
.av100-adm__card:hover {
    border-color: var(--avadm-accent);
    transform: translateY(-1px);
}
.av100-adm__card-img {
    flex: 0 0 110px;
    width: 110px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.av100-adm__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.av100-adm__card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;      /* 정보 영역 내부 수직 중앙 */
    gap: 2px;
}
.av100-adm__card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--avadm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av100-adm__card-name-jp {
    font-size: 15px;
    color: var(--avadm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av100-adm__tag {
    align-self: flex-start;
    max-width: 100%;
    margin-top: 6px;
    padding: 2px 10px;
    border: 1px solid var(--avadm-accent);
    border-radius: 999px;
    color: var(--avadm-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av100-adm__card-pcode {
    margin-top: 8px;
    color: var(--avadm-pcode);
    font-size: 15px;
    letter-spacing: .02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.av100-adm__empty {
    margin-top: 24px;
    padding: 32px;
    text-align: center;
    color: var(--avadm-muted);
    background: var(--avadm-bg-2);
    border-radius: 10px;
}

/* ────── 관련 추천 (하단) ────── */
.av100-adm__rec {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--avadm-line);
}
.av100-adm__rec-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.av100-adm__rec-icon {
    color: var(--avadm-accent);
    font-size: 16px;
}
.av100-adm__rec-title {
    color: var(--avadm-text);
    font-size: 16px;
    font-weight: 700;
}
.av100-adm__rec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.av100-adm__rec-list li { margin: 0; padding: 0; }
/* .updateChart 와 동일한 핑크 필 버튼 스타일 */
.av100-adm__rec-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 15px;
    background: var(--avadm-accent);
    border: 1px solid var(--avadm-accent);
    color: #fff;
    border-radius: 100px;
    font-weight: bold;
    text-decoration: none;
    transition: .5s;
}
.av100-adm__rec-list a:hover {
    background: #fff;
    color: var(--avadm-accent);
}
.av100-adm__rec-arrow {
    font-weight: 700;
}

/* ────── 추천 페이지 (av100_recommend.php) ────── */
.av100-adm-page {
    /* 동일한 다크 컨테이너 재사용 */
    --avadm-bg:     #0d0d0d;
    --avadm-bg-2:   #1a1a1a;
    --avadm-line:   #2a2a2a;
    --avadm-text:   #fff;
    --avadm-muted:  #9aa0a6;
    --avadm-pcode:  #c5c5c5;
    --avadm-accent: #ef5d7d;

    max-width: 1200px;
    margin: 24px auto;
    padding: 28px;
    background: var(--avadm-bg);
    border-radius: 10px;
    color: var(--avadm-text);
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
}
.av100-adm-page__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--avadm-line);
    margin-bottom: 22px;
}
.av100-adm-page__title {
    margin: 0;
    padding-left: 14px;
    border-left: 4px solid var(--avadm-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}
.av100-adm-page__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: var(--avadm-text);
    border: 1px solid var(--avadm-line);
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.av100-adm-page__back:hover {
    border-color: var(--avadm-accent);
    color: var(--avadm-accent);
}
.av100-adm-page__count {
    color: var(--avadm-muted);
    font-size: 13px;
    margin: 0 0 14px;
}
.av100-adm-page__empty {
    color: var(--avadm-muted);
    text-align: center;
    padding: 60px 0;
}
.av100-adm-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
/* 추천 페이지 카드는 메인 위젯 카드 규칙을 그대로 재사용 */
.av100-adm-page .av100-adm__card { background: var(--avadm-bg-2); border-color: var(--avadm-line); color: var(--avadm-text); padding: 10px; }
.av100-adm-page .av100-adm__card-img { flex-basis: 120px; width: 120px; height: 150px; }

/* ────── 관리자 인라인 편집 ────── */
.av100-adm__card--editable {
    /* div 카드 (링크 아님) — 사진만 a 태그 */
    transition: opacity .15s, border-color .15s;
}
.av100-adm__card--editable .av100-adm__card-img {
    /* 사진 영역은 a 태그라 hover 효과 유지 */
    display: block;
}
.av100-adm__card--editable.is-saving { opacity: .5; pointer-events: none; }

.av100-adm__card--editable [contenteditable="true"] {
    cursor: text;
    outline: 1px dashed transparent;
    outline-offset: 2px;
    border-radius: 4px;
    min-height: 1.2em;
    transition: background .12s, outline-color .12s;
}
.av100-adm__card--editable [contenteditable="true"]:hover {
    background: rgba(255,255,255,.05);
}
.av100-adm__card--editable [contenteditable="true"]:focus {
    outline-color: var(--avadm-accent);
    background: rgba(239,93,125,.08);
    white-space: normal;        /* 편집 중에는 ellipsis 해제 */
    overflow: visible;
}
/* 빈 필드 placeholder */
.av100-adm__card--editable [contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,.25);
    font-style: italic;
}
/* 태그(소속사) 가 빈 경우 inline-flex 였던 align-self 가 어색해지므로 폭 보정 */
.av100-adm__card--editable .av100-adm__tag:empty {
    min-width: 60px;
}

/* ────── 저장 토스트 ────── */
.av100-adm__toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 10px 18px;
    border-radius: 8px;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #ef5d7d;
    font-size: 13px;
    font-family: 'Pretendard', sans-serif;
    box-shadow: 0 6px 20px rgba(0,0,0,.5);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.av100-adm__toast.is-show { opacity: 1; transform: translateY(0); }
.av100-adm__toast--ok  { border-color: #34c759; }
.av100-adm__toast--err { border-color: #ff453a; }

/* ────── 반응형 ────── */
@media (max-width: 1024px) {
    .av100-adm__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .av100-adm { padding: 18px; }
    .av100-adm__grid { grid-template-columns: 1fr; }
}