/* ===================================================
   Customer Admin - base.css
   Font: Pretendard
=================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ==================== CSS 변수 ==================== */
:root {
    --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* --- Primary Colors --- */
    --color-primary-light: #4FC0FC;
    --color-primary:       #4FC0FC;
    --color-blue:          #027CFA;
    --color-primary-dark:  #4F4F4F;
    --color-textgray: #808080;

    /* --- Secondary Colors --- */
    --color-purple:  #6756ED;
    --color-red:     #F25358;
    --color-green:   #21B684;

    /* --- Accent --- */
    --color-accent:   #FF0000;
    --color-accent-red: #FF0000;
    --color-info:    #027CFA;

    /* --- Button Colors --- */
    --btn-dark-0:    #222222;
    --btn-dark-1:    #272A31;
    --btn-dark-2:    #434651;
    --btn-purple:    #6756ED;
    --btn-blue:      #1FB6FF;
    --btn-gray:      #888888;
    --btn-light:     #BBBBBB;
   
    --btn-disabled:  #F2F2F2;


    /* --- Text Colors --- */
    --text-link:        #027CFA;
    --text-dark:        #222222;
    --text-primary:     #333333;
    --text-secondary:   #666666;
    --text-tertiary:    #AAAAAA;
    --text-disabled:    #AAAAAA;
    --text-placeholder: #C7C7C7;
    --text-white:       #FFFFFF;

    /* --- Graphy Colors --- */
    --graphy-dark:   #333333;
    --graphy-mid:    #666666;
    --graphy-light:  #BBBBBB;

    /* --- Border / BG --- */
    --border-color:  #E5E7EB;
    --bg-body:       #F4F5F7;
    --bg-white:      #FFFFFF;
    --bg-hover:      #F8F9FA;

    /* --- Status Chip Colors --- */
    --status-success-bg:      #E2FFF3;
    --status-success-text:    #089253;
    --status-neutral-bg:    #F1F1F1;
    --status-neutral-text:  #2C2C2C;
    --status-muted-bg:      #F5F5F5;
    --status-muted-text:    #808080;
    --status-danger-bg:        #FFEAEA;
    --status-danger-text:      #F52A02;
    --status-accent-bg:     #F0ECFF;
    --status-accent-text:   #4700D6;
    --status-warning-bg:     #FFF4BC;
    --status-warning-text:   #FF7700;
    --status-info-bg:       #E1FBFF;
    --status-info-text:     #337EFE;

    /* --- Trend (통계 증감) --- */
    --trend-up-bg:          rgba(0, 179, 97, 0.08);
    --trend-up-text:        #2EA36D;
    --trend-down-bg:        rgba(244, 67, 54, 0.08);
    --trend-down-text:      #F44336;

    /* --- Member Grade Badge (outline) --- */
    --badge-regular-border: #4FC0FC;
    --badge-regular-text:   #0890FF;
    --badge-master-border:  #FF5658;
    --badge-master-text:    #F52A02;
    --badge-common-border:  #DFDFDF;
    --badge-common-text:    #333333;

    /* --- Product Type Tag (outline) --- */
    --tag-normal-color:     #337EFE;
    --tag-live-color:       #F52A02;
    --tag-video-color:      #4700D6;
    --tag-digital-color:    #F59500;

    /* --- Activity State --- */
    --activity-active-bg:    #FFEAEA;
    --activity-active-text:  #F55F02;
    --activity-inactive-bg:  #E2FFF3;
    --activity-inactive-text:#089253;
    --activity-left-bg:      #ECEBF0;
    --activity-left-text:    #2C2C2C;

    /* --- Layout --- */
    --header-height: 60px;
    --lnb-width:     220px;
    --content-gap:   30px;
}

/* ==================== Typography ==================== */

/* Headings */
.h1         { font-size: 30px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }
.h1-bold    { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }

.h2         { font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }
.h2-bold    { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }

.h3         { font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }
.h3-bold    { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }

.h4         { font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }
.h4-bold    { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }

.h5         { font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -0.02em; }
.h5-bold    { font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }

/* Body */
.b1         { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em; }
.b1-bold    { font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; }

.b2         { font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em; }
.b2-bold    { font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; }

.b3         { font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em; }
.b3-bold    { font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; }

/* ==================== Reset ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body { overflow-x: hidden; }

body {
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ==================== Layout ==================== */

/* 전체 래퍼 */
.admin-wrap {
    display: flex;
    min-height: 100vh;
    padding-top: var(--header-height);
}

/* ==================== Header ==================== */
.admin-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    z-index: 200;
}

/* 로고 */
.admin-header__logo {
    width: var(--lnb-width);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px;
}

.admin-header__logo-symbol { width: 36px; height: 36px; }
.admin-header__logo-export { width: 16px; height: 16px; opacity: 0.5; margin-left: 3px; }

.admin-header__logo-name {
    font-size: 18px;
    font-weight: 700;
    color: #4E5460;
    letter-spacing: -0.04em;
}

/* 페이지 타이틀 + 검색 */
.admin-header__center {
    flex: 1;
    display: flex;
    align-items: center;
    gap:10px;
    padding: 0 30px 0 10px;
}

.admin-header__nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.admin-header__page-title {
    font-size: 18px;
    font-weight: 700;
    color: #424242;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.admin-header__search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 400px;
    border: 1px solid #EFEFEF;
    border-radius: 100px;
    padding: 6px 10px;
    margin-left: auto;
}

.admin-header__search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    background: transparent;
    letter-spacing: -0.02em;
}

.admin-header__search-input::placeholder { color: #C7C7C7; }
.admin-header__search-input:disabled { color: var(--text-disabled); cursor: not-allowed; }

/* 오른쪽 영역 */
.admin-header__right {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
    flex-shrink: 0;
}

/* 버튼 그룹 */
.admin-header__btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.admin-header__btn {
    height: 30px;
    padding: 0 8px;
    border-radius: 4px;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: -0.02em;
    cursor: pointer;
}

.admin-header__btn--dark {
    background: #4F4F4F;
    color: #FFFFFF;
    font-size: 11px;
    border: none;
}

.admin-header__btn--outline {
    background: #FFFFFF url('../src/images/solsol_logo_korean.svg') no-repeat 13px center;
    color: #222222;
    font-size: 12px;
    border: 1px solid #BFBFBF;
    padding: 0 13px 0 51px;
}

/* 아이콘 그룹 */
.admin-header__icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-header__icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.admin-header__bell-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: #FF0000;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
}

/* 사용자 */
.admin-header__user {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

/* 프로필 툴팁 */
.c-profile-tooltip {
    display: none;
    position: absolute;
    min-width:210px;
    top: calc(100% + 12px);
    right: 0;
    width: 220px;
    background: #FFF;
    box-shadow: 0 2px 6px 0 rgba(37, 51, 66, 0.15);
    padding: 16px;
    z-index: 500;
}

.admin-header__user.open .c-profile-tooltip {
    display: block;
}

.c-profile-tooltip__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.c-profile-tooltip__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.c-profile-tooltip__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.c-profile-tooltip__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.c-profile-tooltip__email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-profile-tooltip__divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 12px -16px;
}

.c-profile-tooltip__actions {
    display: flex;
    gap: 4px;
}

.c-profile-tooltip__actions .btn {
    flex: 1;
}


.admin-header__username {
    font-size: 13px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.02em;
}

.admin-header__user-arrow {
    width: 8px;
    height: 4px;
}

/* ==================== LNB (Left Navigation Bar) ==================== */
.admin-lnb {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--lnb-width);
    height: calc(100vh - var(--header-height));
    background: #FFFFFF;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 30px 0 20px;
}

.admin-lnb::-webkit-scrollbar { width: 4px; }
.admin-lnb::-webkit-scrollbar-thumb { background: #E0E0E0; border-radius: 4px; }

/* 사이트 바로가기 */
.lnb-shortcut { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 20px 12px; min-height: 40px; padding: 8px 12px; border: 1.5px solid var(--color-primary); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--color-blue); background: transparent; text-decoration: none; cursor: pointer; transition: background 0.15s; box-sizing: border-box; }
.lnb-shortcut:hover { background: rgba(2, 124, 250, 0.05); }
.lnb-shortcut img { filter: brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(1200%) hue-rotate(200deg) brightness(102%) contrast(102%); }

/* 1:1 문의 (단일 아이템, 어코디언 없음) */
.lnb-direct {
    display: flex;
    align-items: center;
    gap: 10px;
    margin:0 20px;
    padding:10px;
    font-size: 14px;
    font-weight: 500;
    color: #424242;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.lnb-direct:hover {
    background: #4FC0FC;
    color: #FFFFFF;
    border-radius:6px;
}

.lnb-direct:hover .lnb-icon {
    filter: brightness(0) invert(1);
}

/* 구분선 */
.lnb-divider {
    border: none;
    border-top: 2px solid #666666;
    margin: 10px 20px 20px;
}

.lnb-divider--thin {
    border-top-width: 1px;
    border-color: #EAEAEA;
    margin: 10px 20px 20px;
}

/* 메뉴 섹션 래퍼 */
.lnb-section {
    padding: 0 20px;
}

/* 대시보드 */
.lnb-plain {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 10px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #424242;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.lnb-plain:hover { background: #F9FAFB; }
.lnb-plain.active { background: #4FC0FC; color: #FFFFFF; }
.lnb-plain.active .lnb-icon { filter: brightness(0) invert(1); } /* 활성 시 아이콘 흰색 */

/* 알림 뱃지 */
.lnb-direct .lnb-badge { margin-left: auto; }

.lnb-badge {
    width: 18px;
    padding: 2px 5px 4px 5px;
    background: #F55F02;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 아코디언 */
.lnb-accordion { margin-bottom: 4px; }

.lnb-accordion__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px 10px 10px;
    border-radius: 6px;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #424242;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-base);
    transition: background 0.15s;
}

.lnb-accordion__header:hover { background: #F9FAFB; }

.lnb-accordion__label { flex: 1; }

.lnb-accordion__arrow {
    flex-shrink: 0;
    transition: transform 0.2s;
}

/* 열린 상태 */
.lnb-accordion.open .lnb-accordion__header {
    background: #4FC0FC;
    color: #FFFFFF;
    border-radius: 6px 6px 0 0;
}

.lnb-accordion.open .lnb-accordion__arrow {
    transform: rotate(180deg);
}

.lnb-accordion.open .lnb-accordion__header .lnb-icon:not(.lnb-accordion__arrow) { filter: brightness(0) invert(1); }
.lnb-accordion.open .lnb-accordion__arrow { filter: brightness(0) invert(1); }

/* 서브메뉴 */
.lnb-accordion__body {
    display: none;
    background: #F9FAFB;
    border-radius: 0 0 6px 6px;
    padding: 12px 0 12px 36px;
}

.lnb-accordion.open .lnb-accordion__body { display: block; }

.lnb-sub-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-size: 13px;
    font-weight: 400;
    color: #424242;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

.lnb-sub-item:hover { color: #027CFA; }
.lnb-sub-item.active { color: #027CFA; font-weight: 600; }

/* 공통 아이콘 */
.lnb-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lnb-accordion__arrow {
    width: 12px;
    height: 6px;
    margin-left: auto;
}

/* 하단 크레딧 영역 */
.lnb-credits {
    margin-top: auto;
    padding: 12px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lnb-credits__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.lnb-credits__label {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
}

.lnb-credits__amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.lnb-credits__coin { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #6756ED; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.c-credit-coin { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 1px 1px 0; box-sizing: border-box; border-radius: 50%; background: #6756ED; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }

.lnb-credits__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #808080;
    background: none;
    cursor: pointer;
    font-family: var(--font-base);
}

/* ==================== 콘텐츠 영역 ==================== */
.admin-content {
    background-color: #F8F9FB;
    margin-left: var(--lnb-width);
    flex: 1;
    min-width: 0;
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 콘텐츠 상단 바 (Info & Tip / 페이지 타이틀) */
.admin-topbar {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--content-gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    gap: 16px;
}

.admin-topbar__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-topbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.admin-topbar__breadcrumb span { color: var(--text-secondary); }
.admin-topbar__breadcrumb .sep { color: var(--text-placeholder); }

.admin-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 버튼 영역 (기능 바) */
.admin-toolbar {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    padding: 12px var(--content-gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-toolbar__left,
.admin-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 메인 작업 영역 */
.admin-body {
    flex: 1;
    min-width: 0;
    padding: var(--content-gap);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 콘텐츠 카드 */
.list-panel {
    background: var(--bg-white);
    border-radius: 8px;
    padding: 24px 30px 30px 30px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

.list-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 8px 0;
    gap: 12px;
}

.list-panel__header-right { display: flex; align-items: center; gap: 8px; }

.list-panel__title {
    margin: 0;
    font-size: 20px;
    line-height: 36px;
    font-weight: 700;
    color: var(--text-primary);
}

.list-panel--p30 { padding: 30px 30px 24px 30px ; }
.list-panel--p24-30 { padding: 24px 30px 30px ; }
.list-panel--p28 { padding: 28px 30px ; }

/* 검색 필터 패널 (검색창 + 드롭다운 필터) */
.list-panel--filter { padding:28px 30px; }
.list-panel--filter .admin-filter__search { background: #fff; border: 1px solid #DEDFE0; }

/* 테이블이 패널 끝까지 붙는 설정형 패널 */
.list-panel--flush { padding: 0 0 30px; }
.list-panel--flush .list-panel__title { padding: 24px 30px 8px 30px; font-size: 20px; }
.list-panel--flush .list-panel__title--flat,
.list-panel__title--flat { padding: 0; line-height: 1; }

/* 폼 패널 액션 헤더 (제목 + 우측 버튼, 좌우 30 / 상 24 / 하 8 마진) */
.panel-form-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 30px 8px; padding: 0; }

/* 영수증 모달 본문 (placeholder) */
.bill-modal__body { margin: 0 30px 30px; min-height: 260px; background: #F5F5F5; border-radius: 4px; }

/* 모달 정보 테이블 (라벨-값 2열, 행 보더만, 모달 안에서만 사용) */
.modal-info-table { width: 100%; border-collapse: collapse; border-top:2px solid #222; }
.modal-info-table th { width: 120px; white-space: nowrap; height:46px; padding: 10px 20px; text-align: left; font-size: 14px; font-weight: 500; color: var(--color-textgray);background-color: #F7F8FA; border-bottom: 1px solid #EFEFEF; vertical-align: middle; }
.modal-info-table td { padding: 10px 12px; font-size: 14px; color: var(--text-dark); border-bottom: 1px solid #EFEFEF; vertical-align: middle; }

.modal-info-table__highlight { color: var(--color-blue); font-weight: 500; }
/* 검색결과 N개 카운트 캡션 (테이블 위 등에 사용) */
.search-result-count { margin: 0 0 8px; font-size: 13px; color: var(--text-secondary); }
.search-result-count strong { color: var(--color-blue); font-weight: 500; }
.search-result-count--total { margin-bottom: -10px; }
.modal-info-table__cancel { color: var(--color-red); font-weight: 500; margin-left: 16px; }
.modal-info-table__hint { margin: 6px 0 0; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* 크레딧 상세 모달 - 본문 영역(infotip + 테이블) */
.credit-detail__body { padding: 0 30px; }
.credit-detail__body .admin-infotip { margin: 0 0 12px; }
.credit-detail__footer { padding: 20px 30px 30px; }
.credit-detail__footer .btn { width: 100%; }

/* 공통 모달 본문 - 헤더 아래 24px 패딩 (memo-modal, 360px alert 모달 제외) */
.completion-modal__body { padding-top: 24px; }

/* setting-table 셀 - 입력 행 컴팩트 패딩 (상하 2px) */
.setting-table td.setting-table__cell--tight { padding-top: 2px; padding-bottom: 2px; }

/* 검색 + 드롭다운 한 줄 (모달 등) */
.search-filter-bar { display: flex; align-items: center; gap: 8px; }

/* 폼 + 우측 미리보기 그리드 (1024 이하 세로 스택) */
.form-preview-grid { display: grid; grid-template-columns: 1fr 400px; gap: 16px; align-items: start; }
.list-panel--flush .list-panel__header { margin-bottom: 8px; }

/* 탭 메뉴 아래 패널 헤더 (padding-top 제거, 타이틀 17px) */
.list-panel__header--tab { padding-top: 0; }
.list-panel__header--tab .list-panel__title { font-size: 17px; }

/* 한 줄 안에 타이틀 + 우측 메타 정보 배치 (list-panel--flush 안) */
.list-panel .list-panel__header--meta { padding: 24px 30px 10px; margin-bottom: 0; }
.list-panel .list-panel__header--meta .list-panel__title { padding: 0; }
.list-panel .list-panel__header--meta .upload-storage-info { padding: 0; }

/* 공지 상세 */
.notice-detail__top { display:flex; align-items:center; gap:10px; padding-bottom:16px; border-bottom:1px solid var(--border-color); margin-bottom:20px; }
.notice-detail__meta { display:flex; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--border-color); margin-bottom:20px; }
.notice-detail__meta-author { display:flex; align-items:center; gap:8px; }
.notice-detail__meta-author span { font-size:13px; color:var(--text-primary); }

/* 아바타 + 역할 뱃지 + 이름 인라인 (재사용 가능) — role-badge 흰색 유지 */
.user-id { display: inline-flex; align-items: center; gap: 8px; }
.user-id__name { font-size: 13px; color: var(--text-primary); }
.user-id--lg .user-id__name { font-size: 17px; font-weight: 600; }
.notice-detail__meta-item { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:#A0A0A0; }
.notice-detail__category { font-size:13px; font-weight:600; color:var(--color-blue); margin-bottom:8px; }
.notice-detail__title { font-size:22px; font-weight:700; color:var(--text-primary); line-height:1.5; margin-bottom:16px; }
.notice-detail__content { background:#fff; border:1px solid var(--border-color); border-radius:8px; padding:24px; min-height:400px; font-size:14px; line-height:1.8; color:var(--text-primary); }

/* 게시글 상세 (post-detail) */
.post-detail__label { display:inline-flex; align-items:center; gap:4px; margin:0 0 8px; font-size:13px; font-weight:600; color:var(--color-blue); }
.post-detail__title { margin:0 0 16px; font-size:22px; font-weight:700; color:var(--text-primary); line-height:1.4; }
.post-detail__meta { display:flex; align-items:center; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--border-color); margin-bottom:24px; flex-wrap:wrap; }
.post-detail__meta-item { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary); }
.post-detail__content { background:#A5A9B0; border-radius:8px; min-height:560px; display:flex; align-items:center; justify-content:center; }
.post-detail__content-placeholder { color:#fff; font-size:16px; }
.post-detail__attach-label { margin:0 0 16px; font-size:14px; font-weight:600; color:var(--text-primary); }
.post-detail__attach-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.post-detail__attach-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid var(--border-color); border-radius:8px; background:#fff; }
.post-detail__attach-name { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--text-primary); }
.post-detail__attach-download { font-size:13px; font-weight:600; color:var(--color-blue); text-decoration:none; }
.post-detail__attach-download:hover { text-decoration:underline; }

/* 1:1 문의 상세 */
.inquiry-detail__meta { justify-content:flex-start; border-bottom:none; padding-bottom:0; }
.inquiry-detail__actions { display:flex; align-items:center; gap:4px; margin-left:auto; flex-shrink:0; }
.inquiry-detail__actions > .c-dropdown { margin-right:4px; }
.inquiry-detail__actions .c-dropdown__trigger { height:36px; }
.inquiry-detail__expand { width:24px; height:24px; padding:0; background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.inquiry-detail__hint { font-size:13px; color:var(--color-textgray); margin:0 0 16px; }
.inquiry-detail__content { background:#F5F5F5; border-radius:8px; min-height:380px; }

/* 첨부파일 리스트 */
.attach-list__title { font-size:17px; font-weight:600; color:#424242; margin:0 0 16px; }
.attach-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.attach-list__item { display:flex; align-items:center; gap:8px; padding:20px; border:1px solid var(--border-color); border-radius:8px; background:#fff; }
.attach-list__icon { flex-shrink:0; }
.attach-list__name { flex:1; min-width:0; font-size:14px; color:var(--text-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attach-list__item .btn { flex-shrink:0; }

/* 댓글 입력 폼 */
.comment-form__user { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.comment-form__name { font-size:14px; font-weight:600; color:var(--text-primary); }
.comment-form__input { width:100%; min-height:100px; padding:20px; border:1px solid var(--border-color); border-radius:8px; font-size:13px; line-height:1.6; color:var(--text-primary); font-family:inherit; resize:vertical; outline:none; box-sizing:border-box; }
/* 멘션 칩 오버레이 입력 (textarea 위에 @닉네임 등 chip을 absolute로 띄워 합쳐보이게 함) */
.mention-input { position:relative; }
.mention-input__chip { position:absolute; top:20px; left:20px; font-weight:400; color:var(--color-blue); font-size:13px; line-height:1.6; pointer-events:none; z-index:1; white-space:nowrap; }
.mention-input .comment-form__input { padding-left:75px; }
.comment-form__input:focus { border-color:var(--color-primary); }
.comment-form__input::placeholder { color:var(--text-placeholder); }
.comment-form__input:disabled { color: var(--text-disabled); background: #F2F2F2; cursor: not-allowed; }
.comment-form__footer { display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:12px; }
.comment-form__btn-group { display:flex; gap:4px; }

/* 댓글 리스트 */
.comment-list { list-style:none; padding:0 16px; margin:0; display:flex; flex-direction:column; }
.comment-list--flush { padding-left:0; padding-right:0; }
.comment-item { padding:16px 0; }
.comment-item:first-child { border-top:none; padding-top:0; }
.comment-item__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.comment-item__user { display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }
.comment-item__name { font-size:14px; font-weight:600; color:var(--text-primary); }
.comment-item__time { font-size:12px; color:var(--text-tertiary); margin-left:4px; }
.comment-item__actions { display:flex; align-items:flex-start; gap:4px; flex-shrink:0; }
.comment-item__reply { display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0; line-height:1; background:none; border:none; cursor:pointer; font-size:13px; color:var(--text-secondary); font-family:inherit; }
.comment-item__more { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; line-height:1; background:none; border:none; cursor:pointer; }
.comment-item__more img { transform:rotate(90deg); }
.comment-item__body { margin:0; padding-left:32px; font-size:14px; line-height:1.5; color:var(--text-primary); }
.comment-item__mention { color:var(--color-blue); text-decoration:none; font-weight:500; }
.comment-item--deleted { padding-left:32px; font-size:14px; color:var(--text-tertiary); }
.comment-item__edit { margin-left:32px; padding:14px 18px; border:1px solid var(--border-color); border-radius:8px; background:#fff; }
.comment-item__edit--flush { margin-top:16px; border:none; padding:0; background:transparent; }
.comment-item__edit--flush .comment-item__head { margin-bottom:12px; }
.comment-item__edit-text { margin:0; font-size:13px; line-height:1.7; color:var(--text-primary); }
.comment-item__edit-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:12px; }
.comment-item__reply-form { margin-left:32px; margin-top:16px; }
.comment-item__reply-input { width:100%; min-height:90px; padding:14px 18px; border:1px solid var(--border-color); border-radius:6px; font-size:13px; line-height:1.6; color:var(--text-primary); font-family:inherit; resize:vertical; outline:none; box-sizing:border-box; }
.comment-item__reply-input:focus { border-color:var(--color-primary); }
.comment-item__reply-input::placeholder { color:var(--text-placeholder); }
.comment-item__reply-input:disabled { color: var(--text-disabled); background: #F2F2F2; cursor: not-allowed; }
.comment-item__reply-actions { display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:8px; }
.comment-item--indent { padding-left:30px; }

/* 그룹 댓글 — 체크박스 좌측 + 컨텐츠 래퍼 */
.comment-item--checkable { display:flex; gap:20px; align-items:flex-start; }
.comment-item--checkable > .table-check { margin-top:2px; }
.comment-item__content { flex:1; min-width:0; }

/* 비밀 댓글 토글 (입력/답글 폼 우측 하단) */
.comment-secret-toggle { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-primary); }

/* 답글 펼치기 토글 (답글 N개 ▼) */
.comment-replies-toggle { display:inline-flex; align-items:center; gap:4px; margin:20px 0 0 32px; padding:0; background:none; border:none; cursor:pointer; font-size:13px; color:var(--color-blue); font-family:inherit; }

/* 답글 페이지네이션 (답글 더보기 / 답글 숨기기) */
.comment-replies-pager { display:flex; gap:16px; margin:20px 0 0 32px; }
.comment-replies-pager__btn { display:inline-flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer; font-size:13px; color:var(--color-blue); font-family:inherit; padding:0; }
.comment-replies-pager__btn--up img { transform:scaleY(-1); }

/* 댓글 본문 — 링크 프리뷰 카드 */
.comment-link-preview { display:flex; flex-direction:column; width:200px; margin:0 0 12px 32px; border:1px solid var(--border-color); border-radius:6px; overflow:hidden; text-decoration:none; background:#fff; }
.comment-link-preview__thumb { width:100%; height:120px; background:#F4F5F7; object-fit:cover; }
.comment-link-preview__body { padding:8px 12px; }
.comment-link-preview__title { font-size:13px; line-height:1.4; color:var(--text-primary); margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.comment-link-preview__meta { font-size:11px; color:var(--color-blue); }

/* 비밀글 댓글 자물쇠 (body 인라인) */
.comment-item__lock { display:inline-block; vertical-align:-2px; margin-right:4px; }

/* 답변상태 변경 모달 */
.status-change-list { list-style:none; margin:0; padding:24px 30px; display:flex; flex-direction:column; gap:14px; }
.status-change-item { display:flex; align-items:center; gap:10px; cursor:pointer; }
.status-change-item__check { width:20px; height:20px; flex-shrink:0; margin:0 20px; }
.status-change-item__desc { font-size:13px; color:var(--text-secondary); }
.status-change-modal__footer { padding:0 30px 30px; }

/* 간이 리치 텍스트 에디터 */
.rt-editor { border:1px solid var(--border-color); border-radius:6px; background:#fff; overflow:hidden; }
.rt-editor__toolbar { display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--border-color); background:#F8F9FA; }
.rt-editor__group { display:flex; align-items:center; gap:2px; }
.rt-editor__btn { width:30px; height:30px; padding:0; background:none; border:none; border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:13px; color:#666; font-family:inherit; }
.rt-editor__btn:hover { background:#F4F5F7; }
.rt-editor__divider { width:1px; height:16px; background:var(--border-color); margin:0 4px; }
.rt-editor__body { min-height:340px; padding:20px 24px; font-size:14px; line-height:1.7; color:var(--text-primary); outline:none; }
.rt-editor__body p { margin:0 0 8px; }
.rt-editor__body img { max-width:100%; height:auto; }
.rt-editor__footer { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:20px; }
.rt-editor__usage { font-size:13px; color:var(--text-primary); }
.rt-editor__usage-total { color:var(--text-tertiary); }

/* 업로드 리스트 */
.upload-list { margin-top:16px; }
.upload-list__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0; }
.upload-list__title { margin:0; margin-block:0; margin-inline:0; font-size:17px; font-weight:700; color:var(--text-primary); }
.upload-list__file { display:inline-flex; align-items:center; gap:6px; }

/* 업로드 리스트 전용 테이블 (admin-table 변형, setting-table 안에서도 동작) */
.upload-list .upload-table { width:100%; min-width:600px; border-collapse:collapse; font-size:13px; }
.upload-list .upload-table thead tr th { height:46px; padding:0 12px; background:transparent; border-top:2px solid #222; border-bottom:1px solid #aaa; font-weight:600; color:#919191; text-align:center; white-space:nowrap; width:auto; }
.upload-list .upload-table tbody tr td { padding:4px 12px; background:transparent; border-bottom:1px solid #EAEAEA; color:var(--text-primary); font-size:13px; vertical-align:middle; text-align:center; height:auto; }
.upload-list .upload-table td.td-left,
.upload-list .upload-table th.td-left { text-align:left; }
.upload-list .upload-table tr:hover td { background:var(--bg-hover); }


/* 플로팅 하단 바 */
.admin-float-bar {
    position: sticky;
    bottom: 0;
    background: var(--bg-white);
    border-top: 1px solid var(--border-color);
    padding: 14px var(--content-gap);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    z-index: 50;
}

/* ==================== Grid ==================== */
.admin-grid {
    display: grid;
    gap:6px;
}

.admin-grid--2 { grid-template-columns: repeat(2, 1fr); }
.admin-grid--3 { grid-template-columns: repeat(3, 1fr); }
.admin-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 상단 액션바 - 페이지 우상단 정렬 액션 버튼 그룹 */
.admin-action-bar { display: flex; justify-content: flex-end; gap: 4px; }

/* ==================== Buttons ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-base);
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.btn:hover { opacity: 1; }

/* 크기 변형 */
.btn.big  { min-width:360px; height: 52px; padding: 0 28px; font-size: 16px; font-weight:600; color:#fff;border-radius: 6px;background-color: var(--color-primary); }
.btn.lg   { min-width:100px; height: 44px; padding: 0x 24px; font-size: 15px; color:#fff;border-radius: 6px;background-color: var(--color-primary); }
.btn.nm   { min-width:84px;height: 40px; padding: 0 20px; font-size: 14px;color:#fff;border-radius: 6px;background-color: var(--color-primary); }
.btn.md   { min-width:60px; height: 36px; padding: 0 16px; font-size: 13px; }
.btn.sm   { height: 28px; padding: 0 12px; font-size: 12px; border-radius: 4px; }
.btn.xs   { height: 26px; padding: 0 10px; font-size: 11px; border-radius: 4px; }
.btn.xxs { height: 21px; padding: 0 5px; font-size: 11px; border-radius: 4px; }

/* 아이콘 들어간 버튼 - 좌측 패딩 축소 (아이콘과 보더 사이 10px) */
.btn.btn--icon { padding-left: 10px; }

/* 마스크 아이콘 - SVG 형태를 임의 색상으로 표시 */
.ico-mask { display:inline-block; width:16px; height:16px; flex-shrink:0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.ico-mask--plus-gray { background-color:#676A6E; -webkit-mask-image:url('../src/images/ico-16px-plus03.svg'); mask-image:url('../src/images/ico-16px-plus03.svg'); }

.btn.primary { background: var(--color-primary); color: #fff; }
.btn.primary:hover { background: var(--color-blue); }
.btn.primary:active { background: var(--color-primary); color: #fff; }

.btn.darkgray {background-color: #707070;color:#FFF;border:1px solid #707070;}
.btn.darkgray:hover  { background:#4F4F4F; border:1px solid #4F4F4F;}

.btn.gray {background-color: #DADDE5;color:#FFF;border:1px solid #DADDE5;}
.btn.gray:hover  { background: var(--color-blue); border:1px solid var(--color-blue);}
.btn.gray:active  { background: var(--color-primary); border:1px solid var(--color-primary);}

.btn.dark { background-color:#424242; color: #fff; }
.btn.dark:hover { background-color: var(--btn-dark-0); color: #fff; }
.btn.dark:active { background-color: var(--btn-dark-1); color: #fff; }

/* AI 버튼 (lg 사이즈와 동일, 보라 → hover/active 다크) */
.btn.ai { background-color:#6756ED; color:#fff;min-width: 150px; padding:0 15px 0 11px; gap:4px; }
.btn.ai:hover { background-color:#222; }
.btn.ai:active { background-color:#424242; }

/* AI 버튼 — 보라 변형 (생성/재생성용) */
.btn.ai-violet { background-color:#6756ED; color:#fff; min-width:150px; padding:0 15px 0 11px; gap:4px; }
.btn.ai-violet:hover { background-color:#4F40D6; }
.btn.ai-violet:active { background-color:#3D2DBA; }

.btn.border { background-color:#fff; border: 1px solid #BFBFBF; color: #222; }
.btn.border:hover { border-color: #4F4F4F; }
.btn.border:active { background-color: #fff; border-color: #BFBFBF; color: #222; }

.btn.border-primary { background: #fff; border: 1px solid var(--color-primary); color: var(--color-blue); }
.btn.border-primary:hover { background: #fff; border-color: var(--color-blue); color: var(--color-blue); }
.btn.border-primary:active { background: #fff; border-color: var(--color-primary); color: var(--color-primary); }

/* disabled — 사이즈/컬러 변형 뒤에 정의해 자동 오버라이드 */
.btn:disabled,
.btn[disabled] {
    background: #F2F2F2;
    color: #BBBBBB;
    border-color: transparent;
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
}


/* 좌측 아이콘 버튼 (아이콘 + 텍스트) */
.btn.icon-left { gap: 4px; padding-left: 12px; }

/* 유틸리티 */
.btn--full      { width: 100%; }
.btn.btn--narrow { padding-left: 10px; padding-right: 10px; min-width: 0; }
.btn.btn--del { padding-left: 35px; background-image: url("../src/images/ico-16px-minus.svg"); background-repeat: no-repeat; background-position: 14px center; background-size: 16px 16px; }
.btn--icon-only { padding: 0; width: 40px; }
.btn--icon-only.btn--lg { width: 44px; }
.btn--icon-only.btn--md { width: 36px; }
.btn--icon-only.btn--sm { width: 28px; }
.btn--icon-only.btn--xs { width: 26px; }
.btn--add { display:block; width:100%; height:40px;line-height:40px;padding:0 16px; border:1px solid var(--border-color); border-radius:6px; background:#fff; font-size:14px; color:var(--color-textgray);font-weight:500;text-align:center; cursor:pointer; transition:border-color 0.15s, color 0.15s; }
.btn--add:hover { border-color:var(--color-primary); color:var(--color-blue); }
.btn--add:active { border-color:var(--color-primary); color:var(--color-blue); }
/* ==================== Form Elements ==================== */
.form-control {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-base);
    color: var(--text-primary);
    background: var(--bg-white);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}

.form-control:focus { border-color: var(--color-primary); }
.form-control::placeholder { color: var(--text-placeholder); }

textarea.form-control {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.6;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==================== Table ==================== */
.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table {
    width: 100%;
    min-width: 1280px;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table th {
    height: 46px;
    padding: 0 12px;
    background: #fff;
    border-top: 2px solid #222;
    border-bottom: 1px solid #aaa;
    font-weight: 600;
    color: #919191;
    text-align: center;
    white-space: nowrap;
}

.admin-table td {
    height: 48px;
    padding: 13px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 14px;
    vertical-align: middle;
    text-align: center;
}

.admin-table td.td-left { text-align: left; }
.admin-table td.td-right { text-align: right; }
/* 제목 셀(th)은 무조건 중앙정렬 — td-left/td-right 클래스 무시 */
.admin-table th { text-align: center !important; }

/* ==================== Modal Table ==================== */
.modal-table-wrap { overflow: auto; min-height: 300px; max-height: 300px; }
.modal-table-wrap .modal-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; border-top: 0; border-bottom: 0; box-shadow: inset 0 2px 0 #222, inset 0 -1px 0 #aaa; }

.modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.modal-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 42px;
    padding: 0 10px;
    background: #fff;
    border-top: 2px solid #222;
    border-bottom: 1px solid #aaa;
    font-weight: 600;
    color: #B0B0B0;
    text-align: center;
    white-space: nowrap;
}

.modal-table th .c-dropdown__label { color: #B0B0B0; }

.modal-table td {
    padding: 8px 5px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    vertical-align: middle;
    text-align: center;
}

.modal-table td.td-left,
.modal-table th.td-left { text-align: left; }

.modal-table tr:hover td { background: var(--bg-hover); }

/* 모달용 드롭다운 - 컴팩트 사이즈 */
.c-dropdown--modal .c-dropdown__trigger { height: 36px; font-size: 13px; }
.td-sub { font-size: 13px; color: var(--color-dark); }
.td-log-name { font-weight: 600; }
.td-log-desc { font-size: 13px; color: var(--text-secondary); }
.td-log-date { font-size: 12px; color: var(--text-secondary); text-align: center; }

.admin-table tr:hover td { background: var(--bg-hover); }
.admin-table td .input-unit-box { display:flex; width:100%; }
.admin-table td > img { margin: 0 auto; }

/* 탭메뉴 내부 테이블 (body는 admin-table과 동일, th는 form-table 스타일) */
.tab-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-size: 13px;
}
.tab-table th {
    height: 44px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-dark);
    background: #f9f9f9;
    padding: 0 12px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.tab-table td {
    height: 48px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 14px;
    vertical-align: middle;
    text-align: center;
}
.tab-table td:nth-child(2) { text-align: left; }
.tab-table td.td-left { text-align: left; }
.tab-table td.td-right { text-align: right; }
.tab-table tr:hover td { background: var(--bg-hover); }
.tab-table td > img,
.tab-table td .row-drag,
.tab-table td .product-cell { vertical-align: middle; }
.tab-table td .input-unit-box { display:flex; width:100%; }
/* tab-table--compact : td 상하 패딩 8px */
.tab-table--compact td { height: auto; padding-top: 8px; padding-bottom: 8px; }

/* tab-table 헤더 내 드롭다운: th 높이 늘어남 방지 */
.tab-table th .c-dropdown { max-width: none; vertical-align: middle; }
.tab-table th .c-dropdown__trigger {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    padding: 6px 15px;
    gap: 15px;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-dark);
    justify-content: center;
}
.tab-table th .c-dropdown__panel {
    left: 50%;
    transform: translateX(-50%);
    min-width: 0;
    width: 100%;
}

/* ==================== Badge / Status ==================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.badge--primary { background: #EBF3FF; color: var(--color-primary); }
.badge--accent  { background: #EEF0FD; color: var(--color-purple); }
.badge--success   { background: #E8F7F1; color: var(--color-green); }
.badge--danger     { background: #FEECEC; color: var(--color-red); }
.badge--neutral    { background: #F2F2F2; color: var(--text-secondary); }

.importance-badge    { display: inline-flex; align-items: center; background: #FFDFDF; color: #F00; font-weight: 600; border-radius: 100px; white-space: nowrap; }
.importance-badge--lg { font-size: 12px; padding: 5px 8px 5px 10px; }
.importance-badge--sm { font-size: 9px;  padding: 3px 5px 4px 6px; }
.ai-badge { display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; border-radius:100px; border:1px solid; background:transparent; font-size:11px; font-weight:600; white-space:nowrap; }
.ai-badge--tutor     { border-color:#F55F02; color:#F55F02; }
.ai-badge--translate { border-color:#337EFE; color:#337EFE; }

/* ==================== Pagination ==================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.pagination__btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    color: var(--btn-dark-0);
    cursor: pointer;
    border: 1px solid #EAEAEA;
    transition: background 0.15s;
}

.pagination__btn:hover { border: 1px solid var(--btn-dark-0); }
.pagination__btn.active { border: 1px solid var(--btn-dark-0); }
.pagination__btn:disabled,
.pagination__btn.disabled { background: #F5F5F5; border-color: #F5F5F5; cursor: not-allowed; }
.pagination__btn:disabled img,
.pagination__btn.disabled img { filter: brightness(0) invert(1) brightness(0.69); }

/* ==================== Form ==================== */

/* 공통 인풋 */
.form-input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #DFE0E3;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    color: #222222;
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-input::placeholder {
    color: var(--text-placeholder);
}

.form-input:focus {
    border-color: var(--color-primary);
}

.form-input:disabled {
    background: #F2F2F2;
    border-color: #F2F2F2;
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* 에러 상태 */
.form-input--error {
    border-color: var(--color-red);
    padding-right: 36px;
}

/* 에러 아이콘 래퍼 */
.form-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field__error-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-red);
    pointer-events: none;
}

/* 레이블 */
.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.form-label--required::after {
    content: ' *';
    color: var(--color-red);
}

/* 에러 메시지 */
.form-error-msg {
    font-size: 12px;
    color: var(--color-red);
    letter-spacing: -0.02em;
}

/* 도움말 텍스트 */
.form-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    letter-spacing: -0.02em;
}

/* select 드롭다운 */
.form-select {
    width: 100%;
    height: 44px;
    padding: 0 32px 0 12px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    background: #FFFFFF url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.75L4.75 4.75L8.75 0.75' stroke='%23676A6E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-select:focus  { border-color: var(--color-primary); }
.form-select:disabled {
    background-color: #F2F2F2;
    border-color: #EEEEEE;
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* textarea */
.form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    background: #FFFFFF;
    outline: none;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.15s;
    box-sizing: border-box;
    line-height: 1.5;
}

.form-textarea::placeholder { color: var(--text-placeholder); }
.form-textarea:focus        { border-color: var(--color-primary); }
.form-textarea:disabled {
    background: #F2F2F2;
    border-color: #EEEEEE;
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* ==================== Info & Tip Bar ==================== */
.admin-infotip {
    background: #EAF3FF;
    border-radius: 6px;
    padding: 10px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #027CFA;
    line-height:1.4;
    letter-spacing: -0.02em;
}

.admin-infotip__icon {
    flex-shrink: 0;
    align-self: flex-start;
    width: 16px;
    height: 16px;
    margin-top:3px;
    border:2px solid var(--color-blue);
    border-radius: 50%;
    color: var(--color-blue);
    font-size: 13px;
    font-weight: 700;
    line-height:1.4;
    display: flex;
    align-items: center;
    justify-content: center;
}



.admin-infotip__link {
    color: var(--color-blue);
    font-weight: 600;
    margin-left:6px;
    white-space: nowrap;
    text-decoration: underline;
}

.admin-infotip__warn { color:#F22; margin-left:16px; }

/* admin-infotip 에러 변형 (빨강) */
.admin-infotip--error { background:#FFEDED; color:#FF3B30; }
.admin-infotip--error .admin-infotip__icon { border-color:#FF3B30; color:#FF3B30; }
.admin-infotip--error .admin-infotip__link { color:#FF3B30; }

/* 가이드보기 등 인라인 링크 (블루 + 밑줄) — infotip 밖에서도 사용 */
.guide-link { color: var(--color-blue); font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* ==================== Filter Bar ==================== */
.admin-filter {
    background: var(--bg-white);
    display: flex;
    align-items: center;
    gap: 4px;
}

.admin-filter__search {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    border-radius: 6px;
    padding: 0 12px;
    flex: 1;
    background: #F5F5F5;
}

.admin-filter__search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    background: transparent;
    letter-spacing: -0.02em;
}

.admin-filter__search-input::placeholder { color: var(--text-placeholder); }
.admin-filter__search-input:disabled { color: var(--text-disabled); cursor: not-allowed; }

.admin-filter__selects {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.admin-filter__select {
    height: 40px;
    padding: 0 32px 0 12px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    background: #FFFFFF url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.75L4.75 4.75L8.75 0.75' stroke='%23676A6E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
}

.admin-filter__select--auto { width: auto; }

/* --- Custom Dropdown --- */
.c-dropdown { position: relative; display: inline-block; max-width: 100%; }
.c-dropdown--block { display: block; width: 100%; max-width: 100%; }
.c-dropdown--block .c-dropdown__trigger { min-width: 0; max-width: 100%; }
.c-dropdown__trigger { display: flex; align-items: center; gap: 6px; width: 100%; min-width:140px;max-width:300px; height: 40px; padding: 0 8px 0 12px; border: 1px solid #DDDDDD; border-radius: 6px; background: #fff; font-family: inherit; font-size: 13px; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.c-dropdown__trigger:hover { border-color: var(--color-primary); }
.c-dropdown__trigger.open { border-color: var(--color-primary); border-bottom-color: transparent; border-radius: 6px 6px 0 0; }
.c-dropdown__arrow { transition: transform 0.2s; flex-shrink: 0; margin-left: auto; }
.c-dropdown__trigger.open .c-dropdown__arrow { transform: rotate(180deg); }
.c-dropdown__panel { display: none; position: absolute; top: 100%; left: 0; width: 100%; min-width: 100%; max-width: 100%; background: #fff; border: 1px solid #DDDDDD; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 500; padding: 4px 0; }
.c-dropdown__trigger.open + .c-dropdown__panel { display: block; border-color: var(--color-primary); }
.c-dropdown--full-border .c-dropdown__panel { border-top: 1px solid #DDDDDD; border-radius: 8px; }
.c-dropdown--full-border .c-dropdown__trigger.open + .c-dropdown__panel { border-color: var(--color-primary); }
th .c-dropdown__trigger { gap: 4px; min-width: unset; padding: 0 8px; }
.c-dropdown--ghost .c-dropdown__trigger { height: 36px; border-color: transparent; background: transparent; min-width: 100px; }
.c-dropdown--ghost .c-dropdown__trigger:hover { border-color: transparent; background: transparent; }
.c-dropdown--ghost .c-dropdown__trigger.open { border-color: var(--color-primary); border-bottom-color: transparent; border-radius: 6px 6px 0 0; background: #fff; }
.c-dropdown__trigger--primary { background:var(--color-primary); color:#fff; border-color:var(--color-primary); justify-content:center; min-width:120px; font-weight:500; }
.c-dropdown__trigger--primary .c-dropdown__arrow { filter:brightness(0) invert(1); }
.c-dropdown__item { display: block; width: calc(100% - 8px); margin: 0 4px; padding: 9px 10px; font-size: 13px; color: var(--text-primary); background: transparent; text-align: left; cursor: pointer; border: none; font-family: inherit; border-radius: 6px; }
.c-dropdown__item:hover { background: #EAF3FF; }
.c-dropdown__item.active { background: #EBF3FF; color: var(--color-blue); font-weight: 500; }

/* ==================== Filter + Stats Panel ==================== */든 
.admin-filter-panel {
    background: var(--bg-white);
    padding:30px;
    border-radius: 6px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

.admin-filter-panel .admin-filter {
    background: transparent;
}
.admin-filter-panel .admin-filter__search { background: #fff; border: 1px solid var(--border-color); }

.admin-filter-panel__stats {
    padding:10px 0;
}

/* ==================== User Search Box ==================== */
.user-search-box { background: #EDF0F4; border-radius: 8px; padding: 20px; }
.user-search-box .admin-filter { background: transparent; }
.user-search-box .admin-filter__search { background: #fff; border: 1px solid var(--border-color); }

/* ==================== Stat Cards ==================== */
.stat-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 18px 30px;
    display: flex;
    align-items: center;
    gap:16px;
}

.stat-card__icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card__icon-wrap--blue   { background: var(--color-primary); }
.stat-card__icon-wrap--purple { background: var(--color-purple); }
.stat-card__icon-wrap--orange { background: #FF7700; }
.stat-card__icon-wrap--green  { background: var(--color-green); }

.stat-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.stat-card__label {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: -0.02em;
}

.stat-card__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.stat-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.stat-card__trend--up   { background: var(--trend-up-bg);   color: var(--trend-up-text); }
.stat-card__trend--down { background: var(--trend-down-bg); color: var(--trend-down-text); }

.stat-card--simple { flex-direction: row; align-items: center; gap: 16px; }
.stat-card--simple .stat-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.stat-card--simple .stat-card__label { font-size: 13px; color: var(--text-secondary); }
.stat-card--simple .stat-card__value { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; }

/* chip 변형 - 좌측 status-chip + 우측 값/설명 */
.stat-card--chip { background: #fff; border: 1px solid #DEDFE0; gap: 12px; }
.stat-card--chip .stat-card__body { gap: 6px; }
.stat-card--chip .stat-card__value { font-size: 30px; }
.stat-card__desc { font-size: 11px; color: #808080; letter-spacing: -0.02em; line-height: 1.3; text-align: right; }

/* ==================== Role Badge ==================== */
.role-badge {
    width: 34px;
    height: 16px;
    line-height:16px;
    text-align: center;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

.role-badge--learner    { background: #6756ED; }
.role-badge--manager    { background: #F55F02; }
.role-badge--instructor { background: #027CFA; }
.role-badge--sub        { background: #4FC0FC; }
.role-badge--first      { background: #FFF2CA; color: #F55F02; width: auto; height: 16px; padding: 0 4px; font-weight: 700; }

/* ==================== Avatar ==================== */
.c-avatar30 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #D3D3D3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}
.c-avatar30.basic       { background-image: url('../src/images/avatar-basic.svg');      background-size: 32px;background-position: bottom; }
.c-avatar30.manager     { background-image: url('../src/images/avatar-manager.png');      background-size: cover; }
.c-avatar30.teacher     { background-image: url('../src/images/avatar-teacher.png'); background-size: cover; }
.c-avatar30.sub-teacher { background-image: url('../src/images/avatar-teacher-sub.png'); background-size: cover; }
.c-avatar30.learner     { background-image: url('../src/images/avatar-user.png');          background-size: cover; }

.c-avatar30 img { width: 100%; height: 100%; object-fit: cover; }

.c-avatar40 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #D3D3D3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
    overflow: hidden;
}
.c-avatar40.basic       { background-image: url('../src/images/avatar-basic.svg');      background-size: 40px; background-position: bottom; }
.c-avatar40.manager     { background-image: url('../src/images/avatar-manager.png');    background-size: cover; }
.c-avatar40.teacher     { background-image: url('../src/images/avatar-teacher.png');    background-size: cover; }
.c-avatar40.sub-teacher { background-image: url('../src/images/avatar-teacher-sub.png'); background-size: cover; }
.c-avatar40.learner     { background-image: url('../src/images/avatar-user.png');        background-size: cover; }

/* ==================== User Cell ==================== */
.user-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFF;
    border:1px solid #EAEAEA;
    border-radius:25px;
    padding: 4px 10px 4px 4px;
}

.user-cell--plain {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

/* 모달 전용 user-cell - 테두리 유지 + 폰트 12px */
.user-cell--modal { font-size: 12px; }
.user-cell--modal .user-cell__name { font-size: 12px; }

/* 추가 버튼 + 유저셀 그룹 (가로 정렬) */
.user-action-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 상품 셀 (썸네일 + 상품명) */
.product-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.product-cell__thumb {
    width: 64px;
    height: 36px;
    object-fit: cover;
    flex-shrink: 0;
}

.user-cell__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-cell__name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.grade-tag {
    display: inline-block;
    border-radius:25px;
    padding: 10px 12px;
    background: #FFF;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ==================== Email Cell ==================== */
.email-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ==================== Join Type Tag ==================== */
.join-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 100px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.join-tag--normal    { border-color: var(--tag-normal-color); color: var(--tag-normal-color); }
.join-tag--shortlink { border-color: var(--tag-live-color);   color: var(--tag-live-color); }

/* ==================== Progress Bar ==================== */
.progress-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
.progress-cell--field { justify-content: flex-start; min-height: 25px; }

.progress-bar {
    width: 30px;
    flex-shrink: 0;
    height: 6px;
    background: #EFEFEF;
    border-radius: 100px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: #6B6EEF;
    border-radius: 100px;
}

.progress-bar__text {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    min-width: 30px;
    text-align: right;
}

/* ==================== Status Chip ==================== */
.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 8px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-chip--sm { height:18px; padding:0 6px; font-size:9px; }
.status-chip--xs { height:auto; padding:4px 8px; font-size:11px; }
.status-chip--active   { background: #E2FFF3; color: #089253; }
.status-chip--inactive { background: #EBEBEB; color: #424242; }
.status-chip--left     { background: #f5f5f5; color: #808080; }
.status-chip--closed   { background: #f5f5f5; color: #808080; }
.status-chip--sent     { background: #E2F9FF; color: #027CFA; }

/* ==================== Learn Status Badge ==================== */
/* 학습상태 뱃지 (피그마 기준) — 투명 배경 outline 스타일 */
.learn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 100px;
    border: 1px solid;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.learn-badge--progress { border-color: #1FB6FF; color: #337EFE; } /* 진행중 */
.learn-badge--join     { border-color: #F55F02; color: #F52A02; } /* 참여중 */
.learn-badge--end      { border-color: #909090; color: #2C2C2C; } /* 종료   */

/* 진행중 하단 날짜 보조 텍스트 */
.learn-badge-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.learn-badge-cell__sub {
    font-size: 11px;
    font-weight: 400;
    color: #337EFE;
    letter-spacing: -0.02em;
}

.learn-badge-cell:has(.learn-badge--join) .learn-badge-cell__sub {
    color: #F52A02;
}

/* ==================== Enroll Status Badge ==================== */
/* 수강상태 칩 — 배경색 filled 스타일 */
.enroll-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.enroll-badge--enrolled  { background: var(--status-success-bg);   color: var(--status-success-text); }   /* 수강중   */
.enroll-badge--cancel    { background: var(--status-accent-bg);  color: var(--status-accent-text); }  /* 수강취소 */
.enroll-badge--card      { background: var(--status-info-bg); color: var(--status-info-text); } /* 카드사취소 */
.enroll-badge--fail      { background: var(--status-warning-bg);  color: var(--status-warning-text); }  /* 미수료   */
.enroll-badge--complete  { background: var(--status-danger-bg);     color: var(--status-danger-text); }     /* 수료     */
.enroll-badge--expired   { background: #F4F4F4;                  color: var(--status-tertiary); }       /* 기간만료 */
.enroll-badge--danger    { background: var(--status-danger-bg);    color: var(--status-danger-text); }    /* 구독취소(빨강) */

/* ==================== Send Type Chip ==================== */
/* 발송유형 칩 — 아이콘만 교체, 스타일 공통 */
.send-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 100px;
    border: 1px solid #DFDFDF;
    font-size: 12px;
    line-height: 120%;
    color: #333;
    white-space: nowrap;
}

/* 발송상태 칩 — filled 스타일 */
.send-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}
.send-status-chip--success { background: var(--status-info-bg);     color: var(--status-info-text); }
.send-status-chip--fail    { background: var(--status-danger-bg);    color: var(--status-danger-text);   }
.send-status-chip--pending { background: var(--status-warning-bg); color: var(--status-warning-text); }

/* ==================== Detail Basic Form ==================== */
.detail-form__section { margin-bottom: 30px; }
.detail-form__section-title { font-size: 17px; font-weight: 700; color: #222; padding-bottom: 10px; border-bottom: 1px solid #EFEFEF; margin-bottom:15px; }
/* 자료실 등 — 우측에 액션이 함께 들어가는 섹션 헤더 (밑줄·하단마진 없음) */
.panel-subhead { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0; padding:0 0 5px; border:0; border-bottom:1px solid #EFEFEF; font-size:17px; font-weight:700; color:#222; }
.panel-subhead__actions { display:flex; align-items:center; gap:16px; font-size:13px; font-weight:400; }
.detail-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 30px; margin-top: 20px; }
.detail-form__grid--1col { grid-template-columns: 1fr; }
.detail-form__grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.detail-form__grid--mb20 { margin-bottom: 20px; }
.help-icon { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border:1px solid var(--text-secondary); border-radius:50%; font-size:9px; font-weight:700; color:var(--text-secondary); margin-left:4px; vertical-align:middle; }
.info-mark { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:#fff; border:1px solid var(--color-blue); color:var(--color-blue); font-size:9px; font-weight:700; vertical-align:middle; margin-right:4px; flex-shrink:0; }

/* 선택된 대상 - 번호 리스트 (수신자 그룹/상품 선택 모달) */
.target-selected__list { list-style:decimal inside; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--text-primary); }
.target-selected__list li { display:flex; align-items:center; gap:8px; }
.target-selected__list li > span { flex:1; }
.target-selected__remove { width:14px; height:14px; padding:0; border:none; background:none; cursor:pointer; font-size:14px; line-height:1; color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.target-selected__remove:hover { color:var(--color-primary); }
.detail-form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detail-form__field--full { grid-column: 1 / -1; }
.detail-form__label { font-size: 13px;line-height:1.5; color: var(--color-textgray); }
.detail-form__input-box { padding: 10px 14px; border: 1px solid #EFEFEF; border-radius: 6px; font-size: 14px; color: #222; background: #FAFAFA; }
.detail-form__input { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; color: var(--text-primary); font-family: inherit; outline: none; box-sizing: border-box; }
.detail-form__input:focus { border-color: var(--color-primary); }
.detail-form__input::placeholder { color: var(--text-placeholder); }
.detail-form__input:disabled { color: var(--text-disabled); background: #F2F2F2; cursor: not-allowed; }
.detail-form__text { font-size: 14px;line-height:1.5; color: #222; padding: 2px 0; }
.detail-form__text--accent { color: var(--color-blue); font-weight: 500; }
.detail-form__sub-text { font-size: 12px; color: #808080; }

/* 대시보드 헤더 바 (게시판/정산/폼/상품 등 상단 요약 바) */
.dashboard-bar { display:flex; align-items:center; gap:20px; padding:24px 30px; background:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.08); }

/* 일반 콘텐츠 바 — 세로 흐름 콘텐츠용 (dashboard-bar와 동일 외형, padding 24 30) */
.content-bar { padding:24px 30px; background:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.08); margin-bottom:16px; }
.dashboard-bar__thumb { width:120px; height:80px; flex-shrink:0; background:#F4F5F7; border-radius:6px; padding:10px; font-size:11px; color:#999; line-height:1.4; overflow:hidden; }
.dashboard-bar__thumb--lg { width:195px; height:110px; }
.dashboard-bar__main { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.dashboard-bar__label { font-size:12px; color:var(--color-blue); font-weight:500; }
.dashboard-bar__head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.dashboard-bar__title { font-size:20px; font-weight:700; color:#222; letter-spacing:-0.02em;line-height:1.4; }
.dashboard-bar__title--ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-bar__meta { display:flex; align-items:center; row-gap:6px; column-gap:18px; flex-wrap:wrap; padding:12px 0 8px; }
.dashboard-bar__meta-item { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.dashboard-bar__meta-label { color:#A0A0A0; }
.dashboard-bar__meta-value { color:var(--text-primary); font-weight:500; }
.dashboard-bar__actions { display:flex; align-items:center; gap:6px; flex-shrink:0; align-self:flex-start; padding-top:4px; }
.dashboard-bar__btn-group { display:inline-flex; align-items:center; gap:4px; }

/* 라벨 내장형 토글 (공개/판매중 등) */
.toggle-pill { display:inline-flex; align-items:center; height:32px; padding:0 14px 0 36px; border-radius:100px; background:var(--color-primary-light); color:#fff; font-size:13px; font-weight:600; position:relative; cursor:pointer; border:none; font-family:inherit; }
.toggle-pill::before { content:''; position:absolute; width:24px; height:24px; top:4px; left:4px; background:#fff; border-radius:50%; transition:0.2s; }
.toggle-pill--off { background:#CCC; padding:0 36px 0 14px; }
.toggle-pill--off::before { left:auto; right:4px; }
.detail-form__email-row { display: flex; align-items: center; gap:16px; padding: 4px 0; }
.detail-form__email-row .detail-form__email-addr { font-size: 14px; color: var(--text-primary); }
.detail-form__sns-icons { display: flex; gap: 4px; align-items: center; }
.detail-form__permission-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.detail-form__permission-list li { font-size: 14px; color: var(--text-primary); line-height: 1.5; }
.detail-form__sub-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; }
.detail-form__profile { margin: 30px 0; }
.detail-form__profile-row { display: flex; align-items: flex-end; gap: 20px; }

/* 프로필 설정 모달 */
.profile-modal__content { padding-left: 30px; padding-right: 30px; }
.profile-modal__upload { height: 230px; background: #F5F5F5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.profile-modal__upload-btn { padding: 8px 14px; border: none; border-radius: 6px; background: #4B4B4B; color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.profile-modal__crop { position: relative; height: 230px; overflow: hidden; border-radius: 8px; background-color:#fff; background-image: linear-gradient(45deg, #DDD 25%, transparent 25%), linear-gradient(-45deg, #DDD 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #DDD 75%), linear-gradient(-45deg, transparent 75%, #DDD 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.profile-modal__crop-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.profile-modal__crop-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 220px; height: 130px; border: 2px solid #027CFA; box-shadow: 0 0 0 9999px rgba(0,0,0,0.45); }
.profile-modal__crop-box::before, .profile-modal__crop-box::after { content:''; position:absolute; left:0; right:0; border-top:1px dashed rgba(255,255,255,0.7); }
.profile-modal__crop-box::before { top:33%; }
.profile-modal__crop-box::after { top:66%; }
.profile-modal__crop-handle { position:absolute; width:10px; height:10px; background:#027CFA; border:1px solid #fff; box-sizing:border-box; }
.profile-modal__crop-handle--tl { top:-5px; left:-5px; }
.profile-modal__crop-handle--tr { top:-5px; right:-5px; }
.profile-modal__crop-handle--bl { bottom:-5px; left:-5px; }
.profile-modal__crop-handle--br { bottom:-5px; right:-5px; }
.profile-modal__crop-handle--t  { top:-5px; left:50%; margin-left:-5px; }
.profile-modal__crop-handle--b  { bottom:-5px; left:50%; margin-left:-5px; }
.profile-modal__crop-handle--l  { left:-5px; top:50%; margin-top:-5px; }
.profile-modal__crop-handle--r  { right:-5px; top:50%; margin-top:-5px; }
.profile-modal__hint { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.profile-modal__hints { padding: 24px 30px 0; }
.profile-modal__footer { padding: 20px 30px 30px; }
.profile-modal__footer .btn { width: 100%; }

/* 사용자 유형 뱃지 */
.user-type-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid #027CFA;
    border-radius: 100px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: #027CFA;
    white-space: nowrap;
}
.user-type-tag--learner { color: #F55F02; border-color: #F55F02; }
.user-type-tag--sm { padding: 4px 10px; font-size: 11px; font-weight: 600; }
.detail-form__hint { font-size: 12px; color: var(--color-textgray);line-height:1.5; margin: 0 0 10px; }
.detail-form__amount { font-size: 16px; font-weight: 600; color: var(--text-primary); }
/* 적용된 쿠폰 리스트 (할인 필드 하위) */
.applied-coupon { display:flex; align-items:center; gap:16px; margin-top:16px; }
.applied-coupon__label { font-size:14px; color:var(--text-tertiary); flex-shrink:0; }
.applied-coupon__value { font-size:14px; color:var(--text-primary); }
.detail-form__textarea { width: 100%; min-height: 120px; padding: 15px 20px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 13px; color: var(--text-dark); font-family: inherit; resize: vertical; outline: none; box-sizing: border-box; line-height: 1.6; }
.detail-form__textarea:focus { border-color: var(--color-primary); }
.detail-form__textarea::placeholder { color: var(--text-placeholder); }
.detail-form__select,
.form-table td select.detail-form__select { width:100%; height:40px; padding:0 36px 0 14px; border:1px solid var(--border-color); border-radius:6px; font-size:14px; font-family:inherit; color:var(--text-primary); background:#fff url('../src/images/chevron-down.svg') no-repeat right 8px center; background-size:20px 20px; outline:none; box-sizing:border-box; appearance:none; -webkit-appearance:none; -moz-appearance:none; }
.detail-form__select:focus,
.form-table td select.detail-form__select:focus { border-color:var(--color-primary); }
.input-with-counter { position:relative; }
.input-with-counter input { padding-right:56px; }
.input-with-counter__count { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12px; color:#808080; pointer-events:none; }
.input-with-counter__count strong,
.completion-textarea__count strong,
.setting-table__count strong,
.setting-table__counter strong,
.textarea-counter__count strong { color:#222; font-weight:700; }
.content-folder-link { font-size:14px; color:var(--color-blue); text-decoration:none; }
.content-folder-link:hover { text-decoration:underline; }
.subtitle-table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; margin-top:24px; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); }
.subtitle-table th { height:44px; padding:0 12px; background:#f9f9f9; border-bottom:1px solid var(--border-color); font-weight:500; font-size:14px; color:var(--text-dark); text-align:center; }
.subtitle-table th:first-child, .subtitle-table td:first-child { width:48px; text-align:center; }
.subtitle-table th:last-child, .subtitle-table td:last-child { width:110px; text-align:center; }
.subtitle-table td { height:44px; padding:6px; border-bottom:1px solid var(--border-color); font-size:14px; color:var(--text-primary); vertical-align:middle; }
.subtitle-table tr:last-child td { border-bottom:none; }
.tab-info-table .subtitle-table { margin-top:0; }

/* 언어 태그 (선택된 언어 칩 리스트) */
.lang-tag-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.lang-tag { display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 15px 0 0;background:#fff; font-size:13px; color:var(--text-primary); }
.lang-tag__remove { width:14px; height:14px; padding:0; border:none; background:none; cursor:pointer; font-size:14px; line-height:1; color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; }
.lang-tag__remove:hover { color:var(--color-primary); }

/* AI 자막생성 라디오 옵션 (자막 섹션 하단) */
.ai-subtitle-option { margin-top:24px; }
.ai-subtitle-option__label { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--text-primary); }
.ai-subtitle-option__title { color:#F933F2; font-weight:600; }
.ai-subtitle-option__desc { margin:8px 0 0 28px; font-size:13px; color:var(--text-secondary); line-height:1.5; }

/* 자막 편집 페이지 - 2컬럼 레이아웃 */
.caption-edit { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:flex-start; }
.caption-edit__left { display:flex; flex-direction:column; gap:20px; }
.caption-edit__title { font-size:18px; font-weight:700; color:var(--text-primary); margin:0 -30px 16px; padding:0 30px 15px; border-bottom:1px solid var(--border-color); }

/* 비디오 플레이어 영역 */
.caption-video { background:#F2F2F2; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; gap:50px; }
.caption-video__btn { width:44px; height:44px; border:none; background:transparent; cursor:pointer; padding:0; line-height:0; }

/* 찾기 및 바꾸기 */
.find-replace__title { font-size:17px; font-weight:700; color:var(--text-primary); margin:0 -30px 20px; padding:0 30px 15px; border-bottom:1px solid var(--border-color); }
.find-replace__row { margin-bottom:20px; }
.find-replace__label { display:block; font-size:13px; color:var(--color-textgray); margin-bottom:6px; }
.find-replace__hint { font-size:12px; color:var(--text-tertiary); margin:10px 0; }
.find-replace__divider { margin:20px 0 0; border:none; border-top:1px solid #EAEAEA; }
.find-replace__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.find-replace__pagination { display:inline-flex; align-items:center; gap:15px; font-size:13px; color:var(--text-secondary); }
.find-replace__page-info { display:inline-flex; align-items:center; gap:2px; }
.find-replace__page-current { color:var(--color-primary); font-weight:700; }
.find-replace__nav-group { display:inline-flex; }
.find-replace__nav-btn { width:32px; height:28px; border:1px solid var(--border-color); background:#fff; cursor:pointer; font-size:12px; color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.find-replace__nav-btn:hover { border-color:var(--color-primary); color:var(--color-primary); position:relative; z-index:1; }
.find-replace__nav-group .find-replace__nav-btn:first-child { border-radius:4px 0 0 4px; }
.find-replace__nav-group .find-replace__nav-btn:last-child { border-radius:0 4px 4px 0; border-left:none; }
.find-replace__actions { display:flex; gap:4px; }

/* 자막 리스트 */
.caption-list { list-style:none; margin:0; padding:0; background:#fff; border-radius:8px; box-shadow:0 2px 4px 0 rgba(0,0,0,0.08); overflow:hidden; }
.caption-list__item { padding:20px 30px; border-bottom:1px solid var(--border-color); }
.caption-list__item:last-child { border-bottom:none; }
.caption-list__item--active { background:#EAF3FF; }
.caption-list__time { font-size:13px; color:var(--color-textgray);line-height:1.5;margin-bottom:10px; }
.caption-list__text { font-size:14px;font-weight: 500; color:var(--text-primary); line-height:1.5; margin:0; }
.caption-list__highlight { color:var(--color-blue); font-weight:700; }
.caption-list__edit-row { display:flex; gap:4px; align-items:center; }
.caption-list__edit-input { flex:1; height:40px; padding:0 12px; border:1px solid var(--border-color); border-radius:4px; font-size:14px; font-family:inherit; outline:none; box-sizing:border-box; }
.caption-list__edit-input:focus { border-color:var(--color-primary); }
.caption-list__edit-input::placeholder { color:var(--text-placeholder); }

/* AI 크레딧 정보 + 생성 버튼 바 (테이블 하단 대시보드) */
.ai-credit-bar { display:flex; align-items:center; justify-content:space-between; gap:24px;padding:30px 40px; background:#FFF; border-radius:8px;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); }
.ai-credit-bar__info { display:flex; align-items:center; gap:40px; flex:1; flex-wrap:wrap; }
.ai-credit-item { display:inline-flex; align-items:center; gap:8px; font-size:14px; }
.ai-credit-item__label { color:var(--text-dark); }
.ai-credit-item__value { font-weight:700; color:var(--text-primary); font-size:24px;letter-spacing: -1px; }
.ai-credit-warn { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-primary); }
.ai-credit-warn__link { color:var(--color-blue); font-weight:500; margin-left:2px; }
.ai-credit-warn__icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#F22; color:#fff; font-size:11px; font-weight:700; }
.subtitle-table__filename { display:flex; align-items:center; gap:8px; font-size:14px; }
.subtitle-table__check { accent-color:var(--color-primary); width:16px; height:16px; cursor:pointer; }
.subtitle-table__ai-tag { display:inline-flex; align-items:center; gap:3px; padding:2px 6px; background:#F0ECFF; color:#4700D6; border-radius:4px; font-size:11px; font-weight:600; flex-shrink:0; }
.input-suffix-wrap { display:inline-flex; align-items:center; gap:6px; }
.input-suffix { font-size:14px; color:var(--text-secondary); white-space:nowrap; }
.input-unit-box { display:inline-flex; align-items:stretch; border:1px solid var(--border-color); border-radius:6px; overflow:hidden; background:#fff; }
.input-unit-box--w200 { width:200px; align-self:flex-start; }  /* 원 단위 등 가격 입력 표준 폭. align-self로 column flex에서 늘어남 방지 */
.input-unit-box input { border:none; outline:none; padding:0 12px; height:40px; font-size:14px; color:var(--text-primary); background:transparent; min-width:0; }
.input-unit-box input:disabled { color: var(--text-disabled); cursor: not-allowed; }
.input-unit-box__unit { display:flex; align-items:center; padding:0 12px; border-left:1px solid var(--border-color); font-size:14px; color:var(--text-secondary); background:#f1f1f1; white-space:nowrap; }
.input-unit-box:focus-within { border-color:var(--color-primary); }
/* 인풋 + 단위(plain text) 그룹 — 단위가 인풋 박스 외부에 텍스트로 분리된 경우. input-unit-box와 구분. */
.input-with-unit { display:flex; align-items:center; gap:8px; }
.input-with-unit__suffix { font-size:14px; color:var(--text-primary); white-space:nowrap; flex-shrink:0; }
.method-radio { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--border-color); border-radius:6px; font-size:14px; color:var(--text-secondary); cursor:pointer; }
.method-radio--on { border-color:var(--color-primary); color:var(--color-primary); }
.method-radio input[type="radio"] { -webkit-appearance:none; appearance:none; width:18px; height:18px; border:1.5px solid #CCC; border-radius:50%; cursor:pointer; flex-shrink:0; position:relative; }
.method-radio input[type="radio"]:checked { border-color:var(--color-primary); border-width:1px; background:#fff; }
.method-radio input[type="radio"]:checked::after { content:''; position:absolute; width:8px; height:8px; background:var(--color-primary); border-radius:50%; top:50%; left:50%; transform:translate(-50%, -50%); }
.account-row { display:flex; gap:8px; align-items:center; }
.account-row__bank { height:40px; padding:0 10px; border:1px solid var(--border-color); border-radius:6px; font-size:14px; font-family:inherit; color:var(--text-primary); background:#fff; outline:none; min-width:100px; }
.account-row__bank:focus { border-color:var(--color-primary); }
.account-row__number { flex:1; max-width:280px; height:40px; padding:0 14px; border:1px solid var(--border-color); border-radius:6px; font-size:14px; font-family:inherit; color:var(--text-primary); outline:none; box-sizing:border-box; }
.account-row__number:focus { border-color:var(--color-primary); }
.tag-input-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding:16px; border: 1px solid var(--border-color); border-radius: 6px; min-height: 44px; background: #fff; cursor: text; }
.tag-input-wrap:focus-within { border-color: var(--color-primary); }
.tag-item { display: inline-flex; align-items: center; position: relative; padding: 8px 36px 8px 16px; background: #fff; border: 1px solid var(--color-primary); border-radius: 100px; font-size: 13px; color: var(--text-dark); }
.tag-item__del { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; width: 16px; height: 16px; background-image: url("../src/images/ico-16px-delete.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; font-size: 0; flex-shrink: 0; }
.tag-input__field { border: none; outline: none; font-size: 13px; color: var(--text-primary); font-family: inherit; flex: 1; min-width: 120px; padding: 2px 0;margin-left:5px; }
.form-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.form-table th { font-size: 14px; font-weight: 400; color: var(--color-dark); background: #f9f9f9; padding: 14px 12px; border-top: 1px solid var(--border-color);border-bottom: 1px solid var(--border-color); text-align: center; }
.form-table td { height: 48px; padding: 5px 2px; border-bottom: 1px solid var(--border-color); border-top: none; vertical-align: middle; }
.form-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.form-table td input, .form-table td select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 6px; outline: none; font-size: 13px; font-family: inherit; color: var(--text-primary); background: #fff; box-sizing: border-box; }
.form-table td input:focus, .form-table td select:focus { border-color: var(--color-primary); }
.form-table td input:disabled, .form-table td select:disabled { color: var(--text-disabled); background: #F2F2F2; cursor: not-allowed; }
.form-table td .c-date-input { width: 100%; box-sizing: border-box; }
.form-table td .c-date-input input { border: none; background: transparent; height: auto; padding: 0; }
.form-table td .c-date-input input:focus { border: none; }
.form-table td .input-unit-box { display: flex; width: 100%; align-items: center; gap: 6px; border: none; background: transparent; border-radius: 0; overflow: visible; }
.form-table td .input-unit-box input { flex: 1; border: 1px solid var(--border-color); border-radius: 6px; background: #fff; height: 40px; }
.form-table td .input-unit-box input:focus { border-color: var(--color-primary); }
.form-table td .input-unit-box__unit { background: none; border-left: none; font-size: 13px; color: #A0A0A0; padding: 0; white-space: nowrap; }
.unit-text { color: #A0A0A0; font-size: 13px; }
.form-table__input-row td { background: #EAF3FF; padding: 8px 2px; }
.form-table__input-row td:first-child { padding-left: 5px; }
.form-table__input-row td:last-child { padding-right: 5px; }
.form-table--settlement tr:not(.form-table__input-row) td:first-child,
.form-table--settlement tr:not(.form-table__input-row) td:nth-child(2) { padding-left: 20px; }
.form-table--settlement tr:not(.form-table__input-row) td:nth-child(3),
.form-table--settlement tr:not(.form-table__input-row) td:nth-child(4) { text-align: right; white-space: nowrap; }
.form-table--settlement tr:not(.form-table__input-row) td:nth-child(6) { text-align: center; }
.form-table--settlement .form-table__input-row td:nth-child(3) .input-unit-box input,
.form-table--settlement .form-table__input-row td:nth-child(4) .input-unit-box input { text-align: right; }
.form-table th:first-child, .form-table td:first-child { width:30%; white-space: nowrap; }
.form-table th:last-child, .form-table td:last-child { width:3%; white-space: nowrap; }
.form-table__del { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; background: #fff; border: 1px solid var(--border-color); border-radius: 4px; font-size: 12px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.form-table__del:hover { border-color: var(--color-accent); color: var(--color-accent); }
.tutor-upload { border: 1.5px dashed var(--border-color); border-radius: 8px; padding: 48px 24px; text-align: center; cursor: pointer; background: #F9FAFB; }
.tutor-upload__text { font-size: 16px; color: var(--text-primary); font-weight: 500; margin: 0 0 6px; }
.tutor-upload__hint { font-size: 12px; color:#A0A0A0; margin: 0; }

/* FAB 고정버튼 */
.c-fab { position: fixed; bottom: 30px; right: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 0; background: #4B4B4B; color: #fff; border: none; border-radius: 100px; width: 44px; height: 44px; padding: 0; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 100; white-space: nowrap; overflow: hidden; transition: background-color 0.25s ease, width 0.3s ease, gap 0.3s ease, padding 0.3s ease; }
.c-fab:hover { background-color: var(--color-primary); width: auto; padding: 0 20px; gap: 6px; }
.c-fab__text { font-size: 14px; font-weight: 600; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.3s ease, opacity 0.2s ease; }
.c-fab:hover .c-fab__text { max-width: 60px; opacity: 1; }

/* ==================== Table Checkbox ==================== */
.th-check { width: 44px; text-align: center; padding: 0 5px; }
.table-check {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: url('../src/images/check-unselected.svg') no-repeat center / contain;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

.table-check:checked {
    background-image: url('../src/images/check-selected.svg');
}

.table-check:indeterminate {
    background-image: url('../src/images/check-selected.svg');
}

/* ==================== Basic Checkbox (.c-check) ==================== */
.c-check {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #CCCCCC;
    border-radius:4px;
    background: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}
.c-check:checked {
    background: url('../src/images/ico-checked-basic.svg') no-repeat center / 26px 26px;
    border-color: transparent;
}
tr:has(.c-check:checked) {
    background-color: var(--color-primary-light);
}

/* ==================== Bulk Action Bar (Common) ==================== */
.c-bulk-bar {
    position: fixed;
    bottom: 10px;
    left: calc(var(--lnb-width) + 24px);
    right: 24px;
    height: 56px;
    background: var(--color-blue);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 40px 11px 30px;
    gap: 12px;
    z-index: 150;
    transition: transform 0.25s ease, opacity 0.25s ease;
    box-shadow: 0 4px 20px rgba(2, 124, 250, 0.35);
}

.c-bulk-bar.hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}

.c-bulk-bar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.c-bulk-bar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    padding-bottom: 1px;
}



.c-bulk-bar__text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    padding-top: 1px;
}

.c-bulk-bar__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.c-bulk-bar__btn {
    height:40px;
    padding: 10px 40px;
    border: none;
    border-radius:6px;
    background: #fff;
    color:#0095DD;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.c-bulk-bar__btn:hover {
    background: rgba(255, 255, 255, 0.85);
}

/* ==================== Detail Profile Card ==================== */
.detail-profile {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.detail-profile__top {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 30px;
}

.c-avatar80 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #D3D3D3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
}
.c-avatar80.learner     { background-image: url('../src/images/avatar-user.png'); }
.c-avatar80.manager     { background-image: url('../src/images/avatar-manager.png'); }
.c-avatar80.teacher     { background-image: url('../src/images/avatar-teacher.png'); }
.c-avatar80.sub-teacher { background-image: url('../src/images/avatar-teacher-sub.png'); }

.c-avatar88 {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background-color: #D3D3D3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
}
.c-avatar88.learner     { background-image: url('../src/images/avatar-user.png'); }
.c-avatar88.manager     { background-image: url('../src/images/avatar-manager.png'); }
.c-avatar88.teacher     { background-image: url('../src/images/avatar-teacher.png'); }
.c-avatar88.sub-teacher { background-image: url('../src/images/avatar-teacher-sub.png'); }

.detail-profile__body { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.detail-profile__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.detail-profile__name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.profile-badge--verify   { background: #EEEEEE; color: #555555; }
.profile-badge--active   { background: var(--status-success-bg); color: var(--status-success-text); }
.profile-badge--gold     { background: var(--status-warning-bg); color: var(--status-warning-text); }
.profile-badge--inactive { background: var(--status-danger-bg); color: var(--status-danger-text); }
.profile-badge--left     { background: var(--status-neutral-bg); color: var(--status-neutral-text); }

.detail-profile__email {
    font-size: 13px;
    color: var(--text-secondary);
}

.detail-profile__meta {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    padding-top: 8px;
    margin-top:10px;
}

.detail-profile__meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #333;
    margin-right: 20px;
}
.detail-profile__meta-item:nth-child(-n+2) { color: #B0B0B0; }

.detail-profile__meta-value { color: var(--text-primary); font-weight: 500; }
.detail-profile__meta-link  { color: var(--color-primary); font-weight: 500; }

/* 탭 메뉴 */
.detail-tab {
    display: flex;
    align-items: stretch;
    margin: 0 calc(-1 * var(--content-gap)) -15px;
    padding: 0 var(--content-gap);
    border-radius: 6px 6px 0 0;
}

.detail-tab__item {
    position: relative;
    flex: 1;
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    color: #A5A9B0;
    cursor: pointer;
    background: #EDEFF2;
    border: none;
    font-family: inherit;
    white-space: nowrap;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.detail-tab__item:first-child {
    border-radius: 6px 0 0 0;
}

.detail-tab__item:last-child {
    border-radius: 0 6px 0 0;
}

.detail-tab__item.active {
    color: var(--text-primary);
    font-weight: 600;
    background: #fff;
}

.detail-tab__item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30px;
    right: 30px;
    height: 3px;
    background: var(--color-primary-light);
    border-radius: 2px 2px 0 0;
}

/* 상품 타입 태그 */
.product-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.product-tag--normal     { border-color:#424242;   color: #333333; }
.product-tag--live       { border-color:#F52A02;   color:#F52A02; }
.product-tag--video      { border-color:#4700D6;   color:#4700D6; }
.product-tag--digital    { border-color:#089253;   color:#089253; }
.product-tag--package    { border-color: #1976D2; color: #1976D2; }
.product-tag--premium    { border-color: #F59500; color: #F59500; }
.product-tag--membership { border-color: #00BFB3; color: #00BFB3; }

/* 학습 상태 / 수강 상태 칩 추가 변형 */
.status-chip--outline-green  { background: transparent; border: 1px solid var(--color-green); color: var(--color-green); }
.status-chip--outline-gray   { background: transparent; border: 1px solid var(--text-tertiary); color: var(--text-tertiary); }
.status-chip--outline-purple { background: transparent; border: 1px solid var(--color-purple); color: var(--color-purple); }
.status-chip--outline-blue   { background: transparent; border: 1px solid var(--color-blue); color: var(--color-blue); }
.status-chip--success          { background: var(--status-success-bg); color: var(--status-success-text); }
.status-chip--info           { background: var(--status-info-bg); color: var(--status-info-text); }
.status-chip--danger            { background: var(--status-danger-bg); color: var(--status-danger-text); }
.status-chip--warning         { background: var(--status-warning-bg); color: var(--status-warning-text); }
.status-chip--neutral        { background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.status-chip--muted          { background: var(--status-muted-bg); color: var(--status-muted-text); }
.status-chip--accent         { background: var(--status-accent-bg); color: var(--status-accent-text); }
.status-chip--defer          { background: #FAF2EB; color: var(--status-warning-text); }   /* 결제유예 */
.status-chip--done           { background: #E8E8E8; color: #2C2C2C; }                       /* 수강완료 */

/* 라이브 상태 (라이브/예정/종료) - 너비 80 고정 */
.status-chip--live,
.status-chip--scheduled,
.status-chip--ended { width:80px; }
.status-chip--live      { background:#FFEAEA; color:#F52A02; font-size:13px; }
.status-chip--scheduled { background:#E2FFF3; color:#089253; }
.status-chip--ended     { background:#EBEBEB; color:#424242; }

/* 일부공개 (아이콘 + 텍스트, 그라데이션 보더) */
.status-chip--partial {
    gap:4px;
    padding: 7px 10px 6px;
    color: var(--status-danger-text);
    border: 2px solid transparent;
    background:
        linear-gradient(var(--status-danger-bg), var(--status-danger-bg)) padding-box,
        linear-gradient(135deg, #FFB700, #FF1178) border-box;
}
.status-chip--partial img { width:16px; height:16px; flex-shrink:0; }

/* 답변/문의 상태 (solid 배경) */
.status-chip--answer-wait,
.status-chip--answer-ing,
.status-chip--answer-done,
.status-chip--inquiry-end {
    width: 52px;
    height: auto;
    padding: 4px 6px;
    font-size: 11px;
}
.status-chip--answer-wait    { background: #FF7700; color: #fff; }
.status-chip--answer-ing     { background: #089253; color: #fff; }
.status-chip--answer-done    { background: #666666; color: #fff; }
.status-chip--inquiry-end    { background: #AEB0B4; color: #fff; }

/* 테이블 셀 안 칩 (in-table) - 테두리(outline) 스타일 */
.status-chip--in-table {
    width: 60px;
    height: auto;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 100px;
    background: #fff;
    border: 1px solid;
}
.status-chip--in-table.status-chip--answer-wait { background:#fff; color:#FF7700; border-color:rgba(255, 119, 0, 0.50); }
.status-chip--in-table.status-chip--answer-done { background:#fff; color:#F52A02; border-color:rgba(245, 42, 2, 0.50); }
.status-chip--in-table.status-chip--answer-ing  { background:#fff; color:#089253; border-color:rgba(8, 146, 83, 0.50); }
.status-chip--in-table.status-chip--inquiry-end { background:#fff; color:#4FC0FC; border-color:rgba(79, 192, 252, 0.50); }

.learn-status-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.learn-status-cell__sub { font-size: 11px; color: var(--color-red); font-weight: 500; }

/* 상품명 셀 */
.product-name-cell { display: flex; align-items: center; gap: 5px; }
.star-rating { display:inline-flex; align-items:center; gap:1px; }
.star-rating__score { font-size:12px; color:var(--text-secondary); margin-left:3px; }
.product-name-cell__text { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }

/* ==================== Review Summary (상품후기 평점 분포) ==================== */
.review-summary { display:flex; align-items:center; gap:48px; padding:30px 40px; background:#fff; border:1px solid #EFEFEF; border-radius:8px; }
.review-summary__overall { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:140px; flex-shrink:0; }
.review-summary__score { font-size:50px; font-weight:700; color:#222; line-height:1.1; }
.review-summary__stars { display:inline-flex; gap:2px; }
.review-summary__total { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.review-summary__total strong { color:var(--text-primary); font-weight:700; }
.review-summary__bars { flex:1; display:flex; flex-direction:column; gap:10px; }
.review-rating-row { display:flex; align-items:center; gap:16px; }
.review-rating-row__label { width:30px; font-size:13px; color:var(--text-primary); flex-shrink:0; }
.review-rating-row__bar { flex:1; height:6px; background:#F0F0F0; border-radius:100px; overflow:hidden; }
.review-rating-row__fill { display:block; height:100%; background:linear-gradient(90deg, #1E90FF 0%, #7B4FE0 100%); border-radius:100px; }
.review-rating-row__count { width:36px; font-size:13px; color:#A0A0A0; flex-shrink:0; }
.review-rating-row__count strong { color:#222; font-weight:400; }

/* Review item (comment-item 확장 — 큰 아바타 + 별점 행) */
.review-item__user-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.review-item__name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.review-item__rating { display:inline-flex; align-items:center; gap:2px; }
.review-item__rating-score { margin-left:4px; font-size:13px; font-weight:600; color:var(--text-primary); }
/* 큰 아바타(40px)일 때 본문/토글은 아바타 좌측 정렬, 답글 목록만 48px 인덴트 */
.comment-item--lg .comment-item__body { padding-left:0; }
.comment-item--lg .comment-replies-toggle { padding-left:0; margin-left:0; }
.comment-item--lg .review-replies { padding-left:48px; margin-left:0; }
.comment-item--lg .comment-item__reply-form { margin-left:48px; }
.comment-item--lg .comment-replies-pager { margin-left:48px; }
/* 답글 더보기 토글 — 추가 답글 그룹 */
.review-replies--more { display:none; padding-left:48px; margin:0; }
.review-replies--more.is-open { display:block; }
.comment-replies-pager__btn.is-open img { transform:rotate(180deg); }
/* 대댓글 수정 영역 — 댓글(후기) 기준 24px 들여쓰기 */
.comment-item--reply-edit { margin-left:24px; }
.review-replies { list-style:none; padding:0; margin:12px 0 0; display:none; }
.review-replies.is-open { display:block; }
.review-reply { padding:18px 0; border-bottom:1px solid #EFEFEF; font-size:14px; line-height:1.6; color:var(--text-primary); }
.review-reply:last-child { border-bottom:none; padding-bottom:0; }
.review-reply:first-child { padding-top:0; }
.review-reply__author { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.review-reply__body { margin:0; }
/* 답글 열렸을 때 chevron 회전 */
.comment-replies-toggle.is-open img { transform:rotate(180deg); }
/* 후기/댓글 사이 구분선 — 패널 안에 여러 아이템이 있을 때만 opt-in */
.comment-list--divided .comment-item { border-bottom:1px solid #EFEFEF; padding:24px 0; }
.comment-list--divided .comment-item:first-child { padding-top:0; }
.comment-list--divided .comment-item:last-child { border-bottom:none; padding-bottom:0; }
/* 후기/댓글 박스형 — 각 아이템에 테두리(6px 라운딩) */
.comment-list--boxed { display:flex; flex-direction:column; gap:16px; }
.comment-list--boxed .comment-item { border:1px solid #EFEFEF; border-radius:6px; padding:24px 30px; }
/* 패널 헤더 밑줄 — opt-in */
.list-panel__header--divider { border-bottom:1px solid #EFEFEF; padding-bottom:6px; margin-bottom:20px; }

/* ==================== Utility ==================== */
.text-primary   { color: var(--color-primary); }
.text-purple    { color: var(--color-purple); }
.text-red       { color: var(--color-red); }
.text-green     { color: var(--color-green); }
.text-gray      { color: var(--text-tertiary); }
.text-bold      { font-weight: 700; }
.text-right     { text-align: right; }
.text-center    { text-align: center; }

/* 테이블 셀 안의 카테고리/유형 링크 (color-blue) */
.category-link { color: var(--color-blue); text-decoration: none; }
.category-link:hover { text-decoration: underline; }

.d-flex         { display: flex; }
.align-center   { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8          { gap: 8px; }
.gap-12         { gap: 12px; }
.gap-16         { gap: 16px; }

/* ==================== Auth ==================== */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
    background-color:var(--bg-white);
}
.auth-wrap--sm { padding-top: 40px; }

.auth-container {
    width: 440px;
    height:auto;
    padding: 44px 40px 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius:12px;    
}

.auth-logo {
    text-align: center;
    font-size: 24px;
    padding:30px 0;
    font-weight: 900;
    letter-spacing: -0.24px;
    background: linear-gradient(107deg, #667EEA 0%, #764BA2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.auth-logo img { display:block; margin:0 auto; }

.auth-body {
    display: flex;
    flex-direction: column;
    gap:10px;
}
.auth-body--notice { align-items:center; text-align:center; padding:90px 0;margin-bottom:120px; gap:14px; }

.auth-tabs {
    display: flex;
    gap:6px;
}

.auth-tab {
    flex: 1;
    height:48px;
    margin-bottom:4px;
    border-radius:6px;
    border: 1px solid #E5E5E5;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    font-weight:600;
    color: #CCCCCC;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.02em;
    transition: all 0.15s;
}

.auth-tab-radio {
    display: none;
}
.auth-tab-radio:checked + .auth-tab {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #FFFFFF;
}

.auth-field-group {
    display: flex;
    flex-direction: column;
    gap:6px;
    margin-top:10px;
}

.auth-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.auth-field {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #F8F9FA;
    border-radius: 6px;
    padding: 0 15px;
    height: 48px;
    background: #F9FAFB;
    transition: border-color 0.15s, background 0.15s;
}

.auth-field:focus-within {
    border-color: var(--color-primary-light);
    background: #FFFFFF;
}

.auth-field__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-secondary);
    letter-spacing: -0.02em;
    transition: color 0.15s;
}

.auth-field__input:focus { color: #222222; }
.auth-field__input::placeholder { color: var(--text-placeholder); }
.auth-field__input:disabled { color: var(--text-disabled); cursor: not-allowed; }
.auth-field__input[type="password"]::-ms-reveal,
.auth-field__input[type="password"]::-ms-clear { display: none; }
.auth-field__input[type="password"]::-webkit-credentials-auto-fill-button { display: none; }

.auth-field__eye {
    display: flex;
    align-items: center;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.auth-field:focus-within .auth-field__eye { opacity: 1; filter: brightness(0) saturate(0) invert(31%); }
.auth-field__eye:hover { opacity: 1; }

.auth-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-check {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: url('../src/images/check-unselected.svg') no-repeat center / contain;
    cursor: pointer;
    flex-shrink: 0;
}
.auth-check:checked { background-image: url('../src/images/check-selected.svg'); }

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}



.auth-divider {
    border: none;
    border-top: 1px solid #EAEAEA;
    margin: 0;
}

.auth-divider-bold {
    border: none;
    border-top: 2px solid #424242;
    margin: 0;
}
.auth-divider--my10 { margin-top: 10px; margin-bottom: 10px; }


.auth-help {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: -0.02em;
}
.auth-help a {
    margin-left: 8px;
    color: var(--color-blue);
    font-weight: 700;
}

.auth-help--back { display: flex; align-items: center; justify-content: center; gap: 4px; }
.auth-help--back a { margin-left: 0; }

/* --- Signup Extensions --- */
.auth-title { font-size: 24px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.04em; }
.auth-forgot-header { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.auth-forgot-desc { font-size: 13px; color: var(--text-secondary); text-align: center; line-height: 1.5; }
.auth-reset-intro { display: flex; flex-direction: column; gap: 10px; }
.auth-reset-intro__title { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.45; letter-spacing: -0.03em; }
.auth-reset-intro__desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.auth-required { color: var(--color-red); }
.auth-row { display: flex; gap:6px; }
.auth-row .auth-field-group { flex: 1; min-width: 0; }
.auth-field-hint  { font-size: 12px;color: #A0A0A0; }
.auth-field-error { font-size: 12px; color: var(--color-accent); }

.auth-field--error { border-color: var(--color-accent) !important; background: #FFFFFF; }
.auth-field-with-btn { display: flex; gap: 8px; }
.auth-field-with-btn .auth-field { flex: 1; min-width: 0; }
.auth-inline-btn {
    height: 48px;
    padding: 0 16px;
    border:1px solid #A0A0A0;
    border-radius: 8px;
    background: var(--bg-white);
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.auth-inline-btn--confirm { padding: 0 24px; }
.auth-strength { display: flex; flex-direction: column; gap: 4px; }
.auth-strength__bars { display: flex; gap: 4px; margin: 10px 0 8px 0; }
.auth-strength__bar { flex: 1; height: 4px; border-radius: 2px; background: #E5E5E5; }
.auth-strength__bar--on   { background: var(--color-primary-light); }
.auth-strength__bar--weak { background: var(--color-accent); }
.auth-strength__label { font-size: 11px; color: var(--text-tertiary); text-align: right; }
.auth-strength__label--weak { color: var(--color-accent); }
.auth-terms { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #222;font-weight: 600;; cursor: pointer; }

/* ==================== Common Modal ====================*/
.c-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.c-modal-overlay.is-hidden { display: none; }
.c-modal { width: 360px; background: #fff; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; gap: 30px; }
.c-modal__content { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.c-modal__icon-wrap { width: 64px; height: 64px; background: rgba(2, 124, 250, 0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.c-modal__icon-wrap img { border-radius: 50%; width: 36px; height: 36px; object-fit: cover; }
.c-modal__icon-wrap--error { background: rgba(255, 0, 0, 0.05); }
.c-modal__icon-wrap--error img { border-radius: 0; width: auto; height: auto; object-fit: initial; }
.c-modal__icon-wrap--notice { background: rgba(33, 182, 132, 0.1); }
.c-modal__icon-wrap--notice img { border-radius: 0; width: 36px; height: 36px; object-fit: initial; }
.c-modal__title { font-size: 20px; font-weight: 700;line-height: 1.4; color: var(--text-primary); letter-spacing: -0.02em; }
.c-modal__desc { width: 100%; text-align: left; font-size: 16px; color: var(--text-dark); line-height: 1.5;font-weight:500; }
.c-modal__desc strong { color: var(--text-primary); font-weight: 500; }
.c-modal__desc-sub { width: 100%; text-align: left;font-size: 13px; color: #424242; line-height: 1.5; }
.c-modal__footer { display: flex; justify-content: center; gap: 6px; }
.c-modal__footer--split .btn { flex: 1; min-width: 0; }
/* 단일 버튼 푸터(--split 아님): 버튼 풀폭 자동 적용 */
.c-modal__footer:not(.c-modal__footer--split) > .btn { width: 100%; }
.c-modal__footer .auth-submit { margin: 0; }
.c-modal--gap20 { gap: 20px; }

/* 수료여부 변경 모달 */
.completion-modal { width: 480px; padding: 0; gap: 0; }
.completion-modal--lg { width: 600px; }
.completion-modal--xl { width: 800px; }
.completion-modal--xxl { width: 1200px; }
.completion-modal.completion-modal--lg .c-modal__content,
.completion-modal.completion-modal--xl .c-modal__content,
.completion-modal.completion-modal--xxl .c-modal__content { padding-bottom: 20px; }
.completion-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 18px 0 30px; border-bottom: 1px solid #EAEAEA; }
.completion-modal__heading { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary); }
/* 모달 헤더 텍스트 변형 — 리스트형/드릴인형 등 보조 모달용 */
.completion-modal__heading--sm { font-size: 14px; font-weight: 600; }
.completion-modal__heading--md { font-size: 16px; font-weight: 600; }
.completion-modal__close { width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; line-height: 0; flex-shrink: 0; }
.completion-modal .c-modal__content { padding: 24px 30px; gap: 16px; align-items: stretch; text-align: left; }
.completion-modal .c-modal__content.c-modal__content--pb10 { padding-bottom: 10px; margin-bottom: 10px; }
/* 푸터 버튼 없는 모달 body — 검색결과/드릴인 모달 같이 헤더+리스트만 있을 때 */
.completion-modal .c-modal__content.completion-modal__body--no-footer { padding-bottom: 30px; }
/* 알럿 형식 480 모달 body — 아이콘 중앙 정렬 + 텍스트는 좌측 유지 */
.completion-modal .c-modal__content.completion-modal__body--alert { align-items: center; padding-top: 30px; gap: 8px; }
.completion-modal .c-modal__footer { padding: 0 30px 24px; }

/* 수료증 템플릿 유형 미리보기 모달 (max 1280, min 600) */
.template-type-modal { width: calc(100vw - 80px); min-width: 600px; max-width: 1280px; }
.template-type-modal__body { padding: 24px 30px 0; display: flex; flex-direction: column; gap: 8px; }
.template-type-modal__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--text-primary); text-align: left; }
.template-type-modal__img { width: 100%; height: auto; display: block; }
.template-type-modal__footer { padding: 24px 30px; }

/* 메모 모달 (간단 메모) */
.memo-modal__profile { background:#272A31; padding:24px 30px; display:flex; align-items:flex-start; gap:16px; }
.memo-modal__profile-avatar { width:88px; height:88px; border-radius:50%; border:2px solid var(--color-primary); background-color:#D3D3D3; background-repeat:no-repeat; background-position:center; background-size:cover; flex-shrink:0; }
.memo-modal__profile-avatar.learner { background-image:url('../src/images/avatar-user.png'); }
.memo-modal__profile-body { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.memo-modal__profile-name { font-size:20px; font-weight:700; color:#fff; letter-spacing:-0.02em;margin-bottom:8px; }
.memo-modal__profile-meta { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; color:#808080; }
.memo-modal__profile-meta-value { color:#fff; font-weight:400; margin-left:4px; }
.memo-modal__section { padding:20px 30px 0; }
.memo-modal__section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.memo-modal__section-header:has(.c-dropdown--modal) { margin-bottom:0; }
.memo-modal__section-title { font-size:15px; font-weight:700; color:var(--text-primary); }
.memo-modal__footer { padding:20px 30px 30px; }

/* ==================== Inbox (알림센터) ==================== */
.inbox-section { background:#fff; border-radius:12px; padding:24px 30px; box-shadow:0 2px 4px rgba(0,0,0,0.08); }
.inbox-list { display:flex; flex-direction:column; }
.inbox-item { display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid var(--border-color); cursor:pointer; transition:background 0.15s; text-decoration:none; }
.inbox-item:first-child { border-top:none; }
.inbox-item:hover { background:#FAFAFA; }
.inbox-item__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;padding-left:30px; }
.inbox-item__title { font-size:15px; font-weight:600; color:var(--text-dark); letter-spacing:-0.02em; }
.inbox-item__title--icon { display:inline-flex; align-items:center; gap:4px; }
.inbox-item__desc { font-size:13px; color:var(--text-secondary); line-height:1.5; }
.inbox-item__time { font-size:12px; color:var(--text-tertiary); margin-top:4px; }
.inbox-item__arrow { display:inline-block; width:32px; height:32px; background-color:#222; -webkit-mask:url('../src/images/chevron-down.svg') no-repeat center / contain; mask:url('../src/images/chevron-down.svg') no-repeat center / contain; transform:rotate(-90deg); flex-shrink:0; margin-right:10px; }
.inbox-item--unread { background:#FFFBE9; }
.inbox-item--unread-important { background:#FFFBE9; }
.inbox-item--unread-basic { background:#EEF5FF; }
.inbox-item--unread-important:hover,
.inbox-item--unread-basic:hover { background:#FAFAFA; }
.inbox-item__more { display:inline; padding:0; background:none; border:none; cursor:pointer; font-family:inherit; font-size:13px; color:var(--color-blue); font-weight:500; white-space:nowrap; }
.inbox-item__desc-text { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.inbox-item__desc.expanded .inbox-item__desc-text { display:block; -webkit-line-clamp:unset; line-clamp:unset; overflow:visible; }
.inbox-mark-read { display:inline-flex; align-items:center; gap:6px; padding:0; background:none; border:none; cursor:pointer; font-size:13px; color:var(--text-secondary); font-family:inherit; }
.inbox-mark-read__close { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:14px; color:var(--text-tertiary); line-height:1; }
.inbox-more { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:0; margin-top:5px; background:none; border:none; cursor:pointer; font-size:14px; color:var(--text-secondary); font-family:inherit; }
.inbox-more__icon { display:inline-block; width:24px; height:24px; background-color:#222; -webkit-mask:url('../src/images/chevron-down.svg') no-repeat center / contain; mask:url('../src/images/chevron-down.svg') no-repeat center / contain; flex-shrink:0; }
.completion-section { display: flex; flex-direction: column; gap: 10px; }
.completion-section__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.completion-info { width: 100%; border-collapse: separate; border-spacing: 0; background: #F7F8FA; border-radius: 8px; overflow: hidden;border: 1px solid #EAEAEA; }
.completion-info th { width: 100px; padding: 0 20px; text-align: left; font-size: 13px; font-weight: 500; color:#808080; vertical-align: middle; border-bottom: 1px solid #EAEAEA; }
.completion-info td { padding: 12px 16px; font-size: 14px; color: var(--text-dark); vertical-align: middle; border-bottom: 1px solid #EAEAEA; }
.completion-info tr:last-child th, .completion-info tr:last-child td { border-bottom: none; }
.completion-info .progress-bar { background: #FFFFFF; }
.completion-info .product-tag { margin-right: 8px; }
.completion-radio-box { display: flex; align-items: center; gap: 24px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 8px; }
.completion-textarea { position: relative; }
.completion-textarea__input { width: 100%; min-height: 120px; padding: 16px 20px 32px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; color: var(--text-primary); font-family: inherit; resize: vertical; outline: none; box-sizing: border-box; line-height: 1.5; }
.completion-textarea__input:focus { border-color: var(--color-primary); }
.completion-textarea__input::placeholder { color: var(--text-placeholder); }
.completion-textarea__input:disabled { color: var(--text-disabled); background: #F2F2F2; cursor: not-allowed; }
.completion-textarea__count { position: absolute; right: 16px; bottom: 12px; font-size: 12px; color: var(--text-secondary); pointer-events: none; font-weight: 400; }

/* 공통: 텍스트에어리어 + 글자수 카운터 */
.textarea-counter { position: relative; }
.textarea-counter > textarea { padding-bottom: 32px; }
.textarea-counter__count { position: absolute; right: 16px; bottom: 12px; font-size: 12px; font-weight: 400; color: var(--text-secondary); pointer-events: none; }

/* 쿠폰 사용 통계 바 (Figma 디자인시안 기반) */
.coupon-usage { display:flex; flex-direction:column; gap:20px; margin:30px 0; }
.coupon-usage__row { display:flex; align-items:center; gap:10px; }
.coupon-usage__label { flex-shrink:0; font-size:13px; color:#222; letter-spacing:-0.02em; }
.coupon-usage__bar { flex:1; height:10px; background:#EFEFEF; border-radius:100px; overflow:hidden; }
.coupon-usage__fill { height:100%; border-radius:100px; }
.coupon-usage__fill--blue { background:#4FC0FC; }
.coupon-usage__fill--purple { background:#6756ED; }
.coupon-usage__text { flex-shrink:0; font-size:13px; color:#202224; letter-spacing:-0.02em; }
.coupon-usage__sub { color:#BDBDBD; }

/* 달력 (Customer Front 디자인시안 기반) */
.c-calendar { width:300px;height:300px; padding:36px 28px; background:#fff;border-radius:20px; box-shadow:0 2px 8px rgba(0,0,0,0.05); font-family:var(--font-base); box-sizing:border-box; }
.c-calendar__header { display:flex; align-items:center; justify-content:space-between; padding:0 8px 16px; }
.c-calendar__nav { width:24px; height:24px; padding:0; border:none; background:none; cursor:pointer; color:#222; font-size:18px; line-height:1; }
.c-calendar__title { font-size:14px; font-weight:600; color:#222; letter-spacing:-0.02em; }
.c-calendar__weekdays { display:grid; grid-template-columns:repeat(7, 1fr); padding:4px 0 8px; font-size:12px; font-weight:500; color:#4FC0FC; text-align:center; }
.c-calendar__grid { display:grid; grid-template-columns:repeat(7, 1fr); row-gap:1px; }
.c-calendar__day { display:flex; align-items:center; justify-content:center; width: 28px; height:28px; margin:0 auto; padding:0; border:1.5px solid transparent; background:transparent; border-radius:50%; font-size:13px; color:#222; font-family:inherit; cursor:pointer; }
.c-calendar__day:hover { background:#F4F5F7; }
.c-calendar__day--muted { color:#BDBDBD; }
.c-calendar__day--today { background:#4FC0FC;color:#fff; }
.c-calendar__day--today:hover { background:#4FC0FC; }
.c-calendar__day--selected { border-color:#4FC0FC; }
.c-calendar__day--selected:hover { background:transparent; }

.c-calendar-legend { display:flex; flex-direction:column; gap:10px; font-size:13px; color:#222; }
.c-calendar-legend__item { display:flex; align-items:center; gap:8px; }
.c-calendar-legend__dot { width:14px; height:14px; border-radius:50%; box-sizing:border-box; flex-shrink:0; }
.c-calendar-legend__dot--filled { background:#4FC0FC; }
.c-calendar-legend__dot--outline { border:1.5px solid #4FC0FC; }

/* 달력 팝업 모드 (날짜 입력 필드 클릭 시 표시) */
.c-calendar--popup { display:none; position:absolute; z-index:1000; }
.c-calendar--popup.is-open { display:block; }

/* 강사 초대 모달 */
.invitation-modal__hint { margin: 0; padding-bottom: 8px; font-size: 12px; color: #A0A0A0; }
.email-tag-input { padding: 16px; border: 1px solid var(--border-color); border-radius: 6px; background: #FAFAFA; }
.email-tag-input__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.email-tag-input__tags:empty { margin-bottom: 0; }
.email-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 8px 12px 8px 18px; border: 1px solid var(--color-primary); border-radius: 100px; background: #fff; font-size: 13px; color: var(--text-dark); }
.email-tag__remove { width: 14px; height: 14px; padding: 0; border: none; background: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; }
.email-tag__remove:hover { opacity: 0.7; }
.email-tag-input__field { width: 100%; height: 24px; padding: 0; border: none; background: transparent; font-size: 13px; color: var(--text-primary); outline: none; font-family: inherit; }
.email-tag-input__field::placeholder { color: var(--text-placeholder); }
.email-tag-input--error { border-color: #F22; }
.email-tag--error { border-color: #F22; color: #222; }
.email-tag--error .email-tag__remove { color: #F22; }
.invitation-modal__error { margin: 0; padding-bottom: 8px; font-size: 12px; color: #F22; }

/* 22px 아바타 (인라인 사용) */
.c-avatar22 { display:inline-block; width:24px; height:24px; border-radius:50%; background-color:#D3D3D3; background-repeat:no-repeat; background-position:center; background-size:cover; flex-shrink:0; vertical-align:middle; overflow:hidden; }
.c-avatar22.basic       { background-image:url('../src/images/avatar-basic.svg'); background-size:24px; background-position:bottom; }
.c-avatar22.instructor,
.c-avatar22.teacher     { background-image:url('../src/images/avatar-teacher-sub.png'); }
.c-avatar22.manager     { background-image:url('../src/images/avatar-manager.png'); }
.c-avatar22.sub-teacher { background-image:url('../src/images/avatar-teacher-sub.png'); }
.c-avatar22.learner     { background-image:url('../src/images/avatar-user.png'); }
.c-avatar22 img { width:100%; height:100%; object-fit:cover; }

.c-avatar24 { display:inline-block; width:24px; height:24px; border-radius:50%; background-color:#D3D3D3; background-repeat:no-repeat; background-position:center; background-size:cover; flex-shrink:0; vertical-align:middle; overflow:hidden; }
.c-avatar24.basic       { background-image:url('../src/images/avatar-basic.svg'); background-size:24px; background-position:bottom; }
.c-avatar24.instructor,
.c-avatar24.teacher     { background-image:url('../src/images/avatar-teacher-sub.png'); }
.c-avatar24.manager     { background-image:url('../src/images/avatar-manager.png'); }
.c-avatar24.sub-teacher { background-image:url('../src/images/avatar-teacher-sub.png'); }
.c-avatar24.learner     { background-image:url('../src/images/avatar-user.png'); }
.c-avatar24 img { width:100%; height:100%; object-fit:cover; }

/* 사용자 태그 (아바타 + 역할뱃지 + 이름 + 닫기) */
.user-tag { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px 0 4px; border:1px solid var(--border-color); border-radius:100px; background:#fff; font-size:13px; color:var(--text-primary); }
.user-tag--plain { border:none; padding:0 8px 0 0; background:transparent; }
.user-tag__remove { width:14px; height:14px; padding:0; border:none; background:none; cursor:pointer; font-size:14px; line-height:1; color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; margin-left:4px; }
.user-tag__remove:hover { color:var(--color-primary); }

/* + 강사 추가 버튼 (점선) */
.add-tutor-btn { display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 12px; border:1px solid var(--border-color); border-radius:6px; background:#fff; font-size:13px; color:var(--text-secondary); cursor:pointer; }
.add-tutor-btn:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* 권한 설정 - 강사 행 */
.perm-tutor-row { display:flex; gap:16px; align-items:flex-start; }
.perm-tutor-row__label { flex-shrink:0; width:48px; font-size:14px; color:var(--text-primary); padding-top:8px; }
.perm-tutor-row__tags { display:flex; flex-wrap:wrap; gap:8px; flex:1; }

/* 권한 트리 */
.perm-tree { padding:16px; border:1px solid var(--border-color); border-radius:8px; background:#FAFAFA; }
.perm-tree__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--text-primary); }
.perm-tree__sub { list-style:none; margin:10px 0 0; padding-left:24px; display:flex; flex-direction:column; gap:10px; }
.c-checkbox { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.c-checkbox--disabled { color:var(--text-disabled); cursor:not-allowed; }

/* 강사 검색 */
.tutor-search { display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border:1px solid var(--border-color); border-radius:6px; background:#fff; }
.tutor-search__input { flex:1; height:100%; border:none; outline:none; background:transparent; font-size:13px; color:var(--text-primary); font-family:inherit; }
.tutor-search__input::placeholder { color:var(--text-placeholder); }
.tutor-search__input:disabled { color: var(--text-disabled); cursor: not-allowed; }

/* 검색 자동완성 패널 (c-dropdown 패널 스타일 재활용) */
.tutor-search-wrap { position:relative; }
.tutor-search-wrap .c-dropdown__panel { top:calc(100% + 4px); left:0; right:0; border-top:1px solid #DDDDDD; border-radius:8px; max-height:240px; overflow-y:auto; }
.tutor-search-wrap:focus-within .c-dropdown__panel { display:block; }

/* 강사 목록 */
.tutor-pick-list__title { margin:0 0 8px; font-size:14px; font-weight:700; color:var(--text-primary); }
.tutor-pick-list__scroll { max-height:336px; overflow-y:auto; }
.tutor-pick-list__scroll .tutor-pick-table thead th { position:sticky; top:0; background:#fff; z-index:1; }
/* admin-table 변형: 강사 선택 모달용 (소형 + 알약 행) */
.tutor-pick-table { min-width:0; }
.tutor-pick-table th { height:42px; border-bottom-color:#AAA; font-size:13px; font-weight:400; color:var(--text-secondary); }
.tutor-pick-table td { height:42px; padding:7px 0; border-bottom:1px solid #EAEAEA; font-size:13px; }
.tutor-pick-table td:first-child { text-align:left; }
.tutor-pick-table td:nth-child(2) { text-align:center; }
.tutor-pick-info { display:inline-flex; align-items:center; gap:8px; padding:4px 14px 4px 6px; background:#fff; border:1px solid var(--border-color); border-radius:100px; }

/* 검색창 포커스 시 드롭다운 추천 항목 (아바타 + 이름 + 이메일 + 추가 버튼) */
.tutor-suggest-item { display:flex; align-items:center; gap:12px; padding:8px 14px; cursor:pointer; border:none; background:transparent; width:100%; text-align:left; font-family:inherit; }
.tutor-suggest-item:hover { background:#F4F8FF; }
.tutor-suggest-item--selected { background:#EAF3FF; }
.tutor-suggest-item__name { font-size:13px; color:var(--text-primary); font-weight:500; min-width:60px; flex-shrink:0; }
.tutor-suggest-item__email { flex:1; font-size:13px; color:var(--text-secondary); }
.tutor-pick-info__name { color:var(--text-primary); font-weight:500; margin-left:2px; }
.tutor-pick-info__email { color:var(--text-secondary); font-size:12px; }
.tutor-pick-add { display:inline-flex; align-items:center; gap:6px; padding:0; border:none; background:none; cursor:pointer; font-size:13px; color:var(--text-secondary); }
.tutor-pick-add__icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#E5E7EB; color:#fff; font-size:11px; font-weight:600; line-height:1; }
.tutor-pick-add--selected { color:var(--text-primary); }
.tutor-pick-add--selected .tutor-pick-add__icon { background:var(--color-primary); color:#fff; }

/* 선택된 대상 */
.tutor-selected__title { margin:0 0 12px; font-size:14px; font-weight:700; color:var(--text-primary); }
.tutor-selected__tags { display:flex; flex-wrap:wrap; gap:8px; }

/* 모달용 대시보드 (3개 카드 가로 배치, 라벨-숫자 한 줄) */
.modal-dashboard { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
.modal-dashboard__item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:#FFF;border:1px solid #DEDFE0; border-radius:8px; }
.modal-dashboard__label { font-size:13px; color:var(--color-textgray); }
.modal-dashboard__value { font-size:24px; font-weight:700; color:var(--text-primary); letter-spacing:-0.02em; }

/* 모달용 필터 (드롭다운 영역, 우측 정렬) */
.modal-filter { display:flex; align-items:center; justify-content:flex-end; gap:8px; }

/* 모달 테이블 내 사용자 셀 */
.modal-table__user { display:inline-flex; align-items:center; gap:8px; }

/* 수강 상태 칩 (모달 테이블용) */
.status-pill { display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 14px; border-radius:100px; font-size:12px; font-weight:500; white-space:nowrap; }
.status-pill--done     { background:#FFE4E4; color:#F22; }
.status-pill--fail     { background:#FFF4BC; color:#FF7700; }
.status-pill--ongoing  { background:#E2FFF3; color:#089253; }
.status-pill--canceled { background:#F0ECFF; color:#6756ED; }
.status-pill--expired  { background:#ECECEC; color:#666; }

/* 모달용 페이지네이션 */
.modal-pagination { display:flex; align-items:center; justify-content:center; gap:4px; }
.modal-pagination .pagination__btn { width:32px; height:32px; border:1px solid var(--border-color); background:#fff; border-radius:4px; font-size:13px; color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.modal-pagination .pagination__btn:hover:not(:disabled) { border-color:var(--btn-dark-0); }
.modal-pagination .pagination__btn.active { border-color:var(--btn-dark-0); }
.modal-pagination .pagination__btn:disabled { opacity:0.4; cursor:not-allowed; }

/* 폴더 이동 모달 */
.folder-move-modal { width: 600px; }
.folder-move-modal .c-modal__footer { padding: 0 30px 30px; }
.folder-move__hint { margin: 0; font-size: 13px; color:#A0A0A0; }
.folder-move__list { padding: 20px; border: 1px solid var(--border-color); border-radius: 8px; background: #FAFAFA; max-height: 400px; overflow-y: auto; }
.folder-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.folder-tree__sub { list-style: none; margin: 12px 0 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }

/* AI 튜터 생성 완료 모달 */
.ai-result-text { display: flex; flex-direction: column; gap: 6px; }
.ai-result-text__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.ai-result-text__desc { margin: 0; font-size: 13px; color:#424242; line-height: 1.5; }
.ai-result-text__hint { margin: 4px 0 0; font-size: 12px; color: var(--color-textgray); line-height: 1.5; }

.credit-summary { padding: 20px; border: 1px solid var(--border-color); border-radius: 8px; background: #FAFAFA; display: flex; flex-direction: column; gap: 12px; }
.credit-summary__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); font-size: 20px; font-weight: 700;letter-spacing: -1px; color: var(--text-primary); }
.credit-summary__label { font-size:14px;font-weight:500; }
.credit-summary__amount { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.credit-summary__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.credit-summary__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right:20px; font-size: 13px; color: #A0A0A0; }
.credit-summary__sub-label { color: #A0A0A0; }
.credit-summary__sub-value { color: var(--text-primary);font-weight: 600; }

.credit-balance { display: flex; align-items: center; gap: 24px; padding: 4px 4px; }
.credit-balance__label { font-size: 14px; color: var(--text-dark); }
.credit-balance__amount { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; letter-spacing: -1px;color: var(--text-primary); }

.c-modal__logo { text-align: center; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; padding:30px; background: linear-gradient(107deg, #667EEA 0%, #764BA2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.c-modal__content hr { width: 100%; }
.c-modal__info-list { width: 100%; background: #fff; border: 1px solid #E0E0E0; border-radius: 8px; padding: 14px 16px 14px 32px; display: flex; flex-direction: column; gap: 4px; list-style: disc; text-align: left; }
.c-modal__info-list li { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.c-modal__info-list li strong { color: var(--text-primary); font-weight: 600; }
.c-modal__timer { width: 100%; background: #EEF5FF; border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.c-modal__timer-label { font-size: 14px; color: var(--color-info); }
.c-modal__timer-value { font-size: 16px; font-weight: 700; color: var(--color-primary); }

/* ==================== Setting Panel ==================== */
.setting-panel { background-color: #fff; padding: 0 30px 30px; border-radius: 6px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); overflow: hidden; }
.setting-panel__title { font-size: 16px; font-weight: 700; color: #222; padding: 18px 20px;  background: #fff; }
.setting-table { width: calc(100% - 60px); border-collapse: collapse; border-top: 2px solid #222;border-bottom: 1px solid #EFEFEF; margin: 0 30px; }
.setting-table th { width: 160px; padding: 12px 30px; background: #FAFAFA; font-size: 14px; font-weight: 500; color: var(--color-textgray); text-align: left; border-bottom: 1px solid #EFEFEF; vertical-align: middle; white-space: nowrap; }
.setting-table td { padding: 12px 16px; background: #fff; font-size: 14px; color: #222; border-bottom: 1px solid #EFEFEF; }
.setting-table tr:last-child th,
.setting-table tr:last-child td { border-bottom: none; }
.setting-table__text { font-size: 14px; color: #222; }
.setting-table__desc { font-size: 12px; color:#888; margin-top: 8px; display: block; }
.setting-table__input { width: 100%; height: 40px; padding: 0 15px; border: 1px solid #DFE0E3; border-radius: 4px; font-size: 14px; font-family: inherit; color: #222; outline: none; box-sizing: border-box; }
.setting-table__input-count-wrap { display: flex; align-items: center; background:#fff; border: 1px solid #DFE0E3; border-radius: 4px; overflow: hidden; }
.setting-table__input-count-wrap .setting-table__input,
.setting-table__input-count-wrap .detail-form__input { border: none; border-radius: 0; flex: 1; }
.setting-table__input-count-wrap .setting-table__input:focus,
.setting-table__input-count-wrap .detail-form__input:focus { box-shadow: none; }
.setting-table__count { font-size: 12px; color: var(--text-tertiary); padding: 0 12px; white-space: nowrap; flex-shrink: 0; }
.setting-table__required { color: var(--color-red); margin-left: 3px; }
.setting-table__input:focus { border-color: var(--color-primary); }
.setting-table__input::placeholder { color: var(--text-placeholder); }
.setting-table__input:disabled { color: var(--text-disabled); background: #F2F2F2; cursor: not-allowed; }
.setting-table__textarea { width: 100%; padding: 10px 14px; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 14px; line-height: 1.5; font-family: inherit; color: #222; resize: none; outline: none; height: 100px; box-sizing: border-box; }
.setting-table__textarea:focus { border-color: var(--color-primary); }
.setting-table__textarea::placeholder { color: var(--text-placeholder); }
.setting-table__textarea-wrap { position: relative; }
.setting-table__textarea-wrap .setting-table__textarea { padding-bottom: 28px; }
.setting-table__counter { position: absolute; bottom: 10px; right: 12px; font-size: 12px; color: var(--text-tertiary); }
.setting-table__file-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-blue); text-decoration: underline; }
.setting-check-row { display: flex; align-items: center; gap: 24px; }
.setting-check-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #333; cursor: pointer; }
.setting-check-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
/* setting-check-label 블록 변형 — 단독 행으로 사용, 인라인 설명 포함 가능 */
.setting-check-label--block { display: flex; margin-top: 12px; }
.setting-check-label__desc { font-size: 12px; font-weight: 400; color: var(--text-secondary); line-height: 1; }

/* 설정 페이지 전용 체크박스 */
.c-check-setting { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border: 1.5px solid #EAEAEA; border-radius: 3px; background: #fff; cursor: pointer; flex-shrink: 0; }
.c-check-setting:checked { background-color: #4FC0FC; border-color: #4FC0FC; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M1 3.5L4 6.5L10 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.c-check-blue { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border: 1.5px solid #EAEAEA; border-radius: 3px; background: #fff; cursor: pointer; flex-shrink: 0; }
.c-check-blue:checked { background-color: #1FB6FF; border-color: #1FB6FF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M1 3.5L4 6.5L10 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.setting-table__url-row { display: flex; align-items: center; gap: 10px; }

/* --- Toggle Switch --- */
.c-toggle { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; }
.c-toggle input { display: none; }
.c-toggle__slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #CCC; border-radius: 24px; cursor: pointer; transition: 0.2s; }
.c-toggle__slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.c-toggle input:checked + .c-toggle__slider { background: var(--color-primary-light); }
.c-toggle input:checked + .c-toggle__slider::before { transform: translateX(22px); }

/* --- Labeled Toggle (텍스트 라벨이 들어간 토글) --- */
.c-toggle-text { position: relative; display: inline-block; cursor: pointer; }
.c-toggle-text input { display: none; }
.c-toggle-text__track { display: inline-flex; align-items: center; justify-content: flex-start; width:76px; height: 32px; padding: 3px; background: #CCC; border-radius: 28px; transition: 0.2s; box-sizing: border-box; }
.c-toggle-text__pill { height: 26px; min-width: 48px; padding: 0 10px; background: #fff; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #999; transition: color 0.2s; }
.c-toggle-text__pill--off { display: none; }
.c-toggle-text input:checked + .c-toggle-text__track { background: var(--color-primary-light); justify-content: flex-end; }
.c-toggle-text input:checked + .c-toggle-text__track .c-toggle-text__pill--on { color: var(--color-blue); }
.c-toggle-text input:not(:checked) + .c-toggle-text__track .c-toggle-text__pill--on { display: none; }
.c-toggle-text input:not(:checked) + .c-toggle-text__track .c-toggle-text__pill--off { display: inline-flex; }

/* --- Radio Button --- */
.c-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; color: var(--text-primary); }
.c-radio input[type="radio"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border: 1.5px solid #CCC; border-radius: 50%; cursor: pointer; flex-shrink: 0; position: relative; }
.c-radio input[type="radio"]:checked { border-color: var(--color-primary-light); border-width: 1px; background: #fff; }
.c-radio input[type="radio"]:checked::after { content: ''; position: absolute; width: 8px; height: 8px; background: var(--color-primary-light); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.c-radio-group { display: flex; align-items: center; gap: 20px; }

/* --- Setting page save button row --- */
.setting-action-bar { display: flex; justify-content: flex-end; gap: 4px; }
.setting-action-bar .btn { min-width: 100px; }
.panel-action-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.panel-action-bar .btn { min-width: 100px; }
.panel-action-bar__hint { margin-right: 22px; font-size: 13px; color: var(--color-red); }

/* --- Header guide badge --- */
.admin-header__guide-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 100px; background: #E2FFF3; color: #089253; font-size: 11px; font-weight: 600; }
.guide-ico { display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 10px; border: 1.5px solid #BFBFBF; border-radius: 50%; color: #BFBFBF; font-size: 7px; font-weight: 700; line-height: 1; flex-shrink: 0; }

/* ==================== Responsive: Tablet (≤1024px) ==================== */
@media (max-width: 1024px) {
    :root {
        --content-gap: 20px;
    }

    /* 헤더 */
    .admin-header__search  { width: 260px; }
    .admin-header__page-title { display: none; }
    .admin-header__right   { gap: 12px; }

    /* LNB */
    .admin-lnb { padding: 20px 0 16px; }

    /* 통계 카드: 4열 → 2열 */
    .admin-grid--4,
    .count-card-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* 랜딩 상품 카드: 4열 → 2열 */
    .lp-pcard-grid { grid-template-columns: repeat(2, 1fr); }

    /* 필터 패널 */
    .admin-filter { flex-wrap: wrap; gap: 8px; }
    .admin-filter__selects { flex-wrap: wrap; }
    .admin-filter-panel__stats { padding: 16px 20px; }

    /* Bulk bar */
    .c-bulk-bar { left: calc(var(--lnb-width) + 24px); }

    /* 스텝퍼: 간격 20px + 라인 숨김 */
    .step-tabs { flex-wrap: wrap; gap: 12px 20px; }
    .step-tabs__line { display: none; }

    /* AI 크레딧 바: 왼쪽 정보 요소 세로 줄바꿈 */
    .ai-credit-bar__info { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* 대시보드바: 세로 스택 */
    .dashboard-bar { flex-direction: column; align-items: stretch; gap: 12px; }
    .dashboard-bar__actions { flex-wrap: wrap; }

    /* form-table 가로 스크롤 */
    .form-table-wrap .form-table { min-width: 720px; }
    .form-table-wrap .subtitle-table { min-width: 720px; }
    .form-table-wrap .tab-info-table { min-width: 720px; }
    .form-table-wrap .tab-info-table > colgroup > col:first-child { width: 120px !important; }
    .form-table-wrap .tab-info-table > tbody > tr > th { width: 120px; padding: 16px; }
    .form-table-wrap .folder-mgmt-header,
    .form-table-wrap .folder-mgmt-row { min-width: 720px; }
    .form-table-wrap .setting-table { min-width: 720px; width: 100%; margin: 0; }
    .form-table-wrap .setting-table th { width: 120px; padding: 12px 16px; }

    /* 폼 + 미리보기 그리드: 세로 스택 */
    .form-preview-grid { grid-template-columns: 1fr; }
}

/* ==================== Responsive: Mobile (≤768px) ==================== */
@media (max-width: 768px) {
    :root {
        --content-gap: 16px;
    }

    /* 랜딩 미리보기: 상품 2열 / 쿠폰 1열 */
    .lp-preview__products { grid-template-columns: repeat(2, 1fr); }
    .lp-preview__coupons { grid-template-columns: 1fr; }

    /* LNB 숨김 + 햄버거 토글 (.admin-lnb--open 클래스로 슬라이드 인) */
    .admin-lnb { transform: translateX(-100%); transition: transform 0.2s; z-index: 60; }
    .admin-lnb--open { transform: translateX(0); }

    /* 콘텐츠 전체 너비 */
    .admin-content  { margin-left: 0; }
    .c-bulk-bar { left: 16px; right: 16px; }

    /* 헤더 */
    .admin-header__logo  { width: auto; }
    .admin-header__search { display: none; }
    .admin-header__center { padding: 0 10px; }

    /* 통계 카드: 1열 */
    .admin-grid--4 { grid-template-columns: 1fr; }
    .admin-grid--3 { grid-template-columns: 1fr; }
    .admin-grid--2 { grid-template-columns: 1fr; }

    /* 필터 세로 배치 */
    .admin-filter__selects { width: 100%; }
    .admin-filter__select  { flex: 1; }
}


/* ==================== 테스트 발송 모달 ==================== */
.test-send { align-items:stretch; text-align:left; gap:20px; }
.test-send__group { display:flex; flex-direction:column; gap:10px; }
.test-send__box { border:1px solid var(--border-color); border-radius:8px; padding:20px 24px; background:#FAFAFA; }
.test-send__channels { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.test-send__channel-status { font-size:13px; font-weight:600; line-height:1.4; color:var(--color-blue); }
.test-send__sim-link { font-size:14px; font-weight:700; color:var(--color-blue); text-decoration:none; }
.test-send__sim-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.test-send__sim-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; }
.test-send__sim-label { color:var(--text-secondary); }
.test-send__sim-value { color:var(--text-primary); }
.test-send__sim-value--credit { display:inline-flex; align-items:center; gap:5px; }

/* ==================== 랜딩페이지 확장형 ==================== */
/* 상품 선택 행 */
.lp-select-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* 선택된 상품 카드 그리드 (썸네일 이미지) */
.lp-pcard-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.lp-pcard-thumb { width:100%; height:auto; display:block; border-radius:10px; }

/* 상품 카드 노출 옵션 */
.lp-options-row { display:flex; align-items:center; gap:18px 28px; flex-wrap:wrap; }
.lp-option { display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--text-primary); }

/* 혜택 설정 쿠폰 */
.lp-coupon-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:14px; }
.lp-coupon-row { display:flex; align-items:center; gap:16px; padding:25px 24px; background:#FAFAFA; border-radius:8px; }
.lp-coupon-row__label { flex-shrink:0; font-size:13px; color:var(--text-secondary); }
.lp-coupon-row__name { flex:1; min-width:0; font-size:14px; color:var(--text-primary); }
.lp-coupon-row__amount { flex-shrink:0; font-size:14px; color:var(--text-primary); }
.lp-coupon-row__amount strong { font-weight:700; }
.lp-coupon-row__remove { flex-shrink:0; width:18px; height:18px; padding:0; background:none; border:none; cursor:pointer; color:var(--text-tertiary); font-size:15px; line-height:1; }

/* CTA 색상 입력 */
.lp-color-field__label { font-size:9px; font-weight:600; color:var(--color-blue); }
.lp-color-input { display:flex; align-items:center; gap:10px; }
.lp-color-swatch { width:40px; height:40px; border-radius:8px; border:1px solid var(--border-color); background:#F2F2F2; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.lp-color-swatch__chip { width:24px; height:24px; border-radius:2px; border:1px solid rgba(0,0,0,0.08); }

/* 랜딩페이지 미리보기 (확장형) */
.lp-preview__section-title { margin:0 0 12px; font-size:17px; font-weight:700; color:var(--text-primary); }
.lp-preview__products { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.lp-preview__product { width:100%; height:auto; display:block; border-radius:8px; }
.lp-preview__coupons { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.lp-preview__coupon { width:100%; height:auto; display:block; }

/* 업로드 리스트 본문 (테이블 영역 패딩) */
.upload-list-body { padding:0 30px 30px; }

/* 게시판 권한 설정 행 (라벨 + 라디오) */
.board-perm-row { display:flex; align-items:center; gap:24px; }
.board-perm-row__label { min-width:60px; font-size:14px; color:var(--color-textgray); }

/* 유튜브 링크 추가 행 (인풋 + 추가 버튼) */
.yt-add-row { display:flex; gap:6px; }
.yt-add-row__btn { flex-shrink:0; width:84px; }

/* ==================== 날짜 지정 검색 필터 ==================== */
.c-date-filter { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.c-date-filter .admin-filter__search { background:#fff; border:1px solid var(--border-color); }
.c-date-filter .admin-filter__search img { filter: brightness(0) invert(20%); position:relative; top:1px; }
.c-date-filter__period { display:flex; align-items:center; gap:4px; }
.c-date-filter__range { display:flex; align-items:center; gap:8px; }
.c-date-filter__sep { font-size:14px; color:var(--text-tertiary); }
.c-date-input { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 15px; border:1px solid var(--border-color); border-radius:6px; background:#fff; cursor:pointer; box-sizing:border-box; }
.c-date-input:focus-within { border-color:var(--color-primary); }
.c-date-input input { border:none; outline:none; font-family:inherit; font-size:13px; color:var(--text-primary); background:transparent; width:80px; cursor:pointer; padding:0; }
.c-date-input__ico { flex-shrink:0; display:flex; align-items:center; pointer-events:none; width:20px; height:20px; }
.c-datetime-group { display:inline-flex; align-items:center; gap:4px; }

/* ==================== 크레딧 정보 패널 ==================== */
.credit-info { display:flex; align-items:center; gap:40px; }
.credit-info__main { display:flex; align-items:center; gap:20px; background:#F9F9F9; border-radius:16px; padding:20px 24px; flex:1; }
.credit-info__icon-box { display:flex; align-items:center; justify-content:center; width:80px; height:80px; background:#fff; border-radius:50%; flex-shrink:0; }
.credit-info__amount-wrap { display:flex; align-items:center; gap:8px;padding-right:20px; }
.credit-info__label { font-size:13px; color:var(--text-secondary); }
.credit-info__amount { display:flex; align-items:center; gap:6px; font-size:26px;letter-spacing: -1px; font-weight:700; color:var(--text-primary); }
.credit-info__stats-box { display:flex; flex-direction:column; gap:14px; flex:1; }
.credit-info__stat { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.credit-info__stat-label { font-size:13px; color:var(--text-secondary); }
.credit-info__stat-value { display:flex; align-items:center; gap:4px; font-size:14px; font-weight:700; color:var(--text-primary); }

/* ==================== 크레딧 증감 값 ==================== */
.credit-value { display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:14px; }
.credit-value--plus { color:#F55F02; }
.credit-value--minus { color:var(--color-blue); }

/* ==================== 크레딧 충전 ==================== */
.two-col-layout { display:flex; gap:16px; align-items:flex-start; }
.two-col-layout__col { flex:1; min-width:0; }
.panel-title { font-size:20px; font-weight:700; color:var(--text-primary); margin: 0 -30px 20px; padding: 0 24px 16px; border-bottom:1px solid #E0E0E0; }

.credit-charge__balance { display:flex; align-items:center; justify-content:space-between; padding:24px 30px; background:#F5F6FA; border-radius:8px; margin-bottom:16px; }
.credit-charge__balance-label { font-size:14px; color:var(--text-dark); }
.credit-charge__balance-value { font-size:24px; font-weight:700; color:var(--text-dark);line-height:-1px; display:flex; align-items:center; gap:4px; }
.credit-coin { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--color-primary); color:#fff; font-size:11px; font-weight:700; }

.credit-option-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.credit-option { display:flex; justify-content: space-between; align-items:center; gap:4px; padding:22px 20px; border:none; border-radius:8px; background:#fff; cursor:pointer; transition:box-shadow 0.15s, background 0.15s; box-shadow:inset 0 0 0 1px var(--border-color); }
.credit-option:hover { box-shadow:inset 0 0 0 2px var(--color-primary), 0 2px 8px 0 rgba(0,0,0,0.06); }
.credit-option--active { box-shadow:inset 0 0 0 2px var(--color-primary), 0 2px 8px 0 rgba(0,0,0,0.06); background:#FFF; }
.credit-option__amount { font-size:20px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:4px;line-height: -2px; }
.credit-option__bonus { font-size:12px; font-weight:600; color:var(--color-blue); }

.credit-charge__summary { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 0; }
.credit-charge__summary-label { font-size:16px; color:var(--text-dark); font-weight:600; }
.credit-charge__summary-amount { display:inline-flex; align-items:center; justify-content:center; gap:4px; font-size:36px; font-weight:700; letter-spacing:-1px; color:var(--color-accent-red); line-height:1; }
.accent-red { color: var(--color-accent-red) !important; }
.credit-charge__summary-unit { font-size:18px; font-weight:500; color:#424242; }
.credit-charge__summary-vat { font-size:12px; color:var(--color-textgray); }

.payment-row { display:flex; align-items:center; gap:40px; margin-bottom:14px; }
.payment-row__label { font-size:17px; font-weight:700; color:var(--text-dark); white-space:nowrap; padding-top:2px; min-width:60px; }
.payment-card-list { display:flex; flex-direction:column; gap:8px; flex:1; }
.payment-card { display:flex; align-items:center; gap:30px; padding:12px 14px; border:none; border-radius:8px; cursor:pointer; background:#fff; }
.payment-card__radio-input { display:none; }
.payment-card__check { width:24px; height:24px; flex-shrink:0; background-color:#ddd; -webkit-mask-image:url("../src/images/ico-custom-radio-select.svg"); mask-image:url("../src/images/ico-custom-radio-select.svg"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.payment-card__radio-input:checked + .payment-card__check,
.payment-card__check--on { background-color:var(--color-primary); }
.payment-card__body { display:flex; align-items:center; gap:12px; }
.payment-card__thumb { width:56px; height:36px; border-radius:4px; flex-shrink:0; object-fit:cover; }
.payment-card__info { display:flex; flex-direction:column; gap:2px; }
.payment-card__name { font-size:14px; font-weight:600; color:var(--text-primary); }
.payment-card__number { font-size:12px; color:var(--color-textgray); }

.payment-no-card { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary); padding-top:2px; }
.payment-empty { display:flex; align-items:center; justify-content:center; gap:6px; padding:20px 0; font-size:14px; color:#BFBFBF; }
.payment-agree { display:flex; align-items:center; gap:8px; margin:12px 0 20px 0; cursor:pointer; }
.payment-agree__text { font-size:13px; color:var(--text-secondary); }
.payment-submit { display:block; width:100%; height:48px; border:none; border-radius:8px; background:var(--color-primary); color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition:background 0.15s; }
.payment-submit:disabled { background:#C8C8C8; cursor:not-allowed; }
.payment-submit:not(:disabled):hover { background:var(--color-blue); }

.credit-charge-notice { margin-top:20px; padding:24px; background:#FFF; border-radius:6px;border:1px solid var(--border-color); }
.credit-charge-notice__title { font-size:14px; font-weight:700; color:var(--color-primary-dark); margin-bottom:10px; }
.credit-charge-notice__list { padding-left:4px; margin:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.credit-charge-notice__list li { font-size:13px; color:var(--text-secondary); line-height:1.6; }

/* 크레딧 결제 완료 페이지 (모달형) */
.credit-paid { width:500px; max-width:100%; padding:30px; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.06); display:flex; flex-direction:column; }
.credit-paid__header { display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px 0; }
.credit-paid__body { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.credit-paid__footer { margin-top:20px; }
.credit-paid__icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.credit-paid__title { margin:0; font-size:24px; font-weight:700; color:var(--text-primary); text-align:center; letter-spacing:-0.02em; }
.credit-paid__info { width:100%; margin:0; padding:24px 36px; list-style:none; border:1px solid #EAEAEA; border-radius:8px; display:flex; flex-direction:column; gap:16px; }
.credit-paid__info li { display:flex; align-items:center; gap:16px; }
.credit-paid__info-label { flex-shrink:0; width:100px; font-size:14px; font-weight:400; color:var(--color-textgray); }
.credit-paid__info-value { flex:1; font-size:14px; color:var(--text-dark); display:inline-flex; align-items:center; gap:4px; }
.credit-paid__info-value--fail { color:var(--color-red); font-weight:500; }
.credit-paid__order-no { font-size:16px; font-weight:700; color:var(--color-blue); text-decoration:none; }
.credit-paid__btn { width:100%; }

/* 크레딧 비교 박스 (결제 전 / 결제 후) */
.credit-compare { width:100%; position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:30px 12px; border:1px solid var(--color-primary); border-radius:8px; background:#F8FCFF; }
.credit-compare::before { content:''; position:absolute; top:0; bottom:0; left:50%; border-left:1px dashed #D9E5F4; }
.credit-compare__col { display:flex; flex-direction:column; align-items:center; gap:8px; }
.credit-compare__label { font-size:13px; color:var(--color-blue); font-weight:500; }
.credit-compare__value { font-size:26px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:6px; line-height:1; letter-spacing:-0.02em; }
.credit-compare__arrow { position:relative; z-index:1; width:28px; height:28px; border-radius:50%; background:#2A2D34; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.credit-compare__arrow img { width:30px; height:30px; transform:rotate(-90deg); filter:brightness(0) invert(1); }

/* ==================== 콘텐츠 라이브러리 ==================== */
.content-warning-bar { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:0 0 14px; font-size:13px; color:var(--color-red); margin-bottom:2px; }
.content-storage { background:#fff;border-radius:8px; padding:28px 30px;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); }
.content-storage__head { display:flex; gap:15px; align-items:center; justify-content:space-between; margin-bottom:10px; }
.content-storage__label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text-primary); }
.content-storage__label-dot { width:8px; height:8px; border-radius:50%; background:var(--color-red); flex-shrink:0; }
.content-storage__usage { font-size:13px; color:var(--text-secondary); }
.content-storage__usage em { color:var(--color-red); font-style:normal; font-weight:600; }
.content-storage__bar-wrap { height:15px;border: 1px solid #EAEAEA; border-radius:100px; background:#EFEFEF; overflow:hidden; display:flex; margin-bottom:10px; }
.content-storage__bar-seg { height:100%; }
.content-storage__bar-seg--video  { background:#B6FAAB; }
.content-storage__bar-seg--image  { background:#49EEB4; }
.content-storage__bar-seg--file   { background:var(--color-primary); }
.content-storage__bar-seg--other  { background:var(--color-blue); }
.content-storage__legend { display:flex; gap:20px; justify-content:center; }
.content-storage__legend-item { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-secondary); }
.content-storage__legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.content-storage__legend-dot--video  { background:#B6FAAB; }
.content-storage__legend-dot--image  { background:#49EEB4; }
.content-storage__legend-dot--file   { background:var(--color-primary); }
.content-storage__legend-dot--other  { background:var(--color-blue); }
.count-card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.count-card-grid--3 { grid-template-columns:repeat(3,1fr); }
.count-card-grid--2 { grid-template-columns:repeat(2,1fr); }
.count-card { padding:20px 30px; background:#fff; border:1px solid var(--border-color); border-radius:8px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.count-card__label { font-size:13px; color:var(--text-dark); }
.count-card__value { font-size:28px; font-weight:600; color:#222; letter-spacing:-0.5px; line-height:1; }
/* 정산 요약 카드 (세로 스택: 라벨 / 값 / 보조설명) */
.count-card--summary { flex-direction:column; align-items:flex-end; text-align:right; gap:4px; padding:16px 30px; }
.count-card__unit { font-size:17px; font-weight:600; color:inherit; margin-left:2px; }
.count-card__value--primary { color:var(--color-blue); }
.count-card__sub { font-size:12px; color:var(--color-textgray); }
/* 채널별 누적 발송 통계 카드 (상단 라벨/값 + 하단 채널 브레이크다운) */
.count-card--with-breakdown { flex-direction:column; align-items:stretch; gap:14px; padding:18px 22px; }
.count-card__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.count-card__breakdown { display:flex; gap:8px; padding:10px 14px; background:#F5F5F5; border-radius:6px; }
.count-card__breakdown-item { flex:1; font-size:12px; color:var(--text-secondary); display:inline-flex; align-items:center; gap:4px; }
.count-card__breakdown-value { color:var(--color-blue); font-weight:600; }

/* 테이블 셀 내 서브 텍스트 (메인 값 아래 보조 정보) */
.cell-sub-text { font-size:12px; color:#888; margin-top:4px; }

/* 카테고리 뱃지 (상품 카테고리/태그용) */
.cate-tag { display:inline-flex; align-items:center; justify-content:center; padding:3px 6px 4px; border-radius:100px; font-size:10px; font-weight:700; line-height:1; white-space:nowrap; }
.cate-tag--youtube { background:#E1F4FF; color:#027CFA; }
.cate-tag--ai { background:#E1F4FF; color:#1976D2; }
.cate-tag--ai-tutor,
.cate-tag--ai-translate,
.cate-tag--ai-subtitle { width:60px; padding:8px 10px; font-size:12px; font-weight:600; }
.cate-tag--ai-tutor    { background:#fff; color:#4700D6; border:1px solid rgba(71, 0, 214, 0.50); }
.cate-tag--ai-translate{ background:#fff; color:#F52A02; border:1px solid rgba(245, 42, 2, 0.50); }
.cate-tag--ai-subtitle { background:#fff; color:#089253; border:1px solid rgba(8, 146, 83, 0.50); }

/* 판매 상태 뱃지 */
.sale-status-tag { display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; border-radius:100px; border:1px solid; font-size:11px; font-weight:600; line-height:1.2; white-space:nowrap; }
.sale-status-tag--selling { color:#337EFE; border-color:#1FB6FF; }
.sale-status-tag--closed  { color:#2C2C2C; border-color:#909090; }
.sale-status-tag--ongoing    { color:#089253; border-color:#089253; }
.sale-status-tag--processing { color:#FF7700; border-color:#FF7700; }
.sale-status-tag--suspended  { color:#F59500; border-color:#F59500; }
.sale-status-tag--subscribed { color:#027CFA; border-color:#027CFA; }
.sale-status-tag--membership { color:#6756ED; border-color:#6756ED; }
.sale-status-tag--sm { height:18px; padding:0 6px; font-size:9px; }

/* 응답자 유형 태그 (회원만 등) */
.respondent-tag { display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; border-radius:100px; border:1px solid; font-size:11px; font-weight:600; line-height:1.2; white-space:nowrap; }
.respondent-tag--anyone { color:#2C2C2C; border-color:#909090; }
.respondent-tag--member { color:#337EFE; border-color:#1FB6FF; }

/* 주문 상세 - 정보 행 (4:4:2 비율) */
.order-info-row { display:flex; align-items:center; gap:0; }
.order-info-row__col { display:flex; flex-direction:column; gap:8px; flex:4; min-width:0; }
.order-info-row__label { font-size:13px; color:var(--color-textgray); }
.order-info-row__value { font-size:14px; font-weight:500; color:var(--text-primary); }
.order-info-row__action { flex:2; display:flex; justify-content:flex-end; }

/* 주문 상세 - 주문 상품 카드 */
.order-product-card { display:flex; gap:24px; padding:24px 0; border-bottom:1px solid var(--border-color); }
.order-product-card--bordered { border-top:1px solid var(--border-color); padding-top:24px; }
.order-product-card__thumb { width:200px; height:120px; flex-shrink:0; border-radius:8px; object-fit:cover; }
.order-product-card__body { flex:1; display:flex; flex-direction:column; gap:10px; }
.order-product-card__meta { display:flex; align-items:center; gap:8px; }
.order-product-card__code { font-size:12px; color:var(--color-textgray); }
.order-product-card__title { font-size:24px; font-weight:700; color:var(--color-blue); text-decoration:none; }
.order-product-card__divider { width:100%; height:1px; background:var(--border-color); margin:6px 0; }
.order-product-card__author { margin-top:5px; font-size:12px; color:var(--text-primary);font-weight:500; }
.content-list-bar { display:flex; align-items:center; gap:20px; padding:0 0 10px; flex-wrap:wrap; }
.content-list-bar__title { font-size:17px; font-weight:700; color:#222; flex-shrink:0; }
.content-list-bar__folders { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.content-list-bar__right { margin-left:auto; display:flex; align-items:center; gap:4px; }
.folder-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 5px; background:#FFF;font-size:13px; color:#222; }
.folder-tag__del { font-size:16px; line-height:1; cursor:pointer; color:#bfbfbf; background:none; border:none; padding:0; }
.encoding-info { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.encoding-info--fail { color:var(--status-danger-text); }
.encoding-info__retry { color:var(--color-blue); cursor:pointer; font-weight:500; background:none; border:none; padding:0; font-size:12px; font-family:inherit; }
.content-select-bar { position:fixed; bottom:0; left:0; right:0; height:60px; background:var(--color-primary); display:flex; align-items:center; padding:0 24px; gap:12px; z-index:200; }
.content-select-bar__close { color:#fff; font-size:20px; cursor:pointer; background:none; border:none; line-height:1; padding:0; flex-shrink:0; }
.content-select-bar__text { color:#fff; font-size:14px; font-weight:500; }
.content-select-bar__actions { margin-left:auto; }
.list-sort-select { height:34px; padding:0 10px; border:1px solid var(--border-color); border-radius:6px; font-size:13px; font-family:inherit; color:var(--text-primary); background:#fff; outline:none; cursor:pointer; }

/* 패널 내부 빈 상태 (가운데 정렬, 상하 80px 패딩) */
.panel-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:40px 20px; text-align:center; }
.panel-empty__title { margin:0; font-size:20px; font-weight:700; color:var(--text-primary); }
.panel-empty__desc { line-height:1.5; margin:0 0 20px; }

/* AI 자료 첨부 (페이퍼클립 + 파일명 + 크기) */
.ai-file-attach { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--text-primary); }
.ai-file-attach__size { color:var(--text-tertiary); margin-left:8px; }

/* 탭메뉴 내부 정보 테이블 — 좌측 라벨/우측 콘텐츠 */
.tab-info-table { width:100%; border-collapse:separate; border-spacing:0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); }
.tab-info-table + .tab-info-table  { margin-top:30px; }  /* table → table (제목 없이 연속) */
.tab-info-table + .tab-info-title  { margin-top:30px; }  /* table → 다음 섹션 제목: 간격은 여기서 */
.tab-info-table > tbody > tr > th { padding:24px 30px; vertical-align:middle; text-align:left; background:#F7F8FA; font-size:14px; font-weight:500; color:var(--color-textgray); white-space:nowrap; }
.tab-info-table > tbody > tr > td { padding:12px 0 12px 16px; vertical-align:middle; }
.tab-info-table > tbody > tr + tr > th, .tab-info-table > tbody > tr + tr > td { border-top:1px solid var(--border-color); }
.tab-info-table__label { display:inline-flex; align-items:center; gap:6px; }
.tab-info-table__edit { background:none; border:none; padding:0; cursor:pointer; line-height:0; }
/* tab-info-table 위 섹션 타이틀 — border 없음, 17px, 테이블과 8px 간격 */
.tab-info-title { margin:0 0 8px; padding:0; border:0; font-size:17px; font-weight:700; color:var(--text-primary); line-height:1.3; }

/* Q/A 아이템 (원형 배지 + 텍스트) */
.qa-item { display:flex; gap:12px; align-items:flex-start; }
.qa-item + .qa-item { margin-top:16px; }
.qa-item__badge { flex-shrink:0; width:24px; height:24px; margin-right:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
.qa-item__badge--q { background:var(--color-primary); }
.qa-item__badge--a { background:#BFBFBF; }
.qa-item__text { margin:0; font-size:14px; line-height:1.6; color:var(--text-dark); flex:1; }
.qa-item__badge--a + .qa-item__text { color:#424242; font-size:13px; }

/* Q/A 그룹 (Q+A 한 묶음, 그룹 사이 간격) */
.qa-group + .qa-group { margin-top:20px; }

/* FAQ 상세 — Q 강조 텍스트 / A 회색 박스 */
.qa-item__text--q { font-size:17px; font-weight:600; color:var(--color-primary); }
.qa-item--center { align-items:center; gap:15px; }
.qa-item--center .qa-item__badge { margin-right:0; }
.qa-item__answer { flex:1; display:flex; align-items:flex-start; background:#F9F9F9; border-radius:8px; padding:30px; }
.qa-item__answer-text { flex:1; font-size:14px; line-height:1.8; color:var(--text-primary); }

/* tab-info-table 안의 단순 불릿 리스트 (학습요약 등) */
.tab-info-list { margin:0; padding-left:18px; list-style:disc; }
.tab-info-list li { font-size:14px; line-height:1.6; color:var(--text-dark); margin:0; }
.tab-info-list li + li { margin-top:8px; }

/* 퀴즈 리스트 (4지선다 / OX) */
.quiz-list { margin:0; padding:0; list-style:none; }
.quiz-item + .quiz-item { margin-top:24px; }
.quiz-item__row { display:flex; gap:12px; align-items:flex-start; }
.quiz-item__row + .quiz-item__row { margin-top:12px; }
.quiz-item__label,
.quiz-item__answer { flex-shrink:0; width:40px; margin:4px 0 0; font-size:13px; font-weight:700; line-height:1.5; }
.quiz-item__label { color:#F22; }
.quiz-item__label--q { color:var(--color-primary); margin-top:0; align-self:center; }
.quiz-item__label--neutral { color:#222; }
.quiz-item__answer { color:#222; }
.quiz-item__text { flex:1; margin:0; font-size:13px; line-height:1.5; color:#424242;align-self: flex-start; }

/* 강의정보 수정 — Q/A 배지 + 입력필드 가로배치 */
.qa-edit-row { display:flex; gap:12px; align-items:center; }
.qa-edit-row + .qa-edit-row { margin-top:12px; }
.qa-edit-row--top { align-items:flex-start; }
.qa-edit-row__field { flex:1; min-width:0; }
.qa-edit-btn { flex-shrink:0; width:24px; height:24px; line-height:1; border-radius:50%; background:#666; font-size:18px; color:#FFF; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0 0 2px; }
.qa-edit-btn:hover { border-color:var(--color-primary); color:var(--color-primary); }
.quiz-item__row .qa-edit-btn { align-self:center; }

/* ==================== 폴더 관리 ==================== */
.folder-mgmt-title { font-size:17px; font-weight:700; color:#222; padding-bottom:14px; border-bottom:1px solid #EFEFEF; margin-bottom:0; display:block; }
.folder-mgmt-header { display:flex; align-items:center; gap:8px; height:46px; padding:0; background:#fff; border-top:2px solid #222; border-bottom:1px solid var(--border-color); font-size:13px; color:#919191; font-weight:600; white-space:nowrap; }
.folder-mgmt-header__drag-empty { width:28px; flex-shrink:0; }
.folder-mgmt-header__name { flex:1; text-align:center; }
.folder-mgmt-header__sort { width:140px; text-align:center; flex-shrink:0; }
.folder-mgmt-header__manage { width:80px; text-align:center; flex-shrink:0; }
.folder-mgmt-row { display:flex; align-items:center; min-height:48px; border-bottom:1px solid var(--border-color); gap:8px; padding:4px 0; }
.folder-mgmt-row:last-child { border-bottom:none; }
.folder-mgmt-row--sub { padding-left:44px; background:#FFF; }
.folder-mgmt-row__drag { background:none; border:none; cursor:grab; padding:4px; display:flex; align-items:center; flex-shrink:0; }
.folder-mgmt-row__drag-empty { width:28px; flex-shrink:0; }
.folder-mgmt-row__sort { width:140px; text-align:center; flex-shrink:0; font-size:13px; color:var(--text-primary); }
.row-drag { background:none; border:none; cursor:grab; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.folder-mgmt-row__name { flex:1; min-width:0; display:flex; align-items:center; gap:6px; }
.folder-mgmt-row__name .btn.border-primary { width:84px; min-width:unset; }
.folder-mgmt-row__name .input-with-counter { flex:1; min-width:0; }
.folder-mgmt-row__input { width:100%; height:40px; padding:0 52px 0 14px; border:1px solid var(--border-color); border-radius:6px; font-size:14px; font-family:inherit; outline:none; box-sizing:border-box; color:var(--text-primary); }
.folder-mgmt-row__input:focus { border-color:var(--color-primary); }
.folder-mgmt-row__input::placeholder { color:var(--text-placeholder); }
.folder-mgmt-row__input:disabled { color: var(--text-disabled); background: #F2F2F2; cursor: not-allowed; }
.folder-mgmt-row__text { font-size:14px; color:var(--text-primary); padding:0 4px; flex:1; }.folder-mgmt-row__actions { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:80px; }
.folder-dots { position:relative; }
.folder-dots__btn { background:none; border:none; cursor:pointer; padding:4px;display:flex; align-items:center; border-radius:4px; }
.folder-dots__btn:hover { background:var(--bg-hover); }
.folder-dots__menu { display:none; position:absolute; right:0; top:calc(100% + 4px); background:#fff; border:1px solid #027CFA; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.08); z-index:100; min-width:60px; padding:0; overflow:hidden; }
.folder-dots__menu:hover { display:block; border-color:var(--color-blue); }
.folder-dots__menu.open { display:block; }
.folder-dots__item { display:block; width:100%; margin:0; padding:9px 10px; font-size:13px; color:var(--text-primary); background:transparent; text-align:center; border:none; cursor:pointer; font-family:inherit; border-radius:0; white-space:nowrap; }
.folder-dots__item:hover { background:#EAF3FF; color:var(--color-blue); }

/* ==================== Panel Section Title ==================== */
.panel-section-title { font-size:20px; font-weight:700; color:#222; margin:0 -30px 0; padding:0 30px 13px; border-bottom:1px solid #EFEFEF; }
.panel-section-title--with-action { padding-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ==================== c-form-row ==================== */
.c-form-row { display:flex; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--border-color); }
.panel-section-title + .c-form-row { padding-top:0; }
.c-form-row:last-child { border-bottom:none; padding-bottom:0;padding-top:20px; }
.c-form-row--col { flex-direction:column; gap:8px; }
.c-form-row--col .c-form-row__label { width:auto; padding-top:0; }
.c-form-row__label { width:160px; flex-shrink:0; font-size:13px; font-weight:500; color:var(--color-textgray); padding-top:10px; line-height:1.5; }
.c-form-row__req { color:var(--color-red); margin-left:2px; }
.c-form-row__body { flex:1; min-width:0; }
.c-form-row__inline { display:flex; align-items:center; gap:8px; }
.c-form-row__inline .detail-form__input { flex:1; }
.c-form-row__selected { font-size:14px; color:var(--color-blue); font-weight:500; }
.c-form-row__hint { font-size:12px; color:var(--text-secondary); margin:8px 0 0; line-height:1.7; }
.c-form-row__link { color:var(--text-primary); font-weight:600; text-decoration:underline; }

/* 공용 텍스트 링크 (파란색 + 밑줄) */
.c-text-link { color:var(--color-blue); text-decoration:underline; cursor:pointer; }
.c-text-link:hover { text-decoration:underline; }

/* ==================== Upload ==================== */
.upload-storage-info { display:flex; justify-content:flex-end; font-size:13px; color:var(--text-secondary); padding:16px 0 8px; }
.upload-storage-info__used { color:var(--color-blue); font-weight:500; margin-left:2px; }
.c-upload-dropzone { background:#F8F8F8; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 20px; gap:14px; margin-top:12px; }
.c-upload-dropzone__text { font-size:13px; color:var(--text-secondary); text-align:center; line-height:1.5; margin:0; }
.upload-start-btn { margin-top:10px; }

/* 업로드 전송 상태 진행바 */
.upload-progress { display:inline-flex; align-items:center; gap:8px; }
.upload-progress__text { font-size:13px; white-space:nowrap; min-width:60px; text-align:right; color:var(--text-tertiary); }
.upload-progress__text--ing { color:var(--color-blue); }
.upload-progress__text--wait { color:var(--text-secondary); }
.upload-progress__text--fail { color:#F22; }
.upload-progress__bar { display:inline-block; flex-shrink:0; width:80px; height:6px; background:#EFEFEF; border-radius:100px; overflow:hidden; vertical-align:middle; }
.upload-progress__fill { display:block; height:100%; background:var(--color-blue); border-radius:100px; }
.upload-progress__fill--gray { background:#C5C5C5; }

/* ==================== 알림 설정 (Notification Settings) ==================== */
.notif-section { background:#fff; border-radius:8px; margin-bottom:12px; box-shadow:0 2px 4px 0 rgba(0,0,0,0.08); overflow:hidden; }
.notif-section__header { display:flex; align-items:center; justify-content:space-between; padding:20px 30px 12px; cursor:pointer; user-select:none; background:#fff; border:none; border-bottom:1px solid #EAEAEA; width:100%; text-align:left; font-family:inherit; }
.notif-section__title { font-size:20px; font-weight:700; color:var(--text-primary); }
.notif-section__arrow { width:24px; height:24px; transition:transform 0.2s; flex-shrink:0; }
.notif-section.is-closed .notif-section__arrow { transform:rotate(180deg); }
.notif-section.is-closed .notif-section__body { display:none; }
.notif-section__body { padding:0 30px; }
.notif-section__footer { height:20px; }

.notif-row { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; padding:24px 0 20px; border-bottom:1px solid #EAEAEA; }
.notif-row__info { flex:1; min-width:0; }
.notif-row__name { display:block; font-size:16px; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
.notif-row__desc { display:block; font-size:13px; color:var(--color-textgray); line-height:1.5; }
.notif-row__channels { display:flex; flex-direction:column; gap:8px; min-width:130px; flex-shrink:0; }
.notif-row:has(+ .notif-row__opt-in) { border-bottom:none; padding-bottom:8px; }
.notif-row + .notif-row__opt-in { display:flex; justify-content:flex-end; padding:0 0 20px; border-bottom:1px solid #EAEAEA; }
.notif-row__opt-in label { height:36px;display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); cursor:pointer; }

.notif-channel { display:flex; align-items:center; gap:10px; }
.notif-channel__label { display:inline-flex; align-items:center; gap:2px; font-size:13px; color:var(--text-dark);margin-left:6px; }
.notif-channel__label img { width:18px; height:18px; }
.notif-channel .c-check-blue:checked ~ .notif-channel__label img { filter:brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(2030%) hue-rotate(170deg) brightness(102%) contrast(96%); }
.notif-channel .btn { margin-left:auto; }

/* ==================== 등록 단계 스텝퍼 (Step Tabs) ==================== */
.step-tabs { display:flex; align-items:center; justify-content:center; padding:12px 0; background:transparent; }
.step-tabs__step { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }
.step-tabs__circle { width:30px; height:30px; border-radius:50%; background:#BFBFBF; color:#fff; font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-tabs__label { font-size:15px; color:#424242;font-weight:500; }
.step-tabs__line { width:92px; height:1px; background:#E5E7EB; margin:0 12px; flex-shrink:0; }
.step-tabs__step--active .step-tabs__circle { background:var(--color-primary); }
.step-tabs__step--active .step-tabs__circle img { filter:brightness(0) invert(1); transform:translateY(2px); }

/* ==================== 멤버십 등급 카드 (Plan Card) ==================== */
/* 멤버십 개수 선택 행 (라벨 + 드롭다운) */
.plan-count-row { display:flex; align-items:center; gap:24px; margin-bottom:20px; }
.plan-count-row__label { font-size:14px; font-weight:500; color:var(--text-primary); min-width:120px; }
.plan-count-row .c-dropdown { width:240px; }
.plan-card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.plan-card { border:1px solid #E5E7EB; border-radius:8px; padding:30px; background:#fff; display:flex; flex-direction:column; gap:10px; }
.plan-card__body { display:flex; flex-direction:column; gap:16px; }
.plan-card__section { display:flex; flex-direction:column; gap:8px; }
.plan-card__title { margin:0; padding:0; font-size:16px; font-weight:700; color:var(--text-primary); text-align:center; }
.plan-card__price { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:10px 20px; background:#F4F5F7; border-radius:8px; }
.plan-card__price-label { font-size:20px; font-weight:600; color:var(--text-primary); }
.plan-card__price-amount { display:inline-flex; align-items:baseline; gap:4px; }
.plan-card__price-value { font-size:28px; font-weight:700; color:#6756ED; letter-spacing:-0.02em; }
.plan-card__price-suffix { font-size:13px; font-weight:500; color:var(--text-tertiary); }
.plan-card__section-title { margin:0;padding:8px 0;font-size:16px; font-weight:500; color:var(--text-tertiary); }
.plan-card__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.plan-card__list li { display:flex; align-items:center; gap:9px; font-size:15px; color:var(--text-dark); }
.plan-card__list li img { flex-shrink:0; }

/* ==================== 멤버십 세부 정보 수정 (Plan Detail / setting-step2) ====================
   2-컬럼 레이아웃: 좌측 세로 탭 메뉴(320px 고정, 하나의 패널) + 우측 세부 정보 패널들(1fr)
   ============================================================================== */
.plan-detail-layout { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
.plan-detail-side { display:flex; flex-direction:column; gap:16px; }

/* 좌측 세로 탭 메뉴: 하나의 list-panel 안에 탭이 구분선으로 나뉨, 좌우 패딩 0으로 구분선이 양끝까지 */
.plan-tab-list { display:flex; flex-direction:column; padding:0; }
.plan-tab-item { padding:20px; cursor:pointer; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; }
.plan-tab-item:hover { background:#FAFBFD; }
.plan-tab-item + .plan-tab-item { border-top:1px solid var(--border-color); }
.plan-tab-item--active { background:#FAFBFD; cursor:default; }
.plan-tab-item--active:hover { background:#FAFBFD; }
.plan-tab-item__title { margin:0; padding:0; font-size:14px; font-weight:600; color:var(--text-primary); }
.plan-tab-item__price { margin:0; padding:0; font-size:13px; color:var(--color-textgray); }
.plan-tab-item__price strong { font-size:13px; font-weight:600; color:var(--color-blue); margin-right:2px; }

/* 활성 탭: 인풋 + 우하단 글자수 카운트 */
.plan-tab-item__name-wrap { position:relative; }
.plan-tab-item__name { width:100%; height:74px; padding:15px 60px 15px 15px; border:1px solid #E5E7EB; border-radius:6px; font-size:14px; font-weight:500; line-height:1.4; color:var(--text-primary); background:#fff; box-sizing:border-box; font-family:inherit; resize:none; display:block; }
.plan-tab-item__name:focus { outline:none; border-color:var(--color-primary); }
.plan-tab-item__count { position:absolute; right:12px; bottom:8px; font-size:12px; color:var(--text-tertiary); pointer-events:none; }

/* 혜택 리스트 (다이아몬드 아이콘 + 텍스트, 줄간격 12px) */
.plan-benefit-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.plan-benefit-list li { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-primary); }
.plan-benefit-list li img { flex-shrink:0; }

/* ==================== Tag Pill (선택 가능한 알약형 태그 버튼) ====================
   사용처: 캠페인 상세의 발송 목적 선택, 기타 선택 가능한 카테고리 셀
   ============================================================================ */
.c-tag-pill-group { display:flex; flex-wrap:wrap; gap:4px; }
.c-tag-pill { display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border:1px solid var(--border-color); border-radius:100px; background:#fff; font-size:13px; color:var(--text-primary); cursor:pointer; line-height:1.5; }
.c-tag-pill:hover { border-color:var(--color-primary); }
.c-tag-pill--active { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.c-tag-pill--add { border-color:#707070; }
.c-tag-pill--add:hover { color:var(--color-primary); border-color:var(--color-primary); }

/* ==================== Inline Hint (i 아이콘 + 텍스트) ====================
   페이지/패널 안에서 한 줄짜리 보조 안내. 큰 admin-infotip 박스의 인라인 버전.
   - --warn: 빨간 (경고·과금 차감 등)
   - --info: 파란 (정보 안내)
   사용 예: <span class="c-hint c-hint--warn">메시지 발송 시 크레딧이 차감됩니다.</span>
   ====================================================================== */
.c-hint { display:inline-flex; align-items:flex-start; gap:4px; font-size:12px; line-height:1.5; }
.c-hint::before { content:'i'; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px; margin-top:3px; border-radius:50%; color:#fff; font-size:9px; font-weight:700; font-style:normal; line-height:1; }
.c-hint--warn          { color:#F52A02; }
.c-hint--warn::before  { background:#F52A02; }
.c-hint--info          { color:var(--color-blue); }
.c-hint--info::before  { background:var(--color-blue); }

/* 섹션 헤더: 좌측 타이틀 + 우측 보조 텍스트 (예: "복수 선택 가능") */
.section-head-row { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:10px; margin-bottom:16px; border-bottom:1px solid #EFEFEF; }
.section-head-row .detail-form__section-title { margin:0; padding:0; border:0; }
.section-head-row__info { font-size:13px; color:var(--text-secondary); }

/* 패널 하단 푸른 점 안내 텍스트 */
.panel-bottom-hint { display:flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; color:var(--text-secondary); }
.panel-bottom-hint::before { content:''; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--color-blue); }

/* 수신자 그룹 선택 (체크박스 리스트) */
.recipient-group-list { display:flex; flex-direction:column; gap:4px; margin-top:16px; }
.recipient-group-item { display:flex; align-items:center; gap:12px; padding:12px 15px; background:#FFF; border-radius:8px; border:1px solid var(--border-color); cursor:pointer; }
.recipient-group-item:hover { border-color:var(--color-primary); }
.recipient-group-item__name { flex:1; font-size:14px; color:var(--text-primary); }
.recipient-group-item__count { font-size:13px; color:var(--text-secondary); }
.recipient-group-item--active { background:#fff; border-color:var(--color-primary); }
.recipient-group-item--active .recipient-group-item__name { font-weight:600; }

/* 패널 내부 검색 박스 (회색 배경, 풀폭) */
.panel-search { display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; background:#F7F7F7; border-radius:6px; }
.panel-search__input { flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:13px; color:var(--text-primary); }
.panel-search__input::placeholder { color:var(--text-placeholder); }

/* 알약 태그 — 파랑 outline 변형 (예: 선택된 설문폼) */
.c-tag-pill--outline-info { font-size:13px; line-height:1.2;border-color:var(--color-primary); color:var(--color-dark); }
.c-tag-pill--outline-info:hover { border-color:var(--color-blue); }
.c-tag-pill__remove { width:14px; height:14px; color:var(--color-primary);padding:0; margin-left:2px; background:none; border:none; cursor:pointer; font-size:14px; line-height:1.2; display:inline-flex; align-items:center; justify-content:center; font-family:Arial, sans-serif; }

/* stat-card 아이콘 wrap — 흰 배경 + 회색 라운드 보더 (채널 통계 카드 등) */
.stat-card__icon-wrap--neutral { width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid var(--border-color); }

/* 그룹 명/설명 2줄 셀 (수신자 그룹 목록 등) */
.group-name-cell { display:flex; flex-direction:column; gap:4px; }
.group-name-cell__name { font-size:14px; font-weight:500; color:var(--text-primary); }
.group-name-cell__desc { font-size:12px; color:var(--color-blue); }

/* ==================== 수신자 그룹 조건별 추출 ==================== */
/* 회색 박스 — 안내·조건 행 등을 감싸는 개별 박스 (3개씩 세로 스택) */
.target-andor-box { padding:12px 16px; background:#F7F7F7; border-radius:6px; }
.target-andor-box__head { font-size:14px; color:var(--text-primary); }
.target-andor-stack { display:flex; flex-direction:column; gap:10px;margin-top:16px; }

/* AND/OR mini 세그먼트 토글 (인라인 문장 안) */
.target-andor-toggle { display:inline-flex; gap:4px;background:#fff; border:1px solid var(--border-color); border-radius:6px; vertical-align:middle; margin:0 4px; }
.target-andor-toggle__btn { padding:8px 12px; background:transparent; border:none; border-radius:4px; font-size:13px; color:var(--text-secondary); cursor:pointer; font-family:inherit;line-height: 1.5; }
.target-andor-toggle__btn--active { background:var(--color-blue); color:#fff; font-weight:600; }

/* 조건 행 (드롭다운/인풋 + 예상 배지 + 삭제) */
.target-condition-row { display:flex; align-items:center; gap:4px; }
.target-condition-row .c-dropdown__trigger { min-width:0; max-width:none; width:100%; }
.target-condition-row__delete { width:28px; height:28px; padding:0; background:#FFF5F5; border:1px solid #FFCDD2; border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.target-condition-row__delete:hover { border-color:#F52A02; }
.target-condition-row__delete img { display:block; }

/* 예상 인원수 배지 (people icon + 텍스트) */
.target-estimate-badge { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; background:#E1FBFF; border-radius:100px; font-size:13px; color:var(--color-blue); white-space:nowrap; flex-shrink:0; }
.target-estimate-badge strong { font-weight:700; }

/* 총 수신자 수 요약 박스 (조건 추가 아래) */
.target-total-estimate { display:flex; align-items:center; gap:8px; padding:14px 20px; background:#EAF3FF; border-radius:8px; font-size:14px; color:var(--color-blue); }

/* 업데이트 방식 — 라디오 카드 2개 grid */
.update-method-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.update-method-card { display:flex; align-items:flex-start; gap:12px; padding:16px 20px; background:#fff; border:1px solid var(--border-color); border-radius:8px; cursor:pointer; }
.update-method-card--selected { border-color:var(--color-primary); background:#F4F9FF; }
.update-method-card__radio { margin-top:2px; flex-shrink:0; }
.update-method-card__body { display:flex; flex-direction:column; gap:6px; }
.update-method-card__title { font-size:14px; font-weight:600; color:var(--text-primary); }
.update-method-card__desc { font-size:12px; color:var(--text-primary); line-height:1.5; }

/* 상세보기 링크 (테이블 셀 안 텍스트+아이콘) */
.detail-link-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 10px; background:#fff; border:1px solid var(--border-color); border-radius:6px; font-size:12px; color:var(--text-primary); cursor:pointer; text-decoration:none; }
.detail-link-btn:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* 채널 칩 — send-type-chip 색상 변형 (이메일/문자/알림톡) */
.send-type-chip--email { background:#E1FBFF; color:#337EFE; border-color:transparent; }
.send-type-chip--sms   { background:#F1F1F1; color:#424242; border-color:transparent; }
.send-type-chip--talk  { background:#FFF4BC; color:#FF7700; border-color:transparent; }

/* 완료 토스트 모달 (W480) — 헤더 닫기만 + 중앙 토스트 아이콘 + 본문 + 풀폭 푸터 */
.alimtalk-toast__icon { width:64px; height:64px; background:rgba(33, 182, 132, 0.1); border-radius:16px; display:inline-flex; align-items:center; justify-content:center; }
.completion-modal__header--close-only { height:54px; justify-content:flex-end; border-bottom:0; }
.completion-modal .c-modal__content.completion-modal__body--toast { align-items:center; text-align:center; gap:0; padding-top:0; }
.completion-modal__body--toast .toast-msg { margin:30px 0; display:flex; flex-direction:column; gap:20px; }
.completion-modal__body--toast .toast-msg p { margin:0; }
.completion-modal__body--toast .toast-msg__primary { font-size:16px; font-weight:600; color:#222; }
.completion-modal__body--toast .toast-msg__primary strong { color:#21B684; font-weight:700; }
.completion-modal__body--toast .toast-msg__sub { font-size:15px; color:#424242; }
.completion-modal__body--toast .toast-msg p.toast-msg__desc { font-size:14px; color:#666; margin-top:-12px; }
.completion-modal__footer--flush { padding-top:0; }
/* 토스트 모달 안 키-값 정보 박스 (회색 라운드) */
.toast-info-box { background:#F7F8FA; border-radius:8px; padding:14px 20px; display:flex; flex-direction:column; gap:6px; align-self:center; min-width:240px; text-align:left; }
.toast-info-box__row { display:flex; gap:24px; text-align:left; }
.toast-info-box__label { flex-shrink:0; min-width:80px; font-size:13px; color:var(--text-tertiary); }
.toast-info-box__value { font-size:14px; color:var(--text-primary); }

/* ==================== 발송내역 — 캠페인 정보 카드 ==================== */
.dispatch-info-title { margin:0 0 16px; padding:0; border:0; font-size:20px; font-weight:700; color:var(--text-primary); line-height:1.3; }
.dispatch-info-bar { display:grid; grid-template-columns:auto auto auto auto 1fr; padding:20px 24px; background:#F7F7F7; border-radius:8px; align-items:center; }
.dispatch-info-bar__item { display:flex; flex-direction:column; gap:6px; position:relative; }
.dispatch-info-bar__item:nth-child(1) { padding-right:40px; }
.dispatch-info-bar__item:nth-child(2) { padding-left:40px; padding-right:40px; }
.dispatch-info-bar__item:nth-child(3) { padding-left:40px; padding-right:40px; }
.dispatch-info-bar__item:nth-child(4) { padding-left:40px; padding-right:24px; }
.dispatch-info-bar__item:nth-child(2)::before,
.dispatch-info-bar__item:nth-child(3)::before,
.dispatch-info-bar__item:nth-child(4)::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:#DDDDDD; }
.dispatch-info-bar__item--right { justify-self:end; text-align:right; }
.dispatch-info-bar__label { font-size:12px; color:var(--color-textgray); }
.dispatch-info-bar__value { font-size:14px;font-weight:500; color:var(--text-dark); }
.dispatch-info-bar__value--primary { color:var(--color-blue); font-weight:600; }

/* 발송내역 — 새로고침 버튼 (panel header 우측) */
.dispatch-refresh-btn { width:32px; height:32px; padding:0; background:#fff; border:1px solid var(--border-color); border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--text-secondary); }
.dispatch-refresh-btn:hover { color:var(--color-primary); border-color:var(--color-primary); }

/* ==================== 메시지 본문 컴포저 + 미리보기 ==================== */
/* 변수 칩 ({{이름}}, {{닉네임}} 등 — 메시지에 삽입 가능한 변수) */
.msg-var-chip { display:inline-flex; align-items:center; padding:8px 10px; border:1px solid var(--color-primary); border-radius:4px; background:#fff; font-size:12px; color:var(--color-blue); cursor:pointer; font-family:inherit; line-height:1.4; }

/* 메시지 본문 컴포저 (변수 칩 + textarea + 카운트) */
.msg-composer { position:relative; border:1px solid var(--border-color); border-radius:6px; background:#fff; }
.msg-composer__vars { display:flex; gap:6px; padding:10px 12px;background:#F5F5F5; }
.msg-composer__textarea { display:block; width:100%; min-height:80px; padding:14px 14px 28px 14px; border:none; outline:none; resize:vertical; font-family:inherit; font-size:13px; color:var(--text-primary); background:transparent; box-sizing:border-box; }
.msg-composer__textarea::placeholder { color:var(--text-placeholder); }
.msg-composer__count { position:absolute; bottom:8px; right:14px; font-size:12px; color:var(--text-tertiary); }

/* 설문폼 상세 — 타이틀바 공개여부 토글 그룹 */
.dashboard-bar__toggle-group { display:inline-flex; align-items:center; gap:8px; }
.dashboard-bar__toggle-label { font-size:14px; color:var(--text-secondary); }

/* textarea + 글자수 카운트 (우측 하단 배치) */
.textarea-count-wrap { position:relative; }
.textarea-count-wrap .detail-form__textarea { padding-bottom:32px; }
.textarea-count-wrap__count { position:absolute; bottom:10px; right:14px; font-size:12px; color:var(--text-tertiary); }

/* 폼 필드 한 줄 묶음 (input + button, 날짜 범위 등) */
.detail-form__field-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.detail-form__sub-label { font-size:14px; color:var(--text-secondary); flex-shrink:0; }
.detail-form__field-remove { width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border-color); border-radius:6px; cursor:pointer; flex-shrink:0; }
.detail-form__field-remove:hover { background:#F7F7F7; }

/* 설문폼 화면 설정 — 질문 블록 (드래그 헤더 + 패널) */
.question-block { display:flex; flex-direction:column; }
.question-block__head { display:flex; align-items:center; gap:10px; padding:8px 16px; background:#F5F5F5; border:1px solid var(--border-color); border-bottom:none; border-radius:8px 8px 0 0; }
.question-block__handle { width:20px; height:20px; padding:0; background:none; border:none; cursor:grab; display:inline-flex; align-items:center; justify-content:center; }
.question-block__type-name { font-size:14px; font-weight:600; color:var(--text-primary); }
.question-block__type-tag { font-size:13px; color:var(--text-secondary); }
.question-block__delete { margin-left:auto; width:24px; height:24px; padding:0; background:#F52A02; border:none; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.question-block__delete:hover { background:#D62300; }
.question-block .list-panel { border-radius:0 0 8px 8px; border-top:none; }
.question-block__subtitle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--border-color); }
.question-block__subtitle { font-size:15px; font-weight:600; color:var(--text-primary); }
.question-block__actions { display:inline-flex; align-items:center; gap:16px; }
.question-block__option-row { display:flex; align-items:center; gap:8px; }

/* 설문 작성 패널 안의 질문 블록 (헤더 + 본문 결합형) */
.survey-question { border:1px solid var(--border-color); border-radius:8px; overflow:hidden; margin-top:16px; }
.survey-question__head { display:flex; align-items:center; gap:10px; height:48px; padding:0 16px; background:#F5F5F5; }
.survey-question__handle { width:20px; height:20px; padding:0; background:none; border:none; cursor:grab; display:inline-flex; align-items:center; justify-content:center; }
.survey-question__type-name { font-size:14px; font-weight:600; color:var(--text-primary); }
.survey-question__type-tag { font-size:13px; color:var(--text-secondary); }
.survey-question__delete { margin-left:auto; width:20px; height:20px; padding:0; background:#F52A02; border:none; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.survey-question__delete:hover { background:#D62300; }
.survey-question__body { padding:24px; background:#fff; }
.survey-question__subtitle-row { display:flex; align-items:center; justify-content:space-between; gap:16px;}
.survey-question__subtitle { font-size:15px; font-weight:600; color:var(--text-primary); }
.survey-question__actions { display:inline-flex; align-items:center; gap:16px; }
/* 마케팅 툴 연동 — 2x2 카드 그리드 */
.tool-connect-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.tool-connect-card { padding:20px; border:1px solid var(--border-color); border-radius:8px; background:#fff; display:flex; flex-direction:column; gap:14px; }
.tool-connect-card__head { display:flex; align-items:center; gap:12px; }
.tool-connect-card__icon { width:40px; height:40px; flex-shrink:0; }
.tool-connect-card__text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tool-connect-card__title { font-size:15px; font-weight:700; color:var(--text-primary); }
.tool-connect-card__subtitle { font-size:12px; color:var(--text-secondary); }

/* 정산 금액 요약 패널 (정산 상세 페이지) */
.settlement-summary-panel { background:var(--bg-white); border-radius:8px; padding:16px 30px 30px 30px; box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.08); }

/* 정산 정보 미등록 빈 상태 */
.settle-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;padding:20px 20px 26px; }
.settle-empty__message { margin:0; font-size:14px; color:var(--text-secondary); }
.settlement-summary-panel .dashboard-bar__title { margin:0 0 12px; }

/* 정산 정보 등록 — 사이트 소유자 정보 (라벨 좌, 값 우) */
.settle-info-grid { display:flex; flex-direction:column; }
.settle-info-row { display:flex; align-items:flex-start; gap:24px; padding:14px 0; border-bottom:1px solid #F2F2F2; }
.settle-info-row:last-child { border-bottom:0; }
.settle-info-row__label { flex-shrink:0; width:130px; font-size:14px; font-weight:600; color:var(--text-primary); }
.settle-info-row__value { flex:1; font-size:14px; color:var(--text-primary); }

/* 입금 계좌 인증 결과 알림 */
.settle-notice { display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:6px; font-size:13px; }
.settle-notice--info { background:#E1FBFF; color:var(--color-blue); }
.settle-notice--error { background:#FFE5E0; color:#F52A02; }
.settle-notice .admin-infotip__icon { width:18px; height:18px; font-size:11px; }

/* 개인정보 수집 및 이용 안내 */
.settle-privacy { font-size:13px; color:var(--text-primary); line-height:1.7; }
.settle-privacy p { margin:0 0 12px; }
.settle-privacy__head { margin:16px 0 8px; font-size:13px; font-weight:700; color:var(--text-primary); }
.settle-privacy__list { margin:0 0 16px; padding-left:18px; list-style:disc; }
.settle-privacy__list li { margin-bottom:8px; }

/* 정산 상세 — 입금 계좌 번호 섹션 */
.settlement-bank-section { display:flex; flex-direction:column; gap:10px; margin-top:30px; margin-bottom:0; }

/* 정산 상태 칩 (아이콘 + 텍스트) */
.settle-chip { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:100px; font-size:12px; font-weight:600; white-space:nowrap; }
.settle-chip--pending { background:#FFF4E5; color:#FF7700; }
.settle-chip--done { background:#E2FFF3; color:#089253; }

/* 답변 보기 모달 — 응답자 답변 표시 (readonly + 보조색) */
.detail-form__input--answer,
.detail-form__textarea--answer { color:var(--text-secondary); background:#fff; cursor:default; }

/* 답변 보기 모달 — 정보 동의 / 응답 일시 섹션 */
.answer-info { margin-top:20px; }
.answer-info__title { margin:0 0 8px; font-size:14px; font-weight:700; color:var(--text-primary); }
.answer-info__text { margin:0; font-size:13px; color:var(--text-secondary); line-height:1.6; }
.answer-info__accent { color:var(--color-blue); }

/* 설문 참여 독려 모달 — 이미지 영역 + 설문 정보 */
.encourage-image { height:200px; background:#F5F5F5; display:flex; align-items:center; justify-content:center; }
.encourage-image__placeholder { color:#BBB; font-size:18px; }
.encourage-info { margin:16px 0 0; font-size:14px; color:var(--text-primary); line-height:1.8; }
.encourage-info__value { color:var(--color-blue); font-weight:500; }

/* 설문 작성 패널 안의 동의 섹션 (개인정보 수집/광고성 정보수신) */
.survey-agreement { margin-top:24px; }
.survey-agreement__head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.survey-agreement__title { font-size:15px; font-weight:700; color:var(--text-primary); }

/* input 우측에 아이콘 버튼 (복사 등) */
.input-with-icon-btn { position:relative; }
.input-with-icon-btn .detail-form__input { padding-right:44px; }
.input-with-icon-btn__btn { position:absolute; top:50%; right:6px; transform:translateY(-50%); width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; border-radius:4px; cursor:pointer; }
.input-with-icon-btn__btn:hover { background:#F7F7F7; }

/* 설문폼 미리보기 모달 */
.preview-form__logo { padding:0; height:80px; display:flex; align-items:center; justify-content:center; }
.preview-form__title { text-align:center; font-size:20px; font-weight:700; color:var(--text-primary); margin:0 0 12px; }
.preview-form__subtitle { text-align:center; font-size:13px; color:var(--text-secondary); margin:0 0 24px; }
.preview-form__heading-group { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:24px; }
.preview-form__heading-group .preview-form__title,
.preview-form__heading-group .preview-form__subtitle { margin:0; }
.preview-form__intro { min-height:200px; background:#F9F9F9; border-radius:6px; padding:20px; color:var(--text-secondary);}
.preview-form__fields { display:flex; flex-direction:column; gap:20px; }
.preview-form__desc { margin:0; font-size:12px; color:var(--text-secondary); }
.preview-form__options { display:flex; flex-direction:column; gap:8px; }
.preview-form__hint { font-size:12px; color:var(--text-tertiary); }
.preview-form__divider { border:none; border-top:1px solid var(--border-color); margin:0; }
.preview-form__consents { display:flex; flex-direction:column; gap:14px; }
.consent-item .c-checkbox { align-items:flex-start; }
.consent-item__link { color:var(--color-primary-light); text-decoration:underline; }
.consent-item__desc { display:none; margin:8px 0 0 26px; font-size:13px; color:var(--text-secondary); line-height:1.6; }
.consent-item.open .consent-item__desc { display:block; }

/* 메시지 미리보기 패널 (이메일/SMS/알림톡 공통) */
.msg-preview { width:360px; background:#FFF;border:1px solid var(--border-color); border-radius:12px 12px 30px 30px; padding:20px; }
/* 미리보기 모달/패널 내부에 들어갈 때는 컨테이너 폭에 맞춰 풀폭 */
.completion-modal .msg-preview,
.list-panel .msg-preview { width:100%; }
.msg-preview__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;border-bottom:1px solid var(--border-color); padding:8px 0; }
.msg-preview__label { font-size:14px; font-weight:600; color:var(--text-primary); }
.msg-preview__type { font-size:12px; color:var(--text-secondary); }
.msg-preview__count { margin-top:12px; text-align:center; font-size:12px; color:var(--text-secondary); }

/* 이메일 미리보기 */
.msg-preview__email-from { font-size:11px; color:var(--text-primary); margin-bottom:6px; }
.msg-preview__email-subject { font-size:14px; color:var(--text-dark);font-weight:500; padding-bottom:12px; }
.msg-preview__email-body { font-size:13px; color:var(--text-dark); min-height:80px; padding:12px 0 16px; }
.msg-preview__email-footer { padding-top:12px; border-top:1px solid var(--border-color); text-align:center; font-size:11px; color:var(--text-tertiary); }

/* 이메일 미리보기 바디 — 3 그룹 래퍼 (header / body / footer) */
.msg-preview__body-email { border:1px solid var(--border-color); border-radius:20px; overflow:hidden; background:#fff; }
.msg-preview__body-email .header { background:#f5f5f5; padding:14px 16px; }
.msg-preview__body-email .header .msg-preview__email-from { margin-bottom:4px; }
.msg-preview__body-email .header .msg-preview__email-subject { padding-bottom:0; }
.msg-preview__body-email .msg-preview__email-body { height:105px;padding:8px 15px; }
.msg-preview__body-email .msg-preview__email-footer { background:#f5f5f5; padding:8px 16px; border-top:0; }

/* SMS 미리보기 — 휴대폰 외곽 + 발신자 라벨 + 흰 말풍선 */
.msg-preview__sms-phone { min-height:200px;border:6px solid #1F2024; border-radius:24px; background:#E8EFFD; padding:20px 18px; }
.msg-preview__sms-brand { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:14px; }
.msg-preview__sms-bubble { display:inline-block; background:#fff; border-radius:12px 12px 12px 0; padding:14px 16px; font-size:14px; color:var(--text-dark); box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.msg-preview__sms-bubble p { margin:0; }

/* SEO 검색결과 미리보기 카드 */
.seo-preview-card { padding:30px 25px; border:1px solid var(--border-color); border-radius:20px; background:#fff; }
.seo-preview-card__top { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.seo-preview-card__name { font-size:11px; color:var(--text-dark); font-weight:700; line-height:1.3; }
.seo-preview-card__url { font-size:10px; color:var(--text-tertiary); line-height:1; }
.seo-preview-card__title { margin:0 0 6px; font-size:17px; font-weight:600; color:var(--color-purple); line-height:1.4; }
.seo-preview-card__desc { margin:0; font-size:13px; color:var(--text-secondary); line-height:1.5; }
.seo-preview-card__refresh { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; padding-top:12px; font-size:12px; color:var(--text-tertiary); }

/* 키워드 태그 입력 (검색 키워드 등 enter/쉼표로 칩 추가) */
.keyword-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 14px; border:1px solid var(--border-color); border-radius:6px; background:#fff; min-height:48px; cursor:text; }
.keyword-tags:focus-within { border-color:var(--color-primary); }
.keyword-tags__chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; background:#E1FBFF; border-radius:100px; font-size:13px; font-weight:600; color:var(--color-blue); line-height:1.2; }
.keyword-tags__chip--outline { background:#fff; border:1px solid var(--color-primary); color:var(--text-dark); font-weight:500; }

/* 서비스 이용 제한 / 락 인트로 페이지 */
.lock-intro { display:flex; flex-direction:column; align-items:center; text-align:center; padding:160px 24px 60px; min-height:100vh; box-sizing:border-box; background:#fff; }
.lock-intro__image { width:280px; height:auto; margin-bottom:38px; }
.lock-intro__title { margin:0 0 10px; font-size:20px; font-weight:600; color:var(--text-primary); line-height:1.4; }
.lock-intro__desc { margin:0 0 40px; font-size:15px; color:var(--text-secondary); line-height:1.6; }
.lock-intro__actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:24px; }
.lock-intro__note { margin:0; font-size:13px; color:var(--text-tertiary); }
.keyword-tags__chip-remove { width:14px; height:14px; padding:0; background:none; border:none; cursor:pointer; color:var(--text-tertiary); font-size:14px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.keyword-tags__chip-remove:hover { color:var(--text-primary); }
.keyword-tags__input { flex:1; min-width:160px; border:none; outline:none; background:transparent; font-size:13px; color:var(--text-primary); font-family:inherit; padding:4px 0; }
.keyword-tags__input::placeholder { color:var(--text-placeholder); }

/* 알림톡 미리보기 (카카오톡 스타일) — primary 박스 + 발신자 라벨 + 흰 카드 */
.msg-preview__talk-bubble { min-height:200px; background:var(--color-primary); padding:18px 16px; border-radius:20px; }
.msg-preview__talk-brand-label { display:block; font-size:13px; color:var(--text-primary); margin-bottom:14px; }
.msg-preview__talk-card {display:inline-block;background:#fff; padding:14px 20px; border-radius:12px 12px 12px 0; }
.msg-preview__talk-card-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.msg-preview__talk-logo { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; background:#6756ED; color:#fff; font-size:14px; font-weight:700; flex-shrink:0; }
.msg-preview__talk-card-header strong { font-size:13px; font-weight:600; color:#6756ED; }
.msg-preview__talk-card p { margin:0; font-size:13px; color:var(--text-dark); line-height:1.4; }

/* 세그먼트 탭 (segmented control: 2-3개 옵션 중 1개 선택) */
.c-segment-tab { display:flex; gap:8px; padding:0; background:#F7F7F7; border-radius:8px; }
.c-segment-tab__item { flex:1; padding:14px; background:transparent; border:none; border-radius:6px; font-size:14px; font-weight:500; color:var(--text-secondary); cursor:pointer; font-family:inherit; }
.c-segment-tab__item--active { background:var(--color-primary); color:#fff; font-weight:600; }

/* 발송 시뮬레이션 — 상단 3컬럼 정보 + 비용 요약 박스 */
.simulation-info { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-bottom:16px; }
.simulation-info__label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:8px; }
.simulation-info__value { font-size:14px; color:var(--text-primary); }
.simulation-info__value--primary { color:var(--color-blue); font-weight:700; }

.cost-box { display:grid; grid-template-columns:auto auto auto 1fr; padding:20px 24px; background:#F7F7F7; border-radius:8px; }
.cost-box__item { display:flex; flex-direction:column; gap:8px; position:relative; }
.cost-box__item:nth-child(1) { padding-right:40px; }
.cost-box__item:nth-child(2) { padding-left:40px; padding-right:40px; }
.cost-box__item:nth-child(3) { padding-left:40px; padding-right:24px; }
.cost-box__item:nth-child(2)::before,
.cost-box__item:nth-child(3)::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:#DDDDDD; }
.cost-box__item--right { text-align:right; }
.cost-box__value-sub-item { display:inline-flex; align-items:center; gap:4px; }
.cost-box__label { font-size:12px; color:var(--text-secondary); }
.cost-box__value { display:inline-flex; align-items:center; gap:5px; font-size:18px; font-weight:700; color:#6756ED; }
.cost-box__item--right .cost-box__value { justify-content:flex-end; }
.cost-box__value--primary { color:#6756ED; }
.cost-box__value-sub { display:inline-flex; align-items:center; gap:16px; font-size:14px; color:var(--text-primary); flex-wrap:wrap; }
.cost-box__value-sub strong { font-size:17px;font-weight:700;color:#6756ED }

/* 캠페인 복사 행 (라벨 + 드롭다운 + 불러오기 버튼) */
.campaign-copy-row { display:flex; align-items:center; gap:4px; }
.campaign-copy-row__label { font-size:14px; font-weight:600; color:var(--text-primary); flex-shrink:0;margin-right:8px; }
.campaign-copy-row .c-dropdown { flex:1; min-width:0; display:block; }
.campaign-copy-row .c-dropdown__trigger { width:100%; max-width:none; }

/* 월 구독료 - 읽기 전용 가격 표시 (₩ + 금액 + / 월) */
.plan-price-readonly { display:flex; align-items:center; gap:12px; }
.plan-price-readonly__currency { font-size:16px; font-weight:600; color:var(--text-primary); }
.plan-price-readonly__value { font-size:18px; font-weight:700; color:var(--text-dark); }
.plan-price-readonly__suffix { font-size:14px; color:var(--text-secondary); }

/* 우측 카테고리 태그 (선택된 카테고리 표시) */
.plan-category-tag-list { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.plan-category-tag { display:inline-flex; align-items:center; gap:8px; border-radius:6px; font-size:13px; line-height:1; color:var(--text-primary); width:fit-content; }
.plan-category-tag__remove { width:18px; height:18px; padding:0; margin-left:4px; background:none; border:none; cursor:pointer; color:var(--text-tertiary); font-size:16px; line-height:1; display:inline-flex; align-items:center; justify-content:center; font-family:Arial, sans-serif; }
.plan-category-tag__remove:hover { color:var(--text-primary); }

/* 모바일/태블릿: 1-컬럼으로 전환 */
@media (max-width: 1024px) {
    .plan-detail-layout { grid-template-columns:1fr; }
}

/* ==================== 커리큘럼 빌더 (Curriculum Builder) ====================
   5-column grid: drag(20) | label/drag(50) | input(1fr) | trash(24) | add-btn(110)
   - 섹션 헤더 행(--section): 트래시 없는 경우 add-btn이 col4부터 span 처리
   - 차시 행(--lesson): 상단 라인 + 좁은 상하 패딩
   ====================================================================== */
.curriculum-row { display:grid; grid-template-columns:20px 50px 1fr 24px 110px; gap:12px; align-items:center; }
.curriculum-row--section { padding-bottom:4px; }
.curriculum-row--boxed { background:#F4F5F7; padding:8px 15px; border-radius:6px; }
.curriculum-row--boxed ~ .curriculum-row--lesson { padding-left:15px; padding-right:15px; }
.curriculum-row--lesson { padding:4px 0; border-top:1px solid var(--border-color); }
.curriculum-row .row-drag { justify-self:start; }
.curriculum-row__label { font-weight:700; font-size:14px; color:var(--text-primary); }
.curriculum-row__add { display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:0; color:var(--text-primary); font-size:14px; }
.curriculum-row__add--span { grid-column:4 / 6; justify-self:start; }
.curriculum-row__delete { width:24px; height:24px; padding:0; background:none; border:none; cursor:pointer; }

/* ==================== 콘텐츠 등록 - 차시 아이템 (Content Lesson) ====================
   레이아웃 (세로 3단)
   - __head  : [차시번호] [차시제목]
   - __row   : [콘텐츠 선택 버튼] [맛보기 체크] (제목 라인에 맞춰 들여쓰기)
   - __file  : [아이콘] [파일명/URL] [AI 뱃지] [× 삭제]
   - __empty : "콘텐츠를 등록해 주세요" 안내 (콘텐츠 미선택 상태)
   ============================================================================ */
.content-lesson { padding:20px 16px; }
.content-lesson:last-child  { padding-bottom:0; }
.content-lesson + .content-lesson { border-top:1px solid var(--border-color); }
.content-lesson__head { display:flex; align-items:center; gap:16px; }
.content-lesson__num   { font-size:14px; font-weight:600; color:var(--text-primary); min-width:18px; }
.content-lesson__title { font-size:14px; color:var(--text-secondary); }
.content-lesson__row   { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-left:34px; margin-top:14px; }
.content-lesson__check { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--text-primary); cursor:pointer; }
.content-lesson__file  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-left:34px; margin-top:12px; }
.content-lesson__filename { font-size:13px; color:var(--text-primary); margin-right:4px; }
.content-lesson__delete { width:20px; height:20px; padding:0; background:none; border:none; cursor:pointer; color:var(--text-tertiary); font-size:18px; line-height:1; }
.content-lesson__empty  { font-size:13px; color:var(--text-tertiary); padding-left:34px; margin:12px 0 0; }
/* 편집형 차시 (커리큘럼 + 콘텐츠 통합) */
.content-lesson--editable { display:flex; align-items:flex-start; gap:12px; padding:14px 15px; }
.content-lesson--editable .row-drag { align-self:center; flex-shrink:0; }
.content-lesson__body { flex:1; min-width:0; padding-left:62px; display:flex; flex-direction:column; gap:12px; }
.content-lesson__title-row { display:flex; align-items:center; gap:12px; }
.content-lesson__title-row .setting-table__input-count-wrap { flex:1; min-width:0; }
.content-lesson__toggle-area { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; width:110px; flex-shrink:0; font-size:13px; color:var(--text-secondary); cursor:pointer; }
.content-lesson--editable .content-lesson__row,
.content-lesson--editable .content-lesson__file,
.content-lesson--editable .content-lesson__empty { padding-left:0; margin-top:0; }

/* 패널 내부 섹션 소제목 (h4) — 회색 타이틀바, 패널 좌우 30px 안쪽으로 들어옴, 6px 라운드 */
.panel-section-subtitle { font-size:15px; font-weight:600; color:var(--text-primary); margin:24px 0 0; padding:15px; background:#F4F5F7; border:none; border-radius:6px; }
.panel-section-title + .panel-section-subtitle { margin-top:16px; }

/* ==================== 콘텐츠 선택 모달 (Content Select) ====================
   검색 + 필터 + 결과 리스트 (회색 배경 + 라운드)
   ========================================================================== */
.content-select__filter { display:flex; align-items:center; gap:4px;}
.content-select__search { flex:1; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border:1px solid #DDDDDD; border-radius:6px; background:#fff; }
.content-select__search input { flex:1; border:none; outline:none; background:none; font-size:14px; color:var(--text-primary); font-family:inherit; }
.content-select__search input::placeholder { color:var(--text-placeholder); }
.content-select__list { padding:14px; background:#F4F5F7; border-radius:8px; }
.content-select__list-head { display:flex; align-items:center; justify-content:space-between; padding:8px 4px 10px; }
.content-select__list-title { font-size:13px; font-weight:600; color:var(--text-primary); }
.content-select__list-clear { width:20px; height:20px; padding:0; background:none; border:none; cursor:pointer; color:var(--text-tertiary); font-size:16px; line-height:1; }
.content-select__items { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.content-select__item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:6px; cursor:pointer; }
.content-select__item:hover { background:#fff; }
.content-select__item--active { background:#EBF3FF; }
.content-select__item__name { font-size:14px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.content-select__item__badges { display:inline-flex; align-items:center; gap:4px; }

/* ==================== 상품 생성 - 결제 설정 (Payment) ====================
   좌측 폼 패널 + 우측 결제 금액 사이드바 (.two-col-layout 사용)
   ========================================================================== */
.payment-summary { display:flex; flex-direction:column; gap:14px; }
.payment-summary__row { display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.payment-summary__row-label { font-size:16px;font-weight:600; color:var(--text-dark); }
.payment-summary__row-value { font-size:18px; font-weight:700; color:var(--text-primary); }
.payment-summary__row-unit { font-size:14px; color:#A0A0A0; font-weight:500; margin-left:2px; }
.payment-summary__total { display:flex; justify-content:flex-end; align-items:baseline; gap:8px; padding-top:18px; border-top:1px solid var(--border-color); }
.payment-summary__total-badge { font-size:17px; font-weight:700; color:#FF0000; }
.payment-summary__total-text { font-size:14px; font-weight:400; color:#FF0000; }
.payment-summary__total-amount { font-size:36px; font-weight:700; color:var(--text-primary); letter-spacing:-0.02em; }
.payment-summary__total-amount-unit { font-size:17px; font-weight:500; margin-left:2px; color:var(--text-primary); }
.payment-summary__total-amount--free { color:#2BACF4; line-height:1.2; }
.payment-summary__total-note { font-size:13px; color:var(--color-blue); margin-left:7px; }
.payment-actions { display:flex; justify-content:flex-end; gap:4px; margin-top:15px; }

/* ==================== 팝업 미리보기 프레임 (PC / Mobile) ==================== */
.preview-frame { min-height:100vh; background:#4A4A52; display:flex; flex-direction:column; }
.preview-toolbar { display:flex; justify-content:center; align-items:center; gap:32px; padding:24px 0; }
.preview-toolbar__btn { width:64px; height:64px; padding:0; background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; opacity:0.3; transition:opacity 0.15s; }
.preview-toolbar__btn--active { opacity:1; }
.preview-stage { flex:1; background:#A0A0A0; position:relative; padding:60px; }
.preview-stage--mobile { display:flex; justify-content:center; align-items:center; padding:40px; }

/* 팝업 카드 (공통) */
.popup-preview { background:#fff; border-radius:4px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.15); width:320px; }
.popup-preview__image { display:block; width:100%; height:auto; }
.popup-preview__footer { display:flex; gap:6px; padding:12px; }
.popup-preview__footer .btn { flex:1; }

/* PC stage 보조 요소 */
.preview-stage__page-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#FF0000; font-size:16px; font-weight:500; }
.preview-stage__outside-btn { display:block; margin-top:16px; }

/* 모바일 가상 디바이스 프레임 */
.device-frame { width:380px; min-height:760px; background:#C5C9CE; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 30px; box-sizing:border-box; }
.device-frame .popup-preview { width:100%; max-width:300px; }

/* ==================== 반응형 (Responsive) ====================
   PC 우선 작성 + 모바일·태블릿 미디어 쿼리 보정
   - 모바일: max-width: 768px
   - 태블릿: max-width: 1024px
   ============================================================ */

/* LNB 햄버거 토글 버튼 (모바일에서만 노출) */
.admin-header__menu-toggle { display:none; }

/* LNB 백드롭 (모바일 LNB 오픈 시 본문 어둡게) */
.admin-lnb__backdrop { display:none; }

/* ──────────────── 태블릿 (max-width: 1024px) ──────────────── */
@media (max-width: 1024px) {
    /* 폼 — 2열 → 1열 */
    .detail-form__grid { grid-template-columns: 1fr; }

    /* 작업 영역 좌우 패딩 축소 */
    .admin-body { padding-left: 20px; padding-right: 20px; }

    /* 크레딧 정보 — 가로 → 세로 스택 */
    .credit-info { flex-direction: column; align-items: stretch; gap: 16px; }
}

/* ──────────────── 모바일 (max-width: 768px) ──────────────── */
@media (max-width: 768px) {

    /* ───── 레이아웃: LNB 토글 (slide-in은 위 3268~3275 규칙에서 처리) ───── */
    .admin-wrap { flex-direction: column; }
    .admin-lnb__backdrop {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.4); z-index: 50;
    }
    .admin-lnb--open ~ .admin-lnb__backdrop,
    .admin-lnb__backdrop--open { display: block; }
    .admin-header__menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; background: none; border: none; cursor: pointer;
    }
    .admin-content { width: 100%; margin-left: 0; }
    .admin-body { padding: 16px; }

    /* ───── 헤더: 검색창 축소 ───── */
    .admin-header__search { display: none; }

    /* ───── 테이블: 가로 스크롤 ───── */
    .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-table, .tab-table { min-width: 720px; }

    /* ───── 폼: 1열 + 라벨/입력 세로 스택 ───── */
    .detail-form__grid { grid-template-columns: 1fr; gap: 16px; }
    .detail-form__field { gap: 8px; }

    /* ───── 크레딧: 라벨/금액 세로 스택 ───── */
    .credit-info__amount-wrap { flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 0; }

    /* ───── 체크박스 리스트: 세로 스택 ───── */
    .setting-check-row { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* ───── 모달: 화면 폭 100% (오버레이 모드일 때만) ───── */
    .c-modal-overlay .c-modal { width: calc(100vw - 32px); max-width: 100%; }
    .c-modal__footer .btn.big,
    .c-modal__footer .btn.lg { min-width: 0; }
    .c-modal-overlay .completion-modal--lg,
    .c-modal-overlay .completion-modal--xl { width: calc(100vw - 32px); }

    /* ───── 액션바·벌크바: 줄바꿈 허용 ───── */
    .admin-action-bar { flex-wrap: wrap; gap: 8px; }
    .c-bulk-bar { flex-wrap: wrap; padding: 12px 16px; }
    .c-bulk-bar__actions { flex-wrap: wrap; }

    /* ───── 패널 패딩 축소 ───── */
    .list-panel { padding: 16px; }
    .list-panel--p30 { padding: 20px 16px; }
    .list-panel--p24-30 { padding: 16px; }

    /* ───── 패널 타이틀: 줄어든 padding에 맞춰 음수 margin 조정 ───── */
    .panel-title { margin: 0 -16px 20px; padding: 0 16px 16px; }

    /* ───── 스텝퍼: 줄바꿈 ───── */
    .step-tabs { padding: 16px; }
    .step-tabs__line { display: none; }

    /* ───── 헤더 정보 영역 축소 ───── */
    .admin-header__btns { display: none; }
    .admin-header__username { display: none; }

    /* ───── 통계 카드 그리드: 2열 ───── */
    .count-card-grid,
    [class*="stat-card"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==================== Responsive: Small Mobile (≤480px) ==================== */
@media (max-width: 480px) {
    /* 모든 통계 카드 1열 */
    .admin-grid--4,
    .admin-grid--3,
    .admin-grid--2,
    .count-card-grid,
    .count-card-grid--3,
    .count-card-grid--2,
    .modal-dashboard { grid-template-columns: 1fr !important; }

    /* 콘텐츠 목록 바: 폴더관리·콘텐츠등록 버튼 줄바꿈 */
    .content-list-bar__right { flex-wrap: wrap; }
    .content-list-bar__right .btn { flex: 1 1 calc(50% - 2px); }

    /* 폴더 관리: 관리 셀 폭 축소 */
    .folder-mgmt-header__manage,
    .folder-mgmt-row__actions { width: 44px; }

    /* 유튜브 링크 추가: 추가 버튼 줄바꿈 */
    .yt-add-row { flex-wrap: wrap; }
    .yt-add-row .setting-table__input { flex: 1 1 100%; }
    .yt-add-row__btn { width: 100%; }

    /* setting-table 전체 폭 + th 폭 축소 */
    .setting-table { width: 100%; margin: 0; }
    .setting-table th { width: 90px; padding: 12px 12px; }
    .setting-table td { padding: 12px 12px; }

    /* 업로드 리스트 헤더: 제목/콘텐츠 용량 세로 배치 */
    .upload-list__head { flex-direction: column; align-items: flex-start; gap: 0; }
    .upload-list__head .upload-storage-info { padding-top: 0; }

    /* 게시판 권한 설정: 라벨·라디오 세로 배치 */
    .board-perm-row { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* 업로드 리스트 본문: 좌우 패딩 축소 */
    .upload-list-body { padding: 0 12px 20px; }

    /* AI 크레딧 바: 버튼까지 세로 정렬 */
    .ai-credit-bar { flex-direction: column; align-items: stretch; }

    /* 주문 상품 카드: 썸네일 + 정보 세로 줄바꿈 */
    .order-product-card { flex-direction: column; }

    /* 폼 그리드 1열 강제 (인라인 3열 포함) */
    .detail-form__grid { grid-template-columns: 1fr !important; }

    /* 버튼 좌우 패딩 축소 */
    .btn.big { min-width:0; padding: 0 16px; }
    .btn.lg  { padding: 0 14px; }
    .btn.nm  { padding: 0 12px; }
    .btn.md  { padding: 0 10px; }
    .btn.sm  { padding: 0 8px; }

    /* 상단 가이드 버튼 숨김 */
    .admin-header .btn.xs.dark { display: none !important; }

    /* 프로필바: 아바타 아래에 메타정보 세로 배치 */
    .detail-profile__top { flex-direction: column; align-items: center; text-align: center; }
    .detail-profile__name-row,
    .detail-profile__meta { justify-content: center; }

    /* 탭메뉴 텍스트 12px + 좌우 패딩 축소 */
    .detail-tab__item { font-size: 12px; padding: 0 11px; }

    /* 패널 헤더: 타이틀 아래로 드롭다운 배치 */
    .list-panel__header { flex-direction: column; align-items: flex-start; }

    /* 상품후기 요약: 총점 영역 축소해 프로그래스바 노출 */
    .review-summary { gap: 16px; padding: 20px 16px; }
    .review-summary__overall { min-width: 0; gap: 4px; }
    .review-summary__score { font-size: 32px; }

    /* 하단 플로팅바 버튼 축소 */
    .c-bulk-bar__btn { height: 34px; padding: 8px 14px; font-size: 12px; }

    /* 모달 목록 테이블 가로 스크롤 */
    .modal-table-wrap .modal-table { min-width: 480px; }

    /* 스텝퍼 2열 */
    .step-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; justify-items: start; }

    /* 랜딩 상품 카드 1열 */
    .lp-pcard-grid { grid-template-columns: 1fr; }

    /* 적용 쿠폰 1열 + 내부 텍스트 세로 배치 */
    .lp-coupon-grid { grid-template-columns: 1fr; }
    .lp-coupon-row { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* 차시 추가 텍스트 숨김 + 인풋 영역이 빈 공간 흡수 */
    .curriculum-row__add-text { display: none; }
    .curriculum-row { grid-template-columns: 20px 50px 1fr 24px auto; }

    /* 차시 이용중지 토글은 다음 줄로 */
    .content-lesson__title-row { flex-wrap: wrap; }
    .content-lesson__toggle-area { order: 99; width: 100%; justify-content: flex-start; }

    /* 멤버십 플랜 카드 1열 */
    .plan-card-grid { grid-template-columns: 1fr; }

    /* 콘텐츠 체크박스 리스트 세로 나열 */
    .content-lesson__row { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* 2단 레이아웃 → 세로 스택 */
    .two-col-layout { flex-direction: column; align-items: stretch; }
    .two-col-layout__col { width: 100%; }

    /* 모달 검색바: 검색+드롭다운 세로 스택 */
    .search-filter-bar,
    .content-select__filter { flex-direction: column; align-items: stretch; }
    .search-filter-bar > *,
    .content-select__filter > * { width: 100% !important; flex: 0 0 auto !important; }
    .search-filter-bar .c-dropdown__trigger,
    .content-select__filter .c-dropdown__trigger { max-width: none; }

    /* 메시지 미리보기/리치텍스트 에디터: 가로 스크롤·고정폭 방지 */
    .msg-preview { width: 100% !important; max-width: 100%; box-sizing: border-box; }
    .rt-editor__toolbar { flex-wrap: wrap; row-gap: 4px; }
}

/* ============================================================ */
/* BUILDER DESIGN SYSTEM (bd-*)                                 */
/* 사이트 빌더(site/page) 전용 컴포넌트. 기존 클래스와 분리 운용. */
/* ============================================================ */
:root {
    --bd-blue: #027CFA;
    --bd-blue-light: #4FC0FC;
    --bd-border: #DFE0E3;
    --bd-border-light: #EAEAEA;
    --bd-border-area: #E0E0E0;
    --bd-disabled-bg: #F2F2F2;
    --bd-disabled-bg2: #F5F5F5;
    --bd-disabled-text: #C7C7C7;
    --bd-disabled-text2: #A0A0A0;
    --bd-placeholder: #AAAAAA;
    --bd-text: #222222;
    --bd-text-dark: #333333;
    --bd-error: #FF0000;
    --bd-hint: #DB2853;
    --bd-premium: #FF7700;
    --bd-badge-border: #B6B6B6;
    --bd-badge-text: #424242;
    --bd-fill-bg: #F9F9F9;
    --bd-counter: #757575;
    --bd-label-gray: #808080;
    --bd-tab-bg: #F2F3F7;
    --bd-tab-text: #A5A9B0;
    --bd-section-label: #888888;
}

/* 마스크 아이콘 (currentColor 추종) */
.bd-ico { display:inline-block; flex:none; background-color:currentColor;
    -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.bd-ico--del { width:16px; height:16px;
    -webkit-mask-image:url(../src/images/ico-16px-delete.svg); mask-image:url(../src/images/ico-16px-delete.svg); }
.bd-ico--plus { width:16px; height:16px;
    -webkit-mask-image:url(../src/images/ico-16px-plus03.svg); mask-image:url(../src/images/ico-16px-plus03.svg); }

/* ---- 인풋 ---- */
.bd-input { display:flex; align-items:center; gap:6px; box-sizing:border-box;
    width:100%; height:32px; padding:0 12px 0 15px;
    border:1px solid var(--bd-border); border-radius:4px; background:#fff;
    font:400 13px/1.5 Pretendard, sans-serif; color:var(--bd-text);
    letter-spacing:-0.02em; }
.bd-input__field { flex:1; min-width:0; padding:0; border:0; background:transparent;
    font:inherit; color:inherit; outline:none; }
.bd-input__field::placeholder { color:var(--bd-placeholder); }
.bd-input__close { flex:none; width:16px; height:16px; padding:0; border:0; cursor:pointer;
    background:none; line-height:0; color:#BFBFBF; }
.bd-input__warn { flex:none; width:16px; height:16px; }
.bd-input--filled { background:var(--bd-fill-bg); border-color:var(--bd-border-light); }
.bd-input--focus { border-color:var(--bd-blue); }
.bd-input--error { border-color:var(--bd-error); }
.bd-input--disabled { background:var(--bd-disabled-bg); border-color:var(--bd-disabled-bg); }
.bd-input--disabled .bd-input__field { color:var(--bd-disabled-text); }
.bd-input--disabled .bd-input__field::placeholder { color:var(--bd-disabled-text); }

/* ---- 셀렉트 ---- */
.bd-select { display:flex; align-items:center; justify-content:space-between; gap:6px;
    box-sizing:border-box; width:100%; height:32px; padding:0 8px 0 15px;
    border:1px solid var(--bd-border); border-radius:4px; background:#fff; cursor:pointer;
    font:400 13px/1.5 Pretendard, sans-serif; color:var(--bd-text); letter-spacing:-0.02em; }
.bd-select__text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-select__arrow { flex:none; width:24px; height:24px; }
.bd-select--placeholder .bd-select__text { color:var(--bd-placeholder); }
.bd-select--focus { border-color:var(--bd-blue); }
.bd-select--error { border-color:var(--bd-error); }
.bd-select--disabled { background:var(--bd-disabled-bg); border-color:var(--bd-disabled-bg); cursor:default; }
.bd-select--disabled .bd-select__text { color:var(--bd-disabled-text); }

/* ---- 검색 행 (셀렉트/인풋 + 버튼) ---- */
.bd-search-row { display:flex; align-items:center; gap:4px; }
.bd-search-row--gap8 { gap:8px; }
.bd-search-row > .bd-input, .bd-search-row > .bd-select { flex:1; }

/* ---- 버튼: 추가(작은 채움) ---- */
.bd-btn-add { display:inline-flex; align-items:center; justify-content:center;
    min-width:52px; height:32px; padding:0 16px; border:0; border-radius:4px; cursor:pointer;
    background:var(--color-primary); color:#fff;
    font:700 11px/1.19 Pretendard, sans-serif; }
.bd-btn-add:hover, .bd-btn-add--hover { background:var(--bd-blue); }
.bd-btn-add--light { background:var(--color-primary); }
.bd-btn-add--disabled { background:var(--bd-disabled-bg2); color:var(--bd-disabled-text2); cursor:default; }
.bd-btn-add--disabled:hover { background:var(--bd-disabled-bg2); color:var(--bd-disabled-text2); }

/* ---- 버튼: 블루라인(빈페이지로 만들기 / 주소 검색) ---- */
.bd-btn-blueline { display:inline-flex; align-items:center; justify-content:center;
    box-sizing:border-box; min-width:52px; height:32px; padding:0 20px; cursor:pointer;
    border:1px solid var(--bd-blue-light); border-radius:4px; background:#fff;
    color:var(--bd-blue); font:500 12px/1.5 Pretendard, sans-serif; letter-spacing:-0.02em; }
.bd-btn-blueline:hover, .bd-btn-blueline--hover {
    background:var(--bd-blue); color:#fff; font-weight:600; }
.bd-btn-blueline--disabled { border-color:var(--bd-disabled-bg2); background:var(--bd-disabled-bg2);
    color:var(--bd-disabled-text2); cursor:default; }
.bd-btn-blueline--disabled:hover { background:var(--bd-disabled-bg2); color:var(--bd-disabled-text2); font-weight:500; }

/* ---- 버튼: 라인(파일 업로드) ---- */
.bd-btn-line { display:inline-flex; align-items:center; justify-content:center;
    box-sizing:border-box; min-width:52px; height:32px; padding:0 20px; cursor:pointer;
    border:1px solid var(--bd-badge-border); border-radius:4px; background:#fff;
    color:var(--bd-text-dark); font:400 12px/1.5 Pretendard, sans-serif; letter-spacing:-0.02em; }
.bd-btn-line:hover, .bd-btn-line--hover {
    border-color:var(--bd-blue); color:var(--bd-blue); font-weight:500; }
.bd-btn-line--disabled { border-color:var(--bd-disabled-bg2); background:var(--bd-disabled-bg2);
    color:var(--bd-disabled-text2); cursor:default; }
.bd-btn-line--disabled:hover { border-color:var(--bd-disabled-bg2); color:var(--bd-disabled-text2); font-weight:400; }

/* ---- 버튼: 블록 삭제(아이콘+텍스트, 레드) ---- */
.bd-btn-del { display:inline-flex; align-items:center; justify-content:center; gap:4px;
    box-sizing:border-box; min-width:52px; height:32px; padding:0 20px; cursor:pointer;
    border:1px solid var(--bd-error); border-radius:4px; background:#fff;
    color:var(--bd-error); font:500 12px/1.5 Pretendard, sans-serif; letter-spacing:-0.02em; }
.bd-btn-del:hover, .bd-btn-del--hover { background:var(--bd-error); color:#fff; }
.bd-btn-del--disabled { border-color:var(--bd-disabled-bg2); background:var(--bd-disabled-bg2);
    color:var(--bd-disabled-text2); cursor:default; }
.bd-btn-del--disabled:hover { background:var(--bd-disabled-bg2); color:var(--bd-disabled-text2); }

/* ---- 버튼: 버튼추가(아이콘+텍스트, 플러스) ---- */
.bd-btn-plus { display:inline-flex; align-items:center; justify-content:center; gap:6px;
    box-sizing:border-box; min-width:52px; height:32px; padding:0 20px; cursor:pointer;
    border:1px solid var(--bd-badge-border); border-radius:4px; background:#fff;
    color:var(--bd-text-dark); font:400 12px/1.5 Pretendard, sans-serif; letter-spacing:-0.02em; }
.bd-btn-plus:hover, .bd-btn-plus--hover { border-color:var(--bd-blue); color:var(--bd-blue); font-weight:500; }
.bd-btn-plus--disabled { border-color:var(--bd-disabled-bg2); background:var(--bd-disabled-bg2);
    color:var(--bd-disabled-text2); cursor:default; }
.bd-btn-plus--disabled:hover { border-color:var(--bd-disabled-bg2); color:var(--bd-disabled-text2); font-weight:400; }

/* ---- 세그먼트(좌/우/중간/아래) ---- */
.bd-segment { display:flex; gap:4px; }
.bd-segment__item { flex:1; display:flex; align-items:center; justify-content:center;
    box-sizing:border-box; height:32px; padding:0 10px; cursor:pointer;
    border:1px solid transparent; border-radius:4px; background:var(--bd-disabled-bg2);
    color:var(--bd-disabled-text2); font:400 12px/1.5 Pretendard, sans-serif; letter-spacing:-0.02em; }
.bd-segment__item--active { background:#fff; border-color:var(--bd-placeholder); color:var(--bd-text-dark); }

/* ---- 탭(템플릿 선택 / 섹션 선택) ---- */
.bd-tab { display:flex; width:100%; height:36px; border-radius:6px 6px 0 0; overflow:hidden; }
.bd-tab__item { flex:1; display:flex; align-items:center; justify-content:center;
    position:relative; cursor:pointer; background:var(--bd-tab-bg);
    color:var(--bd-tab-text); font:400 13px/1.5 Pretendard, sans-serif; letter-spacing:-0.02em; }
.bd-tab__item--active { background:#fff; color:var(--bd-text-dark); font-weight:600; }
.bd-tab__item--active::after { content:""; position:absolute; left:0; right:0; bottom:0;
    height:3px; background:var(--bd-blue-light); }

/* ---- 텍스트영역 ---- */
.bd-textarea { position:relative; display:block; box-sizing:border-box; width:100%; min-height:100px;
    padding:12px 15px 28px; border:1px solid var(--bd-border-area); border-radius:6px; background:#fff; }
.bd-textarea__field { display:block; width:100%; min-height:60px; padding:0; border:0; resize:none;
    background:transparent; outline:none; font:400 12px/1.5 Pretendard, sans-serif;
    color:var(--bd-text); letter-spacing:-0.02em; }
.bd-textarea__field::placeholder { color:var(--bd-disabled-text); }
.bd-textarea__counter { position:absolute; right:15px; bottom:12px;
    font:400 11px/1.19 Pretendard, sans-serif; color:var(--bd-counter); }

/* ---- 태그 행({카테고리명} {상품명} 등) ---- */
.bd-tag { display:flex; align-items:center; justify-content:space-between; gap:10px;
    box-sizing:border-box; width:100%; height:32px; padding:0 10px 0 15px;
    border:1px solid var(--bd-border-light); border-radius:4px; background:var(--bd-fill-bg); }
.bd-tag__main { display:flex; align-items:center; gap:6px; min-width:0; }
.bd-tag__text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font:400 12px/1.5 Pretendard, sans-serif; color:var(--bd-text); letter-spacing:-0.02em; }
.bd-tag__badge { display:inline-flex; align-items:center; padding:2px 4px 3px;
    border:0.5px solid var(--bd-badge-border); border-radius:2px;
    font:600 10px/1.19 Pretendard, sans-serif; color:var(--bd-badge-text); }
.bd-tag__badge--premium { border-color:var(--bd-premium); color:var(--bd-premium); }
.bd-tag__close { flex:none; width:16px; height:16px; padding:0; border:0; cursor:pointer;
    background:none; line-height:0; color:#BFBFBF; }

/* ---- 안내 문구(레드) ---- */
.bd-hint { margin:0; font:400 11px/1.19 Pretendard, sans-serif; color:var(--bd-hint); }

/* ---- 체크박스(텍스트) ---- */
.bd-check { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.bd-check__box { -webkit-appearance:none; appearance:none; flex:none; width:20px; height:20px; margin:0;
    border:1.5px solid #CCCCCC; border-radius:4px; background:#fff; cursor:pointer; vertical-align:middle; }
.bd-check__box:checked { border-color:transparent;
    background:url('../src/images/ico-checked-basic.svg') no-repeat center / 26px 26px; }
.bd-check__text { font:400 12px/1.5 Pretendard, sans-serif; color:var(--bd-text); letter-spacing:-0.02em; }
.bd-check--disabled { cursor:default; }
.bd-check--disabled .bd-check__box { opacity:.45; cursor:default; }
.bd-check--disabled .bd-check__text { color:var(--bd-disabled-text); }

/* ---- 색상 행(배경색/버튼색/글자색) ---- */
.bd-color-field { display:flex; flex-direction:column; gap:6px; }
.bd-color-field__label { font:500 12px/1.5 Pretendard, sans-serif; color:var(--bd-text); letter-spacing:-0.02em; }
.bd-color-row { display:flex; align-items:center; gap:8px; }
.bd-color-row__head { display:flex; align-items:center; gap:6px; flex:none; }
.bd-color-row__name { font:400 11px/1.19 Pretendard, sans-serif; color:var(--bd-label-gray); }
.bd-swatch { flex:none; display:flex; width:36px; height:28px; padding:6px; box-sizing:border-box;
    border:1px solid var(--bd-border-light); border-radius:4px; background:#fff; }
.bd-swatch--wide { width:71px; }
.bd-swatch__color { flex:1; border-radius:2px; }
.bd-rgb-group { display:flex; flex:1; gap:4px; }
.bd-rgb-input { flex:1; display:flex; align-items:center; justify-content:center;
    box-sizing:border-box; height:32px; padding:0 8px;
    border:1px solid var(--bd-border-light); border-radius:4px; background:#fff;
    font:400 12px/1.5 Pretendard, sans-serif; color:var(--bd-badge-text); letter-spacing:-0.02em; }
.bd-rgb-input--sm { height:28px; }

/* ---- 슬라이더(높이/텍스트 크기) ---- */
.bd-slider-field { display:flex; flex-direction:column; gap:6px; }
.bd-slider-field__label { font:500 12px/1.5 Pretendard, sans-serif; color:var(--bd-text); letter-spacing:-0.02em; }
.bd-slider-field__label--sub { font-weight:400; font-size:11px; color:var(--bd-label-gray); }
.bd-slider-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bd-slider { position:relative; flex:1; height:3px; border-radius:100px; background:var(--bd-border-light); }
.bd-slider__fill { position:absolute; left:0; top:0; height:100%; border-radius:100px; background:var(--bd-blue); }
.bd-slider__thumb { position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
    background:var(--bd-blue); transform:translate(-50%, -50%); }
.bd-slider-value { display:flex; align-items:center; gap:4px; flex:none; }
.bd-slider-value__input { display:flex; align-items:center; justify-content:center;
    box-sizing:border-box; width:70px; height:32px; padding:0 8px;
    border:1px solid var(--bd-border-light); border-radius:4px; background:#fff;
    font:400 12px/1.5 Pretendard, sans-serif; color:var(--bd-text); letter-spacing:-0.02em; }
.bd-slider-value__unit { font:400 12px/1.5 Pretendard, sans-serif; color:var(--bd-text-dark); }

/* ---- 빌더 페이지 레이아웃(좌우 2단) ---- */
.bd-page { display:flex; flex-direction:column; min-height:100vh; background:#fff; }
.bd-page__header { display:flex; height:60px; border-bottom:1px solid var(--bd-border-light); background:#fff; }
.bd-page__header-left { display:flex; align-items:center; gap:8px; width:480px; padding:0 24px;
    border-right:1px solid var(--bd-border-light); }
.bd-page__header-right { flex:1; display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:0 24px; }
.bd-page__title { margin:0; font:700 16px/1.5 Pretendard, sans-serif; color:var(--bd-text);
    letter-spacing:-0.02em; }
.bd-page__pagename { margin:0; font:500 14px/1.5 Pretendard, sans-serif; color:var(--bd-text); }
.bd-page__actions { display:flex; align-items:center; gap:8px; }
.bd-page__spacer { flex:1; }
.bd-page__back { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
    padding:0; border:0; background:none; cursor:pointer; }
.bd-page__body { flex:1; display:flex; min-height:0; }
.bd-page__aside { width:480px; box-sizing:border-box; padding:20px; background:#F8F9FB;
    box-shadow:0 2px 8px 0 rgba(0,0,0,0.06);
    display:flex; flex-direction:column; gap:14px; }
.bd-page__canvas { flex:1; padding:40px; background:#EAEEF4; }
.bd-page__canvas-inner { display:flex; flex-direction:column; gap:0; }

/* ---- 가이드 chip ---- */
.bd-chip-guide { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 8px;
    border-radius:12px; background:var(--bd-disabled-bg2);
    font:500 12px/1 Pretendard, sans-serif; color:var(--bd-text-dark); letter-spacing:-0.02em; }
.bd-chip-guide__ico { width:14px; height:14px; }

/* ---- 빌더 캔버스 섹션 블록 ---- */
.bd-section { position:relative; display:flex; align-items:center; justify-content:center;
    min-height:280px; padding:24px; background:#F9F9F9; border:1px solid #E0E0E0;
    box-shadow:0 3.898px 3.898px 0 rgba(0,0,0,0.25);
    font:500 14px/1.5 Pretendard, sans-serif; color:var(--bd-text); letter-spacing:-0.02em; }
.bd-section + .bd-section { margin-top:-1px; }
.bd-section--active { border:4px solid var(--color-primary); border-radius:6px; }
.bd-section__drag { position:absolute; right:42%; top:50%; transform:translate(50%, 18px); width:20px; height:20px; }

/* ---- 빌더 페이지 전용 유틸 ---- */
.bd-btn-add--lg { height:36px; padding:0 14px; font-size:12px; }
.bd-btn-blueline--full { width:100%; }
.bd-btn-line--full { width:100%; }
.bd-btn-plus--full { width:100%; }
.bd-btn-del--full { width:100%; }
.bd-aside-panel { padding:20px; background:#fff; border-radius:0 0 6px 6px; }

/* ---- 섹션 에디터(공통) ---- */
.bd-editor { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.bd-editor__header { position:relative; display:flex; align-items:center; justify-content:center;
    height:36px; padding:0 16px; background:var(--color-primary); border-radius:0; }
.bd-editor__menu { position:absolute; left:12px; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center; width:28px; height:28px;
    padding:0; border:0; background:transparent; cursor:pointer; }
.bd-editor__title { font:600 14px/1 Pretendard,sans-serif; color:#fff; letter-spacing:-0.02em; }
.bd-editor__body { padding:20px; display:flex; flex-direction:column; gap:12px; }
.bd-editor--collapsed .bd-editor__body { display:none; }
.bd-divider { margin:0; border:0; height:1px; background:var(--bd-border-light); }
.bd-check-group { display:flex; flex-wrap:wrap; gap:14px; }

/* 필드 라벨 */
.bd-field { display:flex; flex-direction:column; gap:8px; }
.bd-field__label { font:500 13px/1.2 Pretendard,sans-serif; color:var(--bd-text); letter-spacing:-0.02em; }

/* 이미지 플레이스홀더 */
.bd-img-placeholder { display:flex; align-items:center; justify-content:center;
    min-height:120px; padding:24px; background:#F0F1F4; border-radius:4px;
    font:400 13px Pretendard, sans-serif; color:#9aa0a6; }

/* 인풋 그룹(가로/세로 px) */
.bd-input-group { display:flex; gap:8px; }
.bd-input-group > * { flex:1; min-width:0; }
.bd-input__suffix { flex:none; margin-left:6px; font:400 12px Pretendard, sans-serif; color:var(--bd-counter); }

/* 리치텍스트 에디터(설명) */
.bd-rte { position:relative; display:flex; flex-direction:column; border:1px solid var(--bd-border-light);
    border-radius:6px; background:#fff; overflow:hidden; }
.bd-rte__toolbar { display:flex; align-items:center; gap:2px; padding:8px 10px;
    background:#FAFAFA; border-bottom:1px solid var(--bd-border-light); }
.bd-rte__btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
    padding:0; border:0; background:transparent; cursor:pointer; border-radius:4px;
    font:600 13px Pretendard, sans-serif; color:var(--bd-text); }
.bd-rte__btn:hover { background:#F4F5F8; }
.bd-rte__btn--italic { font-style:italic; }
.bd-rte__btn--underline { text-decoration:underline; }
.bd-rte__btn svg { display:block; }
.bd-rte__divider { width:1px; height:16px; background:var(--bd-border-light); margin:0 4px; }
.bd-rte__field { display:block; width:100%; min-height:140px; padding:14px 14px 32px; border:0; resize:none;
    background:transparent; outline:none; font:400 12px/1.5 Pretendard, sans-serif;
    color:var(--bd-text); letter-spacing:-0.02em; }
.bd-rte__field::placeholder { color:var(--bd-disabled-text); }
.bd-rte__counter { position:absolute; right:14px; bottom:10px;
    font:400 11px Pretendard, sans-serif; color:#424242; }
.bd-rte__counter-max { color:#B0B0B0; }

/* 인포 힌트 (파란색) */
.bd-hint--info { color:var(--bd-blue); }

/* 버튼 추가 카드 (버튼1/버튼2) */
.bd-btn-card { display:flex; flex-direction:column; gap:6px; padding:16px;
    border:0; border-radius:6px; background:#F9F9F9; }
.bd-btn-card__title { font:600 13px Pretendard, sans-serif; color:var(--bd-text); }

/* 인풋 + 새창 체크 한 줄 */
.bd-input-row { display:flex; align-items:center; gap:10px; }
.bd-input-row > .bd-input { flex:1; }

/* 슬라이더 (인풋 아래, 라벨 좌측 + 슬라이더 + 값) */
.bd-slider-inline { display:flex; align-items:center; gap:8px; margin-top:6px; }
.bd-slider-inline__label { flex:none; min-width:64px;
    font:400 11px/1.2 Pretendard, sans-serif; color:var(--bd-label-gray); letter-spacing:-0.02em; }
.bd-slider-inline > .bd-slider { flex:1; }

/* ---- 전체이미지 배너 프리뷰(우측 캔버스) ---- */
.bd-banner-preview { position:relative; display:flex; flex-direction:column;
    min-height:480px; padding:32px; border-radius:8px;
    background:linear-gradient(135deg, #6e63df 0%, #4e4eca 100%); }
.bd-banner-preview__label { font:400 13px/1.5 Pretendard, sans-serif;
    color:rgba(255,255,255,0.85); letter-spacing:-0.02em; }
.bd-banner-preview__center { flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:18px; padding:40px 0; }
.bd-banner-preview__title { margin:0; font:700 36px/1.3 Pretendard, sans-serif;
    color:#fff; letter-spacing:-0.02em; }
.bd-banner-preview__desc { margin:0; font:400 14px/1.5 Pretendard, sans-serif;
    color:rgba(255,255,255,0.9); letter-spacing:-0.02em; }
.bd-banner-preview__buttons { display:flex; gap:12px; margin-top:14px; }
.bd-banner-preview__btn { display:inline-flex; align-items:center; justify-content:center;
    min-width:140px; height:44px; padding:0 24px; border:0; border-radius:6px; cursor:pointer;
    background:var(--color-primary); color:#fff;
    font:600 14px Pretendard, sans-serif; letter-spacing:-0.02em; }

/* ---- 텍스트 프리뷰(우측 캔버스) ---- */
.bd-preview-img { display:block; width:100%; height:auto; border-radius:8px; background:#fff; }

/* ---- Google Map 플레이스홀더(에디터) ---- */
.bd-map-placeholder { display:flex; align-items:center; justify-content:center;
    min-height:160px; padding:24px; border-radius:6px; background:#7E7E7E;
    font:500 14px/1.5 Pretendard, sans-serif; color:#fff; letter-spacing:-0.02em; }

/* ---- 로케이션 프리뷰(우측 캔버스) ---- */
.bd-location-preview { display:flex; flex-direction:column; gap:24px;
    padding:24px; background:#fff; border-radius:8px; }
.bd-location-preview__map { display:block; width:100%; height:auto; border-radius:4px; }
.bd-location-preview__info { display:flex; flex-direction:column; gap:14px; padding:8px 0; }
.bd-location-preview__info p { margin:0; font:400 14px/1.5 Pretendard, sans-serif;
    color:#333; letter-spacing:-0.02em; }

/* ---- 설문 프리뷰(우측 캔버스) ---- */
.bd-survey-preview { padding:40px 60px; background:#fff; border-radius:8px; }
.bd-survey-preview__head { display:flex; align-items:center; justify-content:space-between;
    padding-bottom:18px; margin-bottom:40px; border-bottom:1px solid #E0E0E0; }
.bd-survey-preview__head-title { margin:0; font:600 18px/1.3 Pretendard, sans-serif;
    color:#333; letter-spacing:-0.02em; }
.bd-survey-preview__more { font:400 13px Pretendard, sans-serif; color:#A0A0A0; text-decoration:none; }
.bd-survey-preview__title { margin:0 0 18px; text-align:center;
    font:700 28px/1.3 Pretendard, sans-serif; color:#222; letter-spacing:-0.02em; }
.bd-survey-preview__intro { margin:0 0 48px; text-align:center;
    font:400 14px/1.5 Pretendard, sans-serif; color:#666; letter-spacing:-0.02em; }
.bd-survey-preview__questions { display:grid; grid-template-columns:repeat(3, 1fr); gap:48px;
    margin-bottom:36px; }
.bd-survey-preview__q { display:flex; flex-direction:column; gap:10px; text-align:center; }
.bd-survey-preview__q-label { font:600 13px Pretendard, sans-serif; color:#222; letter-spacing:-0.02em; }
.bd-survey-preview__q-desc { font:400 12px Pretendard, sans-serif; color:#666; letter-spacing:-0.02em; }
.bd-survey-preview__q-input { width:100%; box-sizing:border-box; height:36px; padding:0 0 8px;
    border:0; border-bottom:1px solid #E0E0E0; background:transparent; outline:none;
    font:400 13px Pretendard, sans-serif; color:#222; letter-spacing:-0.02em; }
.bd-survey-preview__q-input::placeholder { color:#BBB; }
.bd-survey-preview__submit { display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; height:52px; border:0; border-radius:8px; cursor:pointer;
    background:#8155CE; color:#fff;
    font:600 15px Pretendard, sans-serif; letter-spacing:-0.02em; }

/* ---- 후기 프리뷰(우측 캔버스) ---- */
.bd-review-preview { padding:40px 60px; background:#fff; border-radius:8px; }
.bd-review-preview__head { display:flex; align-items:center; justify-content:space-between;
    padding-bottom:18px; border-bottom:1px solid #E0E0E0; }
.bd-review-preview__title { margin:0; font:700 22px/1.3 Pretendard, sans-serif;
    color:#222; letter-spacing:-0.02em; }
.bd-review-preview__more { font:400 13px Pretendard, sans-serif; color:#A0A0A0; text-decoration:none; }
.bd-review-preview__list { display:flex; flex-direction:column; }
.bd-review-preview__item { display:flex; gap:40px; padding:32px 0; border-bottom:1px solid #EEEEEE; }
.bd-review-preview__item:last-child { border-bottom:0; }
.bd-review-preview__card { position:relative; flex:0 0 320px; min-height:200px;
    padding:28px 24px; border-radius:8px; overflow:hidden;
    background:linear-gradient(135deg, #FAFAFA 0%, #EDEDED 100%); }
.bd-review-preview__card-ribbon { position:absolute; top:18px; left:-30px; width:120px;
    padding:4px 0; text-align:center; transform:rotate(-45deg);
    font:600 11px/1.4 Pretendard, sans-serif; color:#fff; letter-spacing:-0.02em; }
.bd-review-preview__card-ribbon--general { background:#A18AE5; }
.bd-review-preview__card-ribbon--video { background:#71C58D; }
.bd-review-preview__card-ribbon--live { background:#F08383; }
.bd-review-preview__card-title { padding-top:40px; font:500 14px/1.7 Pretendard, sans-serif;
    color:#666; letter-spacing:-0.02em; }
.bd-review-preview__main { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.bd-review-preview__category { font:500 13px Pretendard, sans-serif; color:#999; }
.bd-review-preview__name { font:500 14px/1.5 Pretendard, sans-serif; color:#333; letter-spacing:-0.02em; }
.bd-review-preview__rating { display:flex; align-items:center; gap:6px;
    font:500 13px Pretendard, sans-serif; color:#888; }
.bd-review-preview__rating-stars { color:#F5B945; letter-spacing:1px; font-size:14px; }
.bd-review-preview__rating-stars--muted { color:#DDD; }
.bd-review-preview__author { display:flex; align-items:center; gap:8px; padding:4px 0; }
.bd-review-preview__author-avatar { width:28px; height:28px; border-radius:50%; background:#D6D6D6; flex:none; }
.bd-review-preview__author-badge { padding:3px 8px; border-radius:4px;
    background:#EEEAFE; color:#7B5BE0; font:500 11px Pretendard, sans-serif; letter-spacing:-0.02em; }
.bd-review-preview__author-name { font:600 13px Pretendard, sans-serif; color:#222; }
.bd-review-preview__author-date { color:#999; font:400 12px Pretendard, sans-serif; }
.bd-review-preview__content { font:400 13px/1.7 Pretendard, sans-serif; color:#555;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
    -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; letter-spacing:-0.02em; }

/* ---- 게시판 프리뷰(우측 캔버스) ---- */
.bd-board-preview { display:grid; grid-template-columns:1fr 1fr; gap:60px;
    padding:60px 80px; background:#fff; border-radius:8px; }
.bd-board-preview__head { display:flex; align-items:center; justify-content:space-between;
    padding-bottom:18px; border-bottom:1px solid #E0E0E0; }
.bd-board-preview__title { margin:0; font:700 22px/1.3 Pretendard, sans-serif;
    color:#222; letter-spacing:-0.02em; }
.bd-board-preview__more { font:400 13px Pretendard, sans-serif; color:#A0A0A0;
    text-decoration:none; }
.bd-board-preview__list { margin:0; padding:0; list-style:none; }
.bd-board-preview__item { display:flex; align-items:center; justify-content:space-between;
    padding:18px 0; border-bottom:1px solid #EEEEEE;
    font:400 14px/1.4 Pretendard, sans-serif; color:#333; letter-spacing:-0.02em; }
.bd-board-preview__date { color:#BBBBBB; font-size:13px; }
.bd-aside-group { display:flex; flex-direction:column; gap:0; }
.bd-aside-group .bd-tab { border-radius:6px 6px 0 0; }

/* ---- 빌더 드롭다운 (c-dropdown 복제, 높이 32px) ---- */
.bd-dropdown { position:relative; display:inline-block; max-width:100%; }
.bd-dropdown--block { display:block; width:100%; max-width:100%; }
.bd-dropdown--block .bd-dropdown__trigger { min-width:0; max-width:100%; }
.bd-dropdown__trigger { display:flex; align-items:center; gap:6px; width:100%;
    box-sizing:border-box; height:32px; padding:0 8px 0 12px;
    border:1px solid #DDDDDD; border-radius:6px; background:#fff; cursor:pointer; white-space:nowrap;
    font-family:inherit; font-size:13px; color:var(--text-primary); }
.bd-dropdown__trigger:hover { border-color:var(--color-primary); }
.bd-dropdown__trigger.open { border-color:var(--color-primary); border-bottom-color:transparent;
    border-radius:6px 6px 0 0; }
.bd-dropdown__label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.bd-dropdown__arrow { flex-shrink:0; margin-left:auto; transition:transform 0.2s; }
.bd-dropdown__trigger.open .bd-dropdown__arrow { transform:rotate(180deg); }
.bd-dropdown__panel { display:none; position:absolute; top:100%; left:0;
    width:100%; min-width:100%; max-width:100%; padding:4px 0; background:#fff;
    border:1px solid #DDDDDD; border-top:none; border-radius:0 0 8px 8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08); z-index:500; }
.bd-dropdown__trigger.open + .bd-dropdown__panel { display:block; border-color:var(--color-primary); }
.bd-dropdown__item { display:block; width:calc(100% - 8px); margin:0 4px; padding:7px 10px;
    border:0; background:transparent; text-align:left; cursor:pointer; border-radius:6px;
    font-family:inherit; font-size:13px; color:var(--text-primary); }
.bd-dropdown__item:hover { background:#EAF3FF; }
.bd-dropdown__item.active { background:#EBF3FF; color:var(--color-blue); font-weight:500; }