/* ============================================================
   banner-html.css — Canvas 대체 HTML 배너 카드 스타일
   canvas 논리 해상도 320×176 기준.
   container-type: inline-size + cqw/% 단위로 모든 폭에서 정확히 스케일.
   ============================================================ */

/* 카드 컨테이너 */
.bnh-card {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 320 / 176;
    border-radius: 1.25cqw;    /* 4px @ 320px */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    font-family: 'Paperlogy', sans-serif;
}

/* 상담사 이미지 */
.bnh-callee {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    object-fit: cover;
    pointer-events: none;
}

/* 텍스트 영역 전체 */
.bnh-body {
    position: absolute;
    inset: 0;
}

/* 상단 행: 라벨 + 번호 (canvas y=30 → 30/176=17.05%) */
.bnh-top-row {
    position: absolute;
    left: 6.25%;    /* 20px / 320px */
    top: 17.05%;    /* 30px / 176px */
    display: flex;
    align-items: center;
    gap: 2.5cqw;    /* 8px @ 320px */
}

/* 라벨 필 (canvas pill: 20px high, font 12px, pad 4px 6px) */
.bnh-label {
    display: inline-flex;
    align-items: center;
    padding: 1.25cqw 1.875cqw;  /* 4px 6px @ 320px */
    border-radius: 1.25cqw;     /* 4px @ 320px */
    font-size: 3.75cqw;         /* 12px @ 320px */
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
}

/* 번호 (canvas: 15px) */
.bnh-number {
    font-size: 4.6875cqw;   /* 15px @ 320px */
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.bnh-number em {
    font-size: 4.375cqw;    /* 14px @ 320px */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
    letter-spacing: 0.04em;
}

/* 닉네임 (canvas y=58 → 58/176=32.95%, font 22px) */
.bnh-nickname {
    position: absolute;
    left: 6.25%;        /* 20px / 320px */
    top: 32.95%;        /* 58px / 176px */
    font-size: 6.875cqw; /* 22px @ 320px */
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
    display: block;
    white-space: nowrap;
    line-height: 1;
}

/* 구분선 (canvas y=92, w=140, opacity 0.15) */
.bnh-divider {
    position: absolute;
    left: 6.25%;    /* 20px / 320px */
    top: 52.27%;    /* 92px / 176px */
    width: 43.75%;  /* 140px / 320px */
    height: 1px;
    background: #fff;
    opacity: 0.15;
    border: none;
    margin: 0;
}

/* 태그 행 공통 (canvas: font 15px) */
.bnh-tags {
    position: absolute;
    left: 6.25%;         /* 20px / 320px */
    font-size: 4.6875cqw; /* 15px @ 320px */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 3.125cqw;  /* 10px @ 320px */
}

/* 태그 행 0: canvas y=101 → 101/176=57.39% */
.bnh-tags--0 { top: 57.39%; }

/* 태그 행 1: canvas y=125 → 125/176=71.02% */
.bnh-tags--1 { top: 71.02%; }