@charset "utf-8";

/*
 * 쿠폰함 (폰 목업 셸 전용)
 *
 * 기존 규칙은 style_b.css 에 있었다. 그 계열(common_b/style_b/mob_b)은
 * 쿠폰함 한 화면만 쓰는 데드엔드 포크라(사용처 1곳·실질 커밋 2건) 로드하지
 * 않고, 필요한 규칙만 여기로 옮긴다. 탭 id/class 는 coupon.js 가 참조하므로 유지.
 */

.coupon-content {
    min-height: calc(var(--phone-visible-height, 740px) - 94px);
    padding: 16px 20px 30px;
    background: #fff;
}

/* ── 탭 ───────────────────────────────────────────── */

.coupon_tabs {
    position: relative;
    z-index: 3;
    width: 360px;
    height: 44px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.coupon_tabs .tab { position: relative; display: flex; }

.coupon_tabs .tab .link {
    width: 100%;
    display: grid;
    place-items: center;
    /* 비활성 탭 — 상담사 관리 페이지의 .client-card-tab (counselor_v3.css:6959) 과 동일 값 */
    color: #9A9A9A;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.coupon_tabs .tab.on .link { color: var(--ink); }

/*
 * 활성 표시줄 — 활성 탭에 직접 그리면 탭을 바꿀 때 딱 끊겨 보인다.
 * 상담사 관리 페이지(.client-card-tab-indicator, counselor_v3.css:6971)처럼
 * 막대 하나를 두고 transform 으로 이동시켜 부드럽게 넘어가게 한다.
 */
.coupon_tabs .tab_indicator {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 180px;
    height: 3px;
    background: var(--ink);
    transition: transform .25s ease;
}

.coupon_tabs .tab:nth-child(2).on ~ .tab_indicator { transform: translateX(180px); }

/* ── 쿠폰 등록 ────────────────────────────────────── */

.coupon_input {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.coupon_input .inputbox { width: 100%; }

.coupon_input .input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-family: Pretendard, sans-serif;
    font-size: 13px;
}

.coupon_input .input::placeholder { color: #bbb; }

.coupon_input .couponBtn {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-family: Pretendard, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/*
 * 비활성 버튼 — 부가서비스 내역의 문의/리뷰 등록 모달 버튼과 동일 값.
 * my_additional_service.css:122 `.modal-submit:disabled` 참조.
 * 그쪽도 마크업에서 disabled 로 시작해 입력이 차면 활성화되는 같은 패턴이다.
 */
.coupon_input .couponBtn:disabled {
    background: #e2e2e2;
    border-color: #e2e2e2;
    color: #aaa;
    cursor: default;
}

/* ── 보유 쿠폰 목록 ───────────────────────────────── */

.coupon_listbox { width: 320px; }

.coupon_listbox .coupon_tit {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.coupon_list { display: flex; flex-direction: column; gap: 10px; }

.coupon_list .item {
    width: 320px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.coupon_list .item .tit {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.coupon_list .item .desc,
.coupon_list .item .date {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.coupon_list .empty-message,
.coupon-content .empty-message {
    width: 100%;
    padding: 40px 0;
    color: #999;
    font-size: 13px;
    text-align: center;
}