/* OKPOS 광고주 메인 - PC */

#wrap.okpos-main-pc {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 32px;
    background: var(--color-neutral-50, #f7f8f9);
    min-height: calc(100vh - 76px);
    letter-spacing: var(--body-s-letter, -0.5px);
}

/* ── 공통 카드 ── */
.okpos-pc-card {
    background: var(--surface-default, #FFF);
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    box-shadow: 7.052px 7.052px 7.052px 0 rgb(237 237 244 / 20%);
}

/* ── 가로 행 ── */
.okpos-pc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.okpos-pc-row > * {
    min-width: 0;
}

/* ── Row 1: 캠페인 섹션 ── */
.okpos-campaign-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px 24px;
}

.okpos-campaign-section--empty {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.okpos-campaign-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.okpos-campaign-header__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.okpos-campaign-header__title {
    font: var(--font-title-xs);
    letter-spacing: var(--title-xs-letter);
    color: var(--color-content-strong, #1e2534);
}

.okpos-campaign-header__count {
    font: var(--font-title-xs);
    letter-spacing: var(--title-xs-letter);
    color: var(--color-cyan-600, #1aacbc);
}

.okpos-campaign-header__btn {
    display: flex;
    align-items: center;
    padding: 4px;
}

/* EMPTY 상태 */
.okpos-campaign-section--empty .okpos-empty-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 7.052px 7.052px 3.526px rgba(212, 212, 223, 0.2);
}

.okpos-campaign-section--empty .okpos-empty-box__text-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.okpos-campaign-section--empty .okpos-empty-box__title {
    font: var(--font-title-xs);
    letter-spacing: var(--title-xs-letter);
    color: var(--color-content-strong, #1e2534);
    line-height: 28px;
    margin: 0;
}

.okpos-campaign-section--empty .okpos-empty-box__desc {
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-subtle, #72798a);
    line-height: 24px;
    margin: 0;
}

/* CTA 버튼 */
.okpos-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    border-radius: 12px;
    font: var(--font-body-s-semibold);
    letter-spacing: var(--body-s-letter);
    cursor: pointer;
    transition: opacity 0.15s;
}

.okpos-campaign-section--empty .okpos-cta-btn {
    height: 56px;
    width: 264px;
    padding: 0 12px;
    border-radius: 8px;
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
    white-space: nowrap;
    flex-shrink: 0;
}

.okpos-cta-btn:hover {
    opacity: 0.85;
}

.okpos-cta-btn--gradient {
    background: var(--cta-gradient);
    color: #fff;
}

.okpos-cta-btn--primary {
    background: var(--primary-color);
    color: #fff;
}

/* 비회원(게스트) 상태 카드 */
.okpos-campaign-section--guest .okpos-guest-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-24);
    padding: var(--spacing-8) var(--spacing-8);
}

.okpos-guest-box__text-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.okpos-guest-box__eyebrow-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.okpos-guest-box__eyebrow-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.okpos-guest-box__eyebrow {
    font: var(--font-body-s-semibold);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-brand);
    margin: 0;
}

.okpos-guest-box__title {
    font: var(--font-title-xs);
    letter-spacing: var(--title-xs-letter);
    color: var(--color-content-strong);
    line-height: 28px;
    margin: 0;
}

.okpos-guest-box__desc {
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-subtle);
    line-height: 24px;
    margin: 0;
}

.okpos-guest-box__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.okpos-guest-box__cta {
    height: 56px;
    width: 264px;
    padding: 0 var(--spacing-12);
    border-radius: var(--radius-8);
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
    white-space: nowrap;
}

.okpos-guest-box__link {
    height: 56px;
    width: 264px;
    padding: 0 var(--spacing-12);
    border-radius: var(--radius-8);
    background: var(--color-surface-subtle);
    color: var(--color-content-default);
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
    white-space: nowrap;
}

/* 캠페인 카드 가로 행 */
.okpos-campaign-cards-row {
    display: flex;
    gap: 12px;
}

.okpos-campaign-card {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--color-surface-default, #fff);
    border: 1px solid var(--color-border-subtle, #f0f1f3);
    border-radius: 16px;
    transition: box-shadow 0.15s;
}

.okpos-campaign-card:hover {
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.02);
}

.okpos-campaign-card--add {
    align-items: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.02);
}

.okpos-campaign-card--add:hover {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}

.okpos-campaign-card-add__icon {
    position: relative;
    width: 106px;
    height: 106px;
    border-radius: 12px;
    background: var(--color-neutral-50, #f7f8f9);
    flex-shrink: 0;
}

.okpos-campaign-card-add__icon::before,
.okpos-campaign-card-add__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 1.5px;
    border-radius: 999px;
    background: var(--color-content-muted, #a0a7b4);
    transform: translate(-50%, -50%);
}

.okpos-campaign-card-add__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.okpos-campaign-card-add__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.okpos-campaign-card-add__title {
    font: var(--font-body-m-semibold);
    letter-spacing: var(--body-m-letter);
    line-height: 24px;
    color: var(--color-content-muted, #a0a7b4);
}

.okpos-campaign-card-add__desc {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    line-height: 22px;
    color: var(--color-content-muted, #a0a7b4);
    word-break: keep-all;
}

.okpos-campaign-card__thumb {
    position: relative;
    width: 106px;
    height: 106px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-neutral-100, #f0f1f3);
    flex-shrink: 0;
}

.okpos-campaign-card__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.okpos-campaign-card__media-chip {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    padding: 0 8px;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.okpos-campaign-card__media-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
}

.okpos-campaign-card__media-round {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: #fff;
    white-space: nowrap;
}

.okpos-campaign-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.okpos-campaign-card__title {
    font: var(--font-body-m-semibold);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-default, #4e5668);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.okpos-campaign-card__meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.okpos-campaign-card__count {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-default, #4e5668);
}

/* 칩 배지 */
.okpos-chip {
    display: inline-flex;
    align-items: center;
    font: var(--font-caption-m);
    letter-spacing: var(--caption-m-letter);
    height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.okpos-chip--brand {
    background: var(--color-cyan-50, #eef9fa);
    color: var(--color-cyan-600, #1aacbc);
}

/* 모집 전·정지 상태 — 강조색을 쓰지 않는 중립 칩 */
.okpos-chip--neutral {
    background: var(--color-surface-muted, #f0f1f3);
    color: var(--color-content-subtle, #72798a);
}

.okpos-chip--accent {
    background: var(--color-pink-50, #fff7fa);
    color: var(--color-pink-500, #da2872);
}

/* ── Row 2: OKPOS 배너 + 알림 헤더 ── */
/* background shorthand 대신 background-color + background-image 분리하여 덮어씌움 방지 */
.okpos-plan-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    background-image: radial-gradient(ellipse at 60% 100%, rgba(91, 201, 245, 0.35) 0%, rgba(91, 201, 245, 0) 60%);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 12px 14px 16px;
    transition: box-shadow 0.15s;
    border: 1px solid var(--color-border-subtle);
}


/* OKPOS 제휴 연동 임시 중지 중 — 제휴 로고 없이 일반 요금제 배너로 표시 */
.okpos-plan-banner--plain {
    background-image: none;
}
.okpos-plan-banner--plain .okpos-plan-banner__text {
    font: var(--font-body-m-medium);
}

.okpos-plan-banner__left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.okpos-plan-banner .okpos-logo-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.okpos-plan-banner .okpos-logo-group__okpos {
    width: 99px;
    height: 28px;
    object-fit: contain;
}

.okpos-plan-banner .okpos-logo-group__x {
    width: 10px;
    height: 10px;
    object-fit: contain;
    filter: invert(33%) sepia(8%) saturate(800%) hue-rotate(185deg) brightness(90%);
}

.okpos-plan-banner .okpos-logo-group__assaview {
    height: 16px;
    width: 65px;
    object-fit: cover;
}

.okpos-plan-banner__text {
    font: var(--font-body-s-medium);
    color: var(--color-content-default, #4e5668);
}

.okpos-plan-banner__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* 알림 헤더 카드 */
.okpos-notice-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
}

/* ── 공통 섹션 타이틀 ── */
.okpos-section-title {
    font: var(--font-title-xs);
    letter-spacing: var(--title-xs-letter);
    color: var(--color-content-strong, #1e2534);
}

/* ── 아이콘 버튼 ── */
.okpos-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f5f9;
}

.okpos-icon-btn:hover {
    background: var(--color-neutral-200, #e4e6ea);
}

/* ── Row 3: 공지사항 카드 ── */
.okpos-notices-card {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 24px;
}

.okpos-notices-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.okpos-notice-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.okpos-notice-empty {
    font: var(--font-body-s-regular);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-muted, #a0a7b4);
    padding: 12px 0;
}

.okpos-notice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f3f3;
}

.okpos-notice-item:last-child {
    border-bottom: none;
}

.okpos-notice-item__subject {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-default, #4e5668);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.okpos-notice-item__subject:hover {
    color: var(--primary-color);
}

.okpos-notice-item__date {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-default, #4e5668);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── 프로필 카드 ── */
/* display:flex + gap으로 divider 간격 통합 관리 */
.okpos-user-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.okpos-user-card__profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.okpos-user-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-neutral-100, #f0f1f3) no-repeat center / cover;
    flex-shrink: 0;
}

.okpos-user-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.okpos-user-card__name {
    font: var(--font-title-xs);
    letter-spacing: var(--title-xs-letter);
    color: var(--color-content-default, #4e5668);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.okpos-user-card__phone {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle, #72798a);
}

.okpos-user-card__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    width: 98px;
    padding: 0 12px;
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    line-height: 22px;
    color: var(--color-content-default, #4e5668);
    background: var(--color-surface-default, #fff);
    border: 1px solid var(--color-border-default, #e4e6ea);
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.okpos-user-card__edit:hover {
    background: var(--color-neutral-50, #f7f8f9);
}

/* gap은 부모 flex gap이 처리하므로 margin 불필요 */
.okpos-user-card__divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

/* 구독 플랜 — display:block 대신 flex column으로 gap 활용 */
.okpos-plan-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.okpos-plan-info__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.okpos-plan-info__label {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle);
}

.okpos-plan-info__body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.okpos-plan-info__name {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    font: var(--font-title-xs);
    letter-spacing: var(--title-xs-letter);
    color: var(--color-content-default);
}

.okpos-plan-info__meta-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    flex-wrap: wrap;
}

.okpos-plan-info__period {
    font: var(--font-body-s-regular);
    color: var(--color-content-subtle);
}

.okpos-plan-badge {
    display: inline-flex;
    align-items: center;
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    padding: 4px 8px;
    border-radius: 4px;
}

.okpos-plan-badge--default {
    background: var(--color-neutral-50, #f7f8f9);
    color: var(--color-content-subtle, #72798a);
}

.okpos-plan-badge--upcoming {
    background: var(--color-neutral-50, #f7f8f9);
    color: var(--color-content-subtle, #72798a);
}

.okpos-plan-badge--fail {
    background: var(--color-red-100, #fee2e2);
    color: var(--red-color);
}

.okpos-plan-badge--trial {
    background: var(--color-cyan-50, #eef9fa);
    color: var(--color-cyan-600, #1aacbc);
}

.okpos-plan-info__payment-note {
    margin-top: var(--spacing-4);
    color: var(--color-content-subtle);
}

.okpos-plan-badge--cancel {
    background: var(--color-neutral-50, #f7f8f9);
    color: var(--color-content-subtle, #72798a);
}

/* 미구독 */
.okpos-no-plan-text {
    font: var(--font-body-s-regular);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle, #72798a);
}

.okpos-no-plan-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: var(--color-content-brand);
}



.okpos-no-plan-link svg {
    flex-shrink: 0;
}

/* ── 타이머 배너 ── */
.okpos-timer-bar {
    position: sticky;
    bottom: 0;
    padding: 64px 20px 16px;
    background: linear-gradient(180deg, rgba(251,251,252,0) 0%, rgb(251,251,252) 30%);
}

.okpos-timer-bar__countdown {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: #4e5668;
    border-radius: 999px;
    color: #fff;
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    white-space: nowrap;
}

.okpos-timer-bar__countdown::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #4e5668;
}

.okpos-timer-bar__countdown-icon {
    font-size: 16px;
    line-height: 1;
}

.okpos-timer-bar__countdown-text {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.okpos-timer-bar__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 8px;
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
    color: #fff;
    background: linear-gradient(to right, #36b7c5, #da2872);
    cursor: pointer;
}

.okpos-timer-bar__cta:hover {
    opacity: 0.85;
}

/* 알잘딱 매니저 소개 링크 카드 (게스트, 알림 자리) */
.okpos-guest-intro-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-16) var(--spacing-24);
}

.okpos-guest-intro-card__left {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.okpos-guest-intro-card__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.okpos-guest-intro-card__text {
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-default);
}