/* ===========================
   YouTube Membership Badges
   =========================== */

.yt-membership-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	vertical-align: middle;
	white-space: nowrap;
}

.yt-membership-badge--supporter {
	background: #e8f0fe;
	color: #1a73e8;
	border: 1px solid #c5d8ff;
}

.yt-membership-badge--fullstack {
	background: linear-gradient(135deg, #ff6b35, #f7931e);
	color: #fff;
	border: none;
	box-shadow: 0 1px 4px rgba(255, 107, 53, 0.3);
}

/* ===========================
   Frontend Section
   =========================== */

.yt-membership-section {
	padding: 0;
}

.yt-membership-section__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.yt-youtube-icon {
	display: flex;
	align-items: center;
}

.yt-membership-section__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.designbase-dashboard-section__header--split .yt-connect-btn {
	margin-left: auto;
	padding: 7px 12px !important;
	font-size: 12px !important;
}

.yt-connect-btn__icon {
	font-size: 11px;
}

.yt-membership-preview-notice {
	margin: 0 0 14px;
	padding: 8px 12px;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	background: #eff6ff;
	color: #1d4ed8;
	font-size: 12px;
	line-height: 1.5;
}

/* 연결 유도 */
.yt-membership-connect-prompt {
	max-width: 520px;
}

.yt-membership-desc {
	font-size: 13px;
	color: #444;
	line-height: 1.5;
	margin-bottom: 12px;
}

.yt-membership-notice {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-left: 2px solid #94a3b8;
	padding: 10px 14px;
	border-radius: 0 8px 8px 0;
	margin-bottom: 0;
	font-size: 13px;
}

.yt-membership-notice strong {
	display: block;
	margin-bottom: 8px;
	color: #475569;
}

.yt-membership-notice ul {
	margin: 0;
	padding-left: 18px;
	list-style: disc;
	color: #555;
	line-height: 1.55;
}

/* 연결 버튼 */
.yt-connect-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.yt-connect-btn:hover {
	border-color: #94a3b8;
}

/* ===========================
   Membership Status Card
   =========================== */

.yt-membership-status {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-radius: 12px;
	margin-bottom: 14px;
	position: relative;
}

.yt-membership-status--active {
	background: linear-gradient(135deg, #fff8f0, #fff3e5);
	border: 1px solid #ffddb3;
}

.yt-membership-status--expired {
	background: #fafafa;
	border: 1px solid #e0e0e0;
}

.yt-membership-status--no-tier {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
}

.yt-membership-status__badge {
	flex-shrink: 0;
}

.yt-membership-status__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.yt-membership-status__tier {
	font-size: 15px;
	font-weight: 700;
	color: #333;
}

.yt-membership-status__label {
	font-size: 13px;
	color: #777;
}

.yt-membership-status__since {
	font-size: 12px;
	color: #aaa;
}

.yt-membership-status__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4caf50;
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.yt-membership-status__dot--expired {
	background: #bdbdbd;
	box-shadow: none;
}

.yt-membership-connected-info {
	font-size: 13px;
	color: #666;
}

.yt-membership-connected-info code {
	background: #f5f5f5;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
}

.yt-membership-benefits-notice {
	margin-top: 12px;
	padding: 14px 16px;
	border: 1px solid #bfdbfe;
	border-radius: 10px;
	background: #eff6ff;
	color: #475569;
	font-size: 13px;
	line-height: 1.6;
}

.yt-membership-benefits-notice strong {
	display: block;
	margin-bottom: 4px;
	color: #1e3a8a;
}

.yt-membership-benefits-notice p {
	margin: 0 0 6px;
}

.yt-membership-benefits-notice ul {
	margin: 0;
	padding-left: 18px;
}

.yt-membership-sync-note {
	margin: 10px 0 0;
	font-size: 12px;
	color: #64748b;
}

.yt-membership-connected-links {
	margin-top: 12px;
}

.yt-membership-preview-action-note {
	display: inline-block;
	margin-top: 12px;
	font-size: 12px;
	color: #64748b;
}

/* ===========================
   Admin Settings (designbase-settings-page 패턴)
   =========================== */

.designbase-yt-settings {
	max-width: 880px;
}

.designbase-yt-operator-guide {
	margin: 0 0 20px;
	padding: 20px;
	border: 1px solid #c7d2fe;
	border-radius: 12px;
	background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
}

.designbase-yt-operator-guide__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.designbase-yt-operator-guide__eyebrow {
	margin: 0 0 4px;
	color: var(--db-brand-primary, #4f46e5);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.designbase-yt-operator-guide h4 {
	margin: 0 0 6px;
	font-size: 16px;
}

.designbase-yt-operator-guide__header p:last-child {
	margin: 0;
	color: var(--db-text-secondary, #667085);
	font-size: 13px;
	line-height: 1.55;
}

.designbase-yt-operator-guide__status {
	flex-shrink: 0;
	padding: 5px 9px;
	border-radius: 999px;
	background: #fff7ed;
	color: #c2410c;
	font-size: 12px;
	font-weight: 700;
}

.designbase-yt-operator-guide__status.is-ready {
	background: #dcfce7;
	color: #15803d;
}

.designbase-yt-operator-guide__checklist {
	display: grid;
	gap: 7px;
	margin: 16px 0;
	padding-left: 21px;
	color: var(--db-text-primary, #1f2937);
	font-size: 13px;
	line-height: 1.5;
}

.designbase-yt-operator-guide__scopes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.designbase-yt-operator-guide__scopes > div {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px;
	border: 1px solid rgba(99, 102, 241, .18);
	border-radius: 8px;
	background: rgba(255, 255, 255, .72);
}

.designbase-yt-operator-guide__scopes strong {
	font-size: 12px;
}

.designbase-yt-operator-guide__scopes code {
	width: fit-content;
	max-width: 100%;
	padding: 3px 6px;
	border-radius: 4px;
	background: #fff;
	color: #4338ca;
	font-size: 11px;
	word-break: break-all;
}

.designbase-yt-operator-guide__scopes span,
.designbase-yt-operator-guide__note {
	color: var(--db-text-secondary, #667085);
	font-size: 12px;
	line-height: 1.5;
}

.designbase-yt-operator-guide__note {
	margin: 14px 0 0;
}

@media (max-width: 640px) {
	.designbase-yt-save-bar {
		top: 10px;
		align-items: stretch;
		flex-direction: column;
	}

	.designbase-yt-save-bar .button {
		width: 100%;
		justify-content: center;
	}

	.designbase-yt-operator-guide__header {
		flex-direction: column;
	}

	.designbase-yt-operator-guide__scopes {
		grid-template-columns: 1fr;
	}
}

.designbase-yt-step-group__header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.designbase-yt-step-group__titles {
	flex: 1;
	min-width: 0;
}

.designbase-yt-step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--db-brand-primary, #4f46e5);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.designbase-yt-uri-box__title {
	margin: 0 0 6px;
	font-weight: 600;
}

.designbase-yt-uri-box__desc {
	margin: 0 0 10px;
	font-size: 13px;
}

.designbase-yt-uri-box__code {
	display: block;
	margin-top: 6px;
	padding: 6px 8px;
	background: color-mix(in srgb, var(--db-bg-primary, #fff) 70%, transparent);
	border-radius: 6px;
	font-size: 12px;
	word-break: break-all;
}

.designbase-yt-save-bar {
	position: sticky;
	top: 32px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--db-border-primary, #e5e7eb);
	border-radius: 10px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 5px 16px rgba(15, 23, 42, .08);
	backdrop-filter: blur(8px);
}

.designbase-yt-save-bar__copy {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	min-width: 0;
}

.designbase-yt-save-bar__copy strong {
	font-size: 13px;
}

.designbase-yt-save-bar__status {
	color: var(--db-text-secondary, #667085);
	font-size: 12px;
}

.designbase-yt-save-bar__status.is-dirty {
	color: #b45309;
	font-weight: 600;
}

.designbase-yt-save-bar__status.is-saved {
	color: #15803d;
}

.designbase-yt-step-actions,
.designbase-yt-settings-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.designbase-yt-step-actions {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--db-border-primary, #e5e7eb);
}

.designbase-yt-step-actions__hint,
.designbase-yt-settings-actions__hint {
	color: var(--db-text-secondary, #667085);
	font-size: 12px;
	line-height: 1.45;
}

.designbase-yt-settings-actions {
	margin-top: 20px;
	padding: 14px;
	border: 1px solid #c7d2fe;
	border-radius: 10px;
	background: #f5f7ff;
}

.designbase-yt-settings-actions__hint {
	flex: 1 1 260px;
}

.designbase-yt-owner-card {
	padding: 16px;
	border: 1px solid var(--db-border-primary, #e5e7eb);
	border-radius: var(--db-radius-m, 8px);
	background: var(--db-bg-secondary, #f8fafc);
}

.designbase-yt-owner-card__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.designbase-yt-owner-card__sync {
	font-size: 13px;
	color: var(--db-text-secondary, #667085);
}

.designbase-yt-owner-card__channel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;
}

.designbase-yt-owner-card__label {
	font-size: 12px;
	color: var(--db-text-secondary, #667085);
}

.designbase-yt-owner-card__title {
	font-size: 15px;
}

.designbase-yt-owner-card__code {
	display: inline-block;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--db-bg-primary, #fff);
}

.designbase-yt-owner-card__meta {
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--db-text-secondary, #667085);
}

.designbase-yt-owner-card__divider {
	height: 1px;
	margin: 16px 0;
	background: var(--db-border-primary, #e5e7eb);
}

.designbase-yt-owner-card__hint {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--db-text-secondary, #667085);
	line-height: 1.5;
}

.designbase-yt-owner-card__actions {
	margin-bottom: 0;
}

.designbase-yt-sync-status {
	font-size: 13px;
	color: var(--db-feedback-success-fg, #15803d);
}

.designbase-yt-revoke-btn {
	color: var(--db-feedback-error-fg, #b91c1c) !important;
}

.designbase-yt-tier-mapping {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--db-border-primary, #e5e7eb);
}

.designbase-yt-preview-tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--db-border-primary, #e5e7eb);
}

.designbase-yt-preview-tools .description {
	flex-basis: 100%;
	margin: 8px 0 0;
}

.designbase-yt-tier-mapping__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.designbase-yt-tier-mapping__title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
}

.designbase-yt-tier-mapping__desc {
	margin: 0;
	font-size: 13px;
	color: var(--db-text-secondary, #667085);
	line-height: 1.5;
}

.designbase-yt-levels-panel {
	margin-bottom: 16px;
	padding: 14px 16px;
	border: 1px solid var(--db-border-primary, #e5e7eb);
	border-radius: var(--db-radius-m, 8px);
	background: var(--db-bg-secondary, #f8fafc);
}

.designbase-yt-levels-panel__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
}

.designbase-yt-levels-panel__hint {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--db-text-secondary, #667085);
}

.designbase-yt-level-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.designbase-yt-empty {
	margin: 0;
	font-size: 13px;
	color: var(--db-text-secondary, #667085);
}

.designbase-yt-member-email {
	font-size: 12px;
	color: var(--db-text-secondary, #667085);
}

.designbase-yt-channel-code {
	font-size: 11px;
}

/* ===========================
   YouTube Content Sync
   =========================== */

.designbase-yt-content-sync {
	margin-top: 20px;
}

.designbase-yt-content-toggle {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
	padding: 14px;
	border: 1px solid var(--db-border-primary, #e5e7eb);
	border-radius: 8px;
	background: var(--db-bg-secondary, #f8fafc);
	cursor: pointer;
}

.designbase-yt-content-toggle input {
	margin-top: 2px;
}

.designbase-yt-content-toggle span {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.designbase-yt-content-toggle small,
.designbase-yt-content-tools__header p {
	color: var(--db-text-secondary, #667085);
	font-size: 12px;
	line-height: 1.5;
}

.designbase-yt-content-status-card {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.designbase-yt-content-status-card > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	border: 1px solid var(--db-border-primary, #e5e7eb);
	border-radius: 8px;
	background: #fff;
}

.designbase-yt-content-status-card__label {
	color: var(--db-text-secondary, #667085);
	font-size: 11px;
}

.designbase-yt-content-error {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-left: 3px solid #dc2626;
	background: #fef2f2;
	color: #991b1b;
	font-size: 12px;
	line-height: 1.5;
}

.designbase-yt-content-tools {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--db-border-primary, #e5e7eb);
}

.designbase-yt-content-tools__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.designbase-yt-content-tools__header h5 {
	margin: 0 0 5px;
	font-size: 14px;
}

.designbase-yt-content-tools__header p {
	margin: 0;
}

.designbase-yt-date-range {
	display: grid;
	grid-template-columns: auto 145px auto 145px;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
}

.designbase-yt-date-range label {
	font-size: 12px;
	font-weight: 600;
}

.designbase-yt-date-range input {
	min-height: 34px;
	padding: 5px 8px;
	border: 1px solid var(--db-border-primary, #d1d5db);
	border-radius: 6px;
}

.designbase-yt-content-results {
	margin-top: 12px;
}

.designbase-yt-content-loading,
.designbase-yt-content-empty {
	margin: 0;
	padding: 14px;
	border-radius: 8px;
	background: var(--db-bg-secondary, #f8fafc);
	color: var(--db-text-secondary, #667085);
	font-size: 13px;
}

.designbase-yt-content-selection-actions {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

.designbase-yt-content-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--db-border-primary, #e5e7eb);
	border-radius: 8px;
}

.designbase-yt-content-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.designbase-yt-content-table th,
.designbase-yt-content-table td {
	padding: 9px 10px;
	border-bottom: 1px solid #eef0f3;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.designbase-yt-content-table th {
	background: #f8fafc;
	color: #667085;
	font-weight: 600;
}

.designbase-yt-content-table tr:last-child td {
	border-bottom: 0;
}

.designbase-yt-content-table td:first-of-type {
	white-space: normal;
}

.designbase-yt-content-table td strong,
.designbase-yt-content-table td code {
	display: block;
}

.designbase-yt-content-table td code {
	margin-top: 3px;
	color: #667085;
	font-size: 10px;
}

.designbase-yt-content-check {
	width: 30px;
	text-align: center !important;
}

.designbase-yt-content-status {
	display: inline-flex;
	padding: 3px 7px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: 11px;
	font-weight: 600;
}

.designbase-yt-content-status--both {
	background: #dcfce7;
	color: #166534;
}

.designbase-yt-content-status--missing,
.designbase-yt-content-status--post_only,
.designbase-yt-content-status--lesson_only {
	background: #fff7ed;
	color: #c2410c;
}

.designbase-yt-content-status--duplicate,
.designbase-yt-content-status--external {
	background: #fef2f2;
	color: #b91c1c;
}

@media (max-width: 760px) {
	.designbase-yt-content-status-card {
		grid-template-columns: 1fr;
	}

	.designbase-yt-content-tools__header {
		flex-direction: column;
	}

	.designbase-yt-date-range {
		width: 100%;
		grid-template-columns: auto minmax(0, 1fr);
	}
}

/* 연결 해제 버튼 */
.yt-disconnect-btn-confirm {
	margin-top: 12px;
	color: #d32f2f !important;
	border-color: #d32f2f !important;
	background: transparent !important;
	font-size: 12px !important;
}

.yt-disconnect-btn-confirm:hover {
	background: #fff5f5 !important;
}

/* ===========================
   Spinner
   =========================== */

.yt-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid #f0f0f0;
	border-top-color: #ff0000;
	border-radius: 50%;
	animation: yt-spin 0.8s linear infinite;
}

@keyframes yt-spin {
	to { transform: rotate(360deg); }
}

/* ===========================
   Legacy Connect Box (shortcode)
   =========================== */

.yt-connect-box {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	background: #fff;
	margin: 16px 0;
}

.yt-connect-box--connected {
	border-color: #c8e6c9;
	background: #f9fff9;
}

.yt-connect-icon {
	font-size: 28px;
	color: #ff0000;
	flex-shrink: 0;
}

.yt-connect-info {
	flex: 1;
}

.yt-connect-info strong {
	display: block;
	font-size: 15px;
	margin-bottom: 4px;
}

.yt-connect-info p {
	margin: 0;
	font-size: 13px;
	color: #666;
}

/* ===========================
   Locked Content
   =========================== */

.yt-member-locked,
.yt-locked-content {
	padding: 24px;
	border: 2px dashed #e0e0e0;
	border-radius: 12px;
	text-align: center;
	background: #fafafa;
	margin: 20px 0;
}

.yt-member-locked p,
.yt-locked-content p {
	margin: 0 0 16px;
	color: #555;
	font-size: 15px;
}

.yt-course-locked {
	padding: 20px;
	background: #fff8f0;
	border: 1px solid #ffe0c0;
	border-radius: 10px;
	margin-top: 12px;
}

.yt-course-locked p {
	margin: 0 0 14px;
	font-size: 14px;
}

.yt-tier-badge--supporter {
	background: #e8f0fe;
	color: #1a73e8;
	display: inline-flex;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
}

.yt-tier-badge--fullstack {
	background: linear-gradient(135deg, #ff6b35, #f7931e);
	color: #fff;
	display: inline-flex;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
}

/* YouTube 레벨 칩 (자동 불러오기 결과) */
.yt-level-chip {
	background: var(--db-bg-primary, #fff) !important;
	border: 1px solid var(--db-brand-primary, #4f46e5) !important;
	color: var(--db-brand-primary, #4f46e5) !important;
	border-radius: 100px !important;
	font-size: 12px !important;
	padding: 4px 14px !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.yt-level-chip:hover {
	background: var(--db-brand-primary, #4f46e5) !important;
	color: #fff !important;
}