/* ===================
   1. Tokens
   사이트 대표 색(--fh-brand)이 있으면 그것을 강조색으로 쓴다.
   =================== */
.fxad,
.fxad-preview,
.fxad-pick,
.fxad-apply,
.fxad-my {
	--fxad-accent: var(--fh-brand, #4b3f8f);
	--fxad-accent-soft: #efedf9;
	--fxad-ink: #1b1d2b;
	--fxad-ink-2: #4a4f66;
	--fxad-muted: #5f6478;
	--fxad-line: #d9dce6;
	/* 조작 요소(입력·버튼·칩·비활성 점)의 경계 — 흰 바탕에서 3:1 이상(WCAG 1.4.11). --fxad-line 은 장식 구분선 전용. */
	--fxad-edge: #8b90a3;
	--fxad-soft: #f4f5f9;
	--fxad-danger: #b3452c;
	--fxad-danger-soft: #fbece8;
	--fxad-ok: #1f6b4b;
	--fxad-ok-soft: #e6f4ec;
	--fxad-radius: 8px;
	--fxad-cols-pc: 3;
	--fxad-cols-m: 1;
	--fxad-gap: 16px;
	box-sizing: border-box;
	color: var(--fxad-ink);
}

/* 사이트 강조색에 맞춰 옅은 강조 면을 만든다(지원하는 브라우저에서만 — 아니면 위의 기본값). */
@supports (color: color-mix(in srgb, red 10%, white)) {
	.fxad,
	.fxad-preview,
	.fxad-pick,
	.fxad-apply,
	.fxad-my {
		--fxad-accent-soft: color-mix(in srgb, var(--fxad-accent) 9%, #ffffff);
	}
}

.fxad *,
.fxad *::before,
.fxad *::after,
.fxad-preview *,
.fxad-apply *,
.fxad-apply *::before,
.fxad-apply *::after,
.fxad-my *,
.fxad-my *::before,
.fxad-my *::after {
	box-sizing: border-box;
}

/* ===================
   2. 광고 (공개 화면)
   =================== */
.fxad {
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 24px auto;
}

.fxad__item {
	position: relative;
	display: block;
	max-width: 100%;
}

.fxad--single .fxad__item,
.fxad--rotate .fxad__item {
	text-align: center;
}

.fxad__label {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(17, 24, 39, 0.8);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.fxad__link {
	display: block;
	color: inherit;
	text-decoration: none;
	border-radius: var(--fxad-radius);
}

.fxad__link:hover .fxad__title {
	text-decoration: underline;
}

.fxad__link:focus-visible {
	outline: 3px solid var(--fxad-accent);
	outline-offset: 3px;
}

.fxad__img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: var(--fxad-radius);
}

.fxad__body {
	display: block;
	min-width: 0;
	padding: 8px 4px 0;
	text-align: left;
}

/* 공백 없는 긴 제목(영문·숫자·URL)도 칸을 넘지 않게 — 줄바꿈을 허용하고 2줄까지만 보인다(라운드 1 D-2). */
.fxad__title {
	display: -webkit-box;
	min-width: 0;
	overflow: hidden;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--fxad-ink);
}

.fxad__desc {
	display: -webkit-box;
	min-width: 0;
	margin-top: 2px;
	overflow: hidden;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fxad-ink-2);
}

.fxad__link {
	min-width: 0;
}

/* 이미지가 없는 광고(옛 데이터·삭제된 미디어) — 깨진 아이콘 대신 제목 카드(라운드 1 D-6). 「광고」 라벨이 얹히는 자리를 비워 둔다. */
.fxad__item--noimg .fxad__link {
	display: flex;
	align-items: center;
	min-height: 96px;
	border: 1px solid var(--fxad-line);
	background: var(--fxad-accent-soft);
}

.fxad__item--noimg .fxad__body {
	width: 100%;
	padding: 34px 16px 16px;
}

/* --- 슬라이드 --- */
.fxad__track {
	position: relative;
}

.fxad__slide[hidden] {
	display: none;
}

.fxad__slide {
	animation: fxad-fade 0.3s ease;
}

@keyframes fxad-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fxad__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 8px;
}

/* 누르는 영역은 44px(접근성) 그대로, 눈에 보이는 원은 28px — 광고 이미지 위에서 너무 커 보이지 않게 */
.fxad__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fxad-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.fxad__btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 1px solid var(--fxad-edge);
	border-radius: 999px;
	background: #ffffff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fxad__btn:hover::before {
	background: var(--fxad-soft);
	border-color: var(--fxad-ink-2);
}

.fxad__btn > * {
	position: relative;
}

.fxad__pause-icon {
	transform: scale(0.75);
}

.fxad__btn:focus-visible,
.fxad__dot:focus-visible {
	outline: 3px solid var(--fxad-accent);
	outline-offset: 2px;
}

/* 일시정지 아이콘: 두 개의 막대(재생 중) / 삼각형(멈춤 — aria-pressed=true) */
.fxad__pause-icon {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 14px;
}

.fxad__pause-icon::before,
.fxad__pause-icon::after {
	content: "";
	position: absolute;
	top: 0;
	width: 4px;
	height: 14px;
	border-radius: 1px;
	background: currentColor;
}

.fxad__pause-icon::before {
	left: 0;
}

.fxad__pause-icon::after {
	right: 0;
}

.fxad__btn--pause[aria-pressed="true"] .fxad__pause-icon::before {
	left: 1px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent currentColor;
	background: transparent;
	border-radius: 0;
}

.fxad__btn--pause[aria-pressed="true"] .fxad__pause-icon::after {
	display: none;
}

.fxad__pager {
	display: flex;
	align-items: center;
}

.fxad__dot {
	position: relative;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.fxad__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fxad-edge);
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease;
}

.fxad__dot:hover::before {
	background: var(--fxad-muted);
}

.fxad__dot.is-active::before {
	width: 20px;
	border-radius: 4px;
	background: var(--fxad-accent);
}

/* --- 그리드 --- */
.fxad__grid {
	display: grid;
	grid-template-columns: repeat(var(--fxad-cols-m), minmax(0, 1fr));
	gap: var(--fxad-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fxad__cell {
	min-width: 0;
	margin: 0;
}

/* 열 수는 화면 폭이 아니라 이 자리의 폭으로 정한다 — 300px 사이드바에 PC 4열이 들어가 셀이 60px 로 줄지 않게(열당 150px 미만이면 모바일 열 수). */
.fxad--grid {
	container: fxad-grid / inline-size;
}

.fxad--cols-m-1 { --fxad-cols-m: 1; }
.fxad--cols-m-2 { --fxad-cols-m: 2; }
.fxad--cols-m-3 { --fxad-cols-m: 3; }
.fxad--cols-pc-1 { --fxad-cols-pc: 1; }
.fxad--cols-pc-2 { --fxad-cols-pc: 2; }
.fxad--cols-pc-3 { --fxad-cols-pc: 3; }
.fxad--cols-pc-4 { --fxad-cols-pc: 4; }
.fxad--cols-pc-5 { --fxad-cols-pc: 5; }
.fxad--cols-pc-6 { --fxad-cols-pc: 6; }
.fxad--gap-8 { --fxad-gap: 8px; }
.fxad--gap-12 { --fxad-gap: 12px; }
.fxad--gap-16 { --fxad-gap: 16px; }
.fxad--gap-24 { --fxad-gap: 24px; }

/* --- 기본 배너(광고가 아니라 신청 안내) --- */
.fxad__house {
	min-height: 88px;
	border: 2px dashed var(--fxad-line);
	border-radius: var(--fxad-radius);
	background: var(--fxad-soft);
}

.fxad__house-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 88px;
	padding: 16px;
	color: var(--fxad-ink-2);
	text-align: center;
	text-decoration: none;
}

.fxad__house-link:hover .fxad__house-note {
	text-decoration: underline;
}

.fxad__house-link:focus-visible {
	outline: 3px solid var(--fxad-accent);
	outline-offset: -3px;
	border-radius: var(--fxad-radius);
}

.fxad__house-title {
	font-size: 14px;
	font-weight: 500;
}

.fxad__house-note {
	font-size: 14px;
	font-weight: 600;
	color: var(--fxad-accent);
}

.fxad__house-meta {
	font-size: 13px;
	line-height: 1.4;
	color: var(--fxad-ink-2);
	font-variant-numeric: tabular-nums;
}

.fxad__house-admin {
	margin-top: 4px;
	padding: 1px 8px;
	border-radius: 4px;
	background: rgba(17, 24, 39, 0.08);
	color: var(--fxad-ink-2);
	font-size: 12px;
}

/* 자리 크기 그대로 — 투명 그림이 비율을 잡고, 안내는 그 위에 겹친다. */
.fxad__house--sized {
	position: relative;
	overflow: hidden;
}

.fxad__house-ratio,
.fxad__house-ratio img {
	display: block;
	width: 100%;
	height: auto;
}

.fxad__house--sized .fxad__house-link {
	position: absolute;
	inset: 0;
	min-height: 0;
	padding: 8px 12px;
	gap: 2px;
}

.fxad__item--house {
	position: relative;
}

/* --- 「실제 위치」 미리보기 --- */
.fxad-preview {
	position: relative;
	margin: 16px auto;
	padding: 28px 8px 8px;
	max-width: 100%;
	outline: 2px dashed var(--fxad-accent);
	outline-offset: 2px;
	background: var(--fxad-accent-soft);
}

.fxad-preview__tag {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	padding: 3px 10px;
	background: var(--fxad-accent);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

.fxad-preview .fxad {
	margin: 0 auto;
}

/* 미리보기 문서(관리자 iframe) 바탕 */
.fxad-preview-doc {
	margin: 0;
	padding: 16px;
	background: #ffffff;
	font-family: inherit;
}

/* ===================
   3. 광고주 화면 (신청 · 내 광고)
   =================== */
.fxad-apply,
.fxad-my {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	font-size: 16px;
	line-height: 1.7;
}

.fxad-apply__title,
.fxad-my__title {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
}

.fxad-apply__lead {
	margin: 0 0 24px;
	color: var(--fxad-ink-2);
}

.fxad-notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var(--fxad-muted);
	border-radius: 0 var(--fxad-radius) var(--fxad-radius) 0;
	background: var(--fxad-soft);
	color: var(--fxad-ink);
}

.fxad-notice--ok {
	border-left-color: var(--fxad-ok);
	background: var(--fxad-ok-soft);
}

.fxad-notice--error {
	border-left-color: var(--fxad-danger);
	background: var(--fxad-danger-soft);
}

.fxad-rules {
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid var(--fxad-line);
	border-radius: var(--fxad-radius);
}

.fxad-rules__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}

.fxad-rules__text {
	margin: 0;
	font-size: 14px;
	color: var(--fxad-ink-2);
}

.fxad-form__row {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.fxad-form__row--pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.fxad-form__label,
.fxad-form__filelabel {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fxad-ink);
}

.fxad-form__label small,
.fxad-form__filelabel small {
	font-weight: 400;
	color: var(--fxad-muted);
}

.fxad-form__input,
.fxad-form__file {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--fxad-edge);
	border-radius: 6px;
	background: #ffffff;
	color: var(--fxad-ink);
	font: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fxad-form__input:hover,
.fxad-form__file:hover {
	border-color: var(--fxad-ink-2);
}

.fxad-form__input:focus-visible,
.fxad-form__file:focus-visible {
	outline: 3px solid var(--fxad-accent);
	outline-offset: 1px;
	border-color: var(--fxad-accent);
}

.fxad-form__images .fxad-form__filelabel {
	margin-top: 12px;
}

.fxad-form__hint {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fxad-muted);
}

.fxad-form__hint.is-error {
	color: var(--fxad-danger);
}

.fxad-form__check {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.5;
}

.fxad-form__check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.fxad-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 24px 0 8px;
}

/* 제출 버튼 바로 옆에서 결제 금액·종료일을 다시 보여 준다(달력 아래 요약이 화면 밖에 있어도 금액을 보고 누른다). */
.fxad-actions__sum {
	flex: 1 1 220px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fxad-ink-2);
}

.fxad-actions__sum[hidden] {
	display: none;
}

.fxad-actions__sum strong {
	display: block;
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--fxad-ink);
}

.fxad-quote__end {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fxad-ink);
}

.fxad-form__subtitle {
	margin: 24px 0 4px;
	font-size: 18px;
	font-weight: 600;
}

.fxad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--fxad-edge);
	border-radius: 6px;
	background: #ffffff;
	color: var(--fxad-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fxad-btn:hover {
	border-color: var(--fxad-ink-2);
	background: var(--fxad-soft);
}

.fxad-btn:focus-visible {
	outline: 3px solid var(--fxad-accent);
	outline-offset: 2px;
}

.fxad-btn--primary {
	border-color: var(--fxad-accent);
	background: var(--fxad-accent);
	color: #ffffff;
}

.fxad-btn--primary:hover {
	border-color: var(--fxad-accent);
	background: var(--fxad-accent);
	filter: brightness(0.9);
}

.fxad-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.fxad-chip {
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--fxad-edge);
	border-radius: 999px;
	background: #ffffff;
	color: var(--fxad-ink-2);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.fxad-chip.is-active {
	border-color: var(--fxad-accent);
	background: var(--fxad-accent-soft);
	color: var(--fxad-ink);
	font-weight: 600;
}

.fxad-chip:focus-visible {
	outline: 3px solid var(--fxad-accent);
	outline-offset: 2px;
}

/* --- 요금 계산 --- */
.fxad-quote {
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid var(--fxad-line);
	border-left: 4px solid var(--fxad-accent);
	border-radius: 0 var(--fxad-radius) var(--fxad-radius) 0;
	background: var(--fxad-accent-soft);
}

.fxad-quote.is-full {
	border-left-color: var(--fxad-danger);
	background: var(--fxad-danger-soft);
}

.fxad-quote__empty {
	margin: 0;
	font-size: 14px;
	color: var(--fxad-muted);
}

.fxad-quote__period {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}

.fxad-quote__status {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
}

.fxad-quote__status.is-full {
	color: var(--fxad-danger);
}

.fxad-quote__rows {
	display: grid;
	gap: 4px;
	margin: 0;
}

.fxad-quote__rows div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	color: var(--fxad-ink-2);
}

.fxad-quote__rows dt,
.fxad-quote__rows dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.fxad-quote__total {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--fxad-line);
	font-size: 20px;
	font-weight: 700;
	color: var(--fxad-ink);
}

.fxad-quote__suggest {
	margin: 8px 0 0;
	font-size: 14px;
}

.fxad-quote__suggest button {
	margin-left: 4px;
}

/* --- 빈 날짜 달력 --- */
.fxad-cal {
	margin: 0 0 16px;
	padding: 12px;
	border: 1px solid var(--fxad-line);
	border-radius: var(--fxad-radius);
	background: #ffffff;
}

.fxad-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.fxad-cal__nav {
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--fxad-edge);
	border-radius: 999px;
	background: #ffffff;
	color: var(--fxad-ink);
	font-size: 20px;
	cursor: pointer;
}

.fxad-cal__nav:hover {
	background: var(--fxad-soft);
}

.fxad-cal__nav:focus-visible,
.fxad-cal__day:focus-visible {
	outline: 3px solid var(--fxad-accent);
	outline-offset: 1px;
}

.fxad-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(44px, 1fr));
	gap: 0;
}

.fxad-cal__dow {
	padding: 4px 0;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	color: var(--fxad-muted);
}

.fxad-cal__day {
	position: relative;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: #ffffff;
	color: var(--fxad-ink);
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.fxad-cal__day:hover {
	border-color: var(--fxad-accent);
}

.fxad-cal__day.is-full {
	background: repeating-linear-gradient(135deg, #ffffff 0, #ffffff 4px, var(--fxad-danger-soft) 4px, var(--fxad-danger-soft) 8px);
	color: var(--fxad-danger);
	text-decoration: line-through;
}

.fxad-cal__day.is-past {
	color: var(--fxad-muted);
	background: var(--fxad-soft);
	cursor: not-allowed;
}

.fxad-cal__day.is-range {
	background: var(--fxad-accent-soft);
	border-color: var(--fxad-accent-soft);
}

.fxad-cal__day.is-start {
	background: var(--fxad-accent);
	color: #ffffff;
	font-weight: 700;
}

.fxad-cal__blank {
	min-height: 44px;
}

.fxad-cal__legend {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--fxad-muted);
}

.fxad-cal__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 2px 0 8px;
	border: 1px solid var(--fxad-edge);
	border-radius: 2px;
	vertical-align: -1px;
}

.fxad-cal__dot--open {
	background: #ffffff;
}

.fxad-cal__dot--full {
	background: repeating-linear-gradient(135deg, #ffffff 0, #ffffff 2px, var(--fxad-danger-soft) 2px, var(--fxad-danger-soft) 4px);
	border-color: var(--fxad-danger);
}

/* --- 광고주 미리보기 --- */
.fxad-preview-panel {
	margin: 0 0 24px;
	border: 1px solid var(--fxad-line);
	border-radius: var(--fxad-radius);
	overflow: hidden;
}

.fxad-preview-panel__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	background: var(--fxad-soft);
}

.fxad-preview-panel__stage {
	padding: 16px;
	overflow-x: auto;
	background: #ffffff;
}

.fxad-preview-panel__stage .fxad {
	margin: 0 auto;
}

.fxad-preview-panel__stage.is-mobile .fxad {
	max-width: 360px;
}

/* --- 광고 상품 화면(상품 상세·장바구니) — 수량은 1개로 고정이라 조절 UI 를 숨긴다 --- */
.fxad-product-notice {
	margin: 0 0 16px;
}

body.fxad-product .fluxshop-product-detail__qty {
	display: none;
}

body.fxad-cart .fhs-cart-qty,
body.fxad-cart .fhs-cart-qtyinput {
	display: none;
}

/* --- 내 광고 --- */
.fxad-my__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}

.fxad-my__title {
	margin: 0;
}

.fxad-my__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* 긴 광고 이름 하나가 열 폭을 밀어 가로 스크롤이 생기지 않게(라운드 1 실행 중 발견) */
	gap: 16px;
}

.fxad-my__item {
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 16px;
	border: 1px solid var(--fxad-line);
	border-left: 4px solid var(--fxad-muted);
	border-radius: 0 var(--fxad-radius) var(--fxad-radius) 0;
	background: #ffffff;
}

.fxad-my__item--live {
	border-left-color: var(--fxad-ok);
}

.fxad-my__item--paid,
.fxad-my__item--draft {
	border-left-color: var(--fxad-accent);
}

.fxad-my__item--rejected,
.fxad-my__item--stopped {
	border-left-color: var(--fxad-danger);
}

.fxad-my__item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.fxad-my__item-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.fxad-status {
	padding: 2px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--fxad-ink-2);
}

.fxad-status--live {
	color: var(--fxad-ok);
}

.fxad-status--rejected,
.fxad-status--stopped {
	color: var(--fxad-danger);
}

.fxad-status--paid,
.fxad-status--draft {
	color: var(--fxad-accent);
}

.fxad-my__meta {
	margin: 4px 0 8px;
	font-size: 14px;
	color: var(--fxad-muted);
}

.fxad-my__note {
	margin: 8px 0;
	font-size: 14px;
	color: var(--fxad-ink-2);
}

.fxad-my__report {
	display: flex;
	gap: 24px;
	margin: 12px 0;
}

.fxad-my__report div {
	min-width: 0;
}

.fxad-my__report dt {
	font-size: 12px;
	color: var(--fxad-muted);
}

.fxad-my__report dd {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.fxad-my__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.fxad-inline-form {
	display: inline-block;
	margin: 0;
}

.fxad-empty {
	padding: 32px 16px;
	border: 2px dashed var(--fxad-line);
	border-radius: var(--fxad-radius);
	text-align: center;
}

.fxad-empty__title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 600;
}

.fxad-empty__text {
	max-width: 420px;
	margin: 0 auto 16px;
	color: var(--fxad-ink-2);
}

/* ===================
   4. Responsive
   =================== */
@container fxad-grid (min-width: 300px) {
	.fxad--cols-pc-2 .fxad__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container fxad-grid (min-width: 450px) {
	.fxad--cols-pc-3 .fxad__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container fxad-grid (min-width: 600px) {
	.fxad--cols-pc-4 .fxad__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container fxad-grid (min-width: 750px) {
	.fxad--cols-pc-5 .fxad__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@container fxad-grid (min-width: 900px) {
	.fxad--cols-pc-6 .fxad__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@container fxad-grid (min-width: 150px) {
	.fxad--cols-pc-1 .fxad__grid { grid-template-columns: minmax(0, 1fr); }
}

/* 컨테이너 쿼리를 모르는 옛 브라우저 — 화면 폭 기준 */
@supports not (container-type: inline-size) {
	@media (min-width: 768px) {
		.fxad__grid {
			grid-template-columns: repeat(var(--fxad-cols-pc), minmax(0, 1fr));
		}
	}
}

@media (min-width: 768px) {
	.fxad-form__row--pair {
		grid-template-columns: 1fr 1fr;
	}

	.fxad-apply,
	.fxad-my {
		padding: 40px 24px 64px;
	}
}

@media (max-width: 480px) {
	.fxad-apply__title,
	.fxad-my__title {
		font-size: 24px;
	}

	/* 달력: 테마 여백 때문에 7칸이 44px 에 못 미치면 화면 폭까지 넓힌다(가로 스크롤 없이 날짜 칸 44px). */
	.fxad-cal {
		margin-inline: calc(50% - 50vw);
		padding-inline: 0;
		border-inline: 0;
		border-radius: 0;
	}

	.fxad-cal__head,
	.fxad-cal__legend {
		padding-inline: 12px;
	}

	/* 제출 줄은 화면 아래에 붙어 금액과 버튼이 함께 보인다. */
	.fxad-form__actions {
		position: sticky;
		bottom: 0;
		z-index: 10;
		margin-inline: -16px;
		padding: 12px 16px;
		border-top: 1px solid var(--fxad-line);
		background: #ffffff;
	}

	.fxad-btn {
		width: 100%;
	}

	.fxad-my__actions .fxad-btn,
	.fxad-my__actions .fxad-inline-form {
		flex: 1 1 100%;
	}

	.fxad-inline-form .fxad-btn {
		width: 100%;
	}

	/* 제출 줄: 금액과 버튼이 한 줄에 */
	.fxad-form__actions .fxad-btn {
		flex: 0 0 auto;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fxad__slide {
		animation: none;
	}

	.fxad *,
	.fxad-apply *,
	.fxad-my * {
		transition: none !important;
	}
}


/* --- 위치 고르기 모드(관리자 전용) --- */
.fxad-pick {
	position: relative;
	margin: 16px auto;
	padding: 8px;
	max-width: 100%;
	outline: 2px dashed var(--fxad-accent);
	outline-offset: 2px;
	background: var(--fxad-accent-soft);
}

.fxad-pick__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 8px;
	font-size: 14px;
}

.fxad-pick__hint {
	color: var(--fxad-ink-2);
	font-size: 13px;
}

.fxad-pick__make {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--fxad-radius);
	background: var(--fxad-accent);
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
}

.fxad-pick__make:hover,
.fxad-pick__make:focus-visible {
	filter: brightness(1.1);
}

.fxad-pick__slots {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

.fxad-pick__badge {
	margin-left: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #111827;
	color: #ffffff;
	font-size: 12px;
}

.fxad-pick__empty {
	margin: 0 0 8px;
	color: var(--fxad-ink-2);
	font-size: 13px;
}

.fxad-pick-spacer {
	height: 140px;
}

.fxad-pick-notice {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	padding: 12px 16px;
	background: #111827;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.fxad-pick-notice a {
	color: #ffffff;
	text-decoration: underline;
}


/* --- 신청 화면 자리 카드 --- */
.fxad-slotcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin-bottom: 8px;
}

.fxad-slotcards[hidden] {
	display: none; /* display:grid 가 hidden 속성을 덮어쓰므로 — JS 가 없으면 셀렉트만 보인다 */
}

.fxad-slotcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-height: 44px;
	padding: 12px;
	border: 1px solid var(--fxad-edge);
	border-radius: var(--fxad-radius);
	background: #ffffff;
	color: var(--fxad-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fxad-slotcard:hover {
	border-color: var(--fxad-ink-2);
}

.fxad-slotcard:focus-visible {
	outline: 3px solid var(--fxad-accent);
	outline-offset: 2px;
}

.fxad-slotcard.is-selected {
	border-color: var(--fxad-accent);
	box-shadow: 0 0 0 2px var(--fxad-accent);
}

.fxad-slotcard__pic {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 4px;
	border-radius: 4px;
}

.fxad-slotcard__name {
	font-size: 16px;
	font-weight: 600;
}

.fxad-slotcard__desc,
.fxad-slotcard__spec {
	font-size: 13px;
	line-height: 1.5;
	color: var(--fxad-ink-2);
}

.fxad-slotcard__price {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ===================
   격리 — 테마 CSS 가 광고 상자 모양을 바꾸지 못하게
   (Shadow DOM 대신 접두 클래스 + !important 로 고정한다 — 기존 스크립트·집계가 문서 전역을 전제로 한다.)
   값은 위 「2. 광고」 규칙과 같다 — 바꾸려면 둘 다 바꾼다.
   =================== */
.fxad-zone {
	display: block;
	width: 100%;
	max-width: var(--fxad-w-pc, 100%);
	margin: 24px auto;
	padding: 0;
	border: 0;
	aspect-ratio: var(--fxad-ar-pc, auto);
	clear: both;
	/* 가로 정렬 부모 안에서도 한 줄 전체를 차지한다 — grid 는 전체 칸, flex 가로 줄은 fxad-zones.js 가 줄 밖에 놓는다(여기서 flex-basis 를 주면 세로 flex 에서 높이가 늘어난다) */
	grid-column: 1 / -1;
	box-sizing: border-box;
}

/* N번째 항목 뒤 — 표 행 사이에 들어가는 감싸기 행 */
.fxad-zone-row > td {
	padding: 0;
	border: 0;
	background: transparent;
}

.fxad-zone-row > td > .fxad-zone {
	margin: 12px auto;
}

/* 이웃 접힘 — 앞뒤 광고가 가까워 접힌 상자(높이 0, 광고 요청 없음) */
.fxad-zone[data-fxad-skip] {
	display: none;
}

.fxad-zone > .fxad,
.fxad-block > .fxad {
	margin: 0 auto;
}

.fxad-block {
	display: block;
	margin: 24px 0;
	clear: both;
}

@media (max-width: 767px) {
	.fxad-zone {
		max-width: var(--fxad-w-m, 100%);
		aspect-ratio: var(--fxad-ar-m, auto);
	}
}

.fxad .fxad__img,
.fxad-zone .fxad__img {
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--fxad-radius) !important;
	box-shadow: none !important;
	float: none !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
}

.fxad picture {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.fxad .fxad__item:not(.fxad__item--noimg) > .fxad__link {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--fxad-radius) !important;
	box-shadow: none !important;
	background: none !important;
	color: inherit !important;
	text-decoration: none !important;
}

.fxad .fxad__link:hover .fxad__title {
	text-decoration: underline !important;
}

.fxad .fxad__title,
.fxad .fxad__desc,
.fxad .fxad__label,
.fxad .fxad__body {
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-decoration: none;
	text-transform: none !important;
	letter-spacing: normal;
	font-style: normal !important;
	opacity: 1 !important;
	transform: none !important;
}

.fxad .fxad__label {
	letter-spacing: 0.02em !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: #ffffff !important;
	background: rgba(17, 24, 39, 0.8) !important;
	border-radius: 4px !important;
	text-decoration: none !important;
}

.fxad .fxad__title {
	font-size: 16px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	color: var(--fxad-ink) !important;
}

.fxad .fxad__desc {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--fxad-ink-2) !important;
}

.fxad ul.fxad__grid,
.fxad li.fxad__cell {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 0 !important;
	background: none !important;
}

.fxad .fxad__item {
	float: none !important;
	transform: none !important;
	filter: none !important;
}

/* 글자 크기·줄 높이·라벨 여백 — 테마의 a / span 전역 규칙이 광고 상자 안에 먹지 않게 고정한다. */
.fxad,
.fxad .fxad__item,
.fxad .fxad__link,
.fxad .fxad__cell {
	font-size: 16px !important;
	line-height: 1.6 !important;
}

.fxad .fxad__label {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
}

/* ===================
   네트워크 광고 소재 (애드센스·쿠팡·애드핏·직접 코드) — 1.7.0
   자리 규격으로 폭·비율을 미리 잡아(CLS) 광고가 늦게 떠도 아래 화면이 밀리지 않는다.
   기기별로 다른 소재는 .fxad-dev--pc / --mo 두 벌이 나가고 CSS 가 하나를 숨긴다(페이지 캐시는 방문자 기기를 모른다).
   =================== */
.fxad--net {
	margin: 24px auto;
	overflow-x: clip;
}

/* 광고 표시 + (쿠팡) 대가성 문구 — 상자·아이콘·띠 없이 본문보다 작고 옅은 글씨 한 줄. 끌 수 없다. */
.fxad-net__cap {
	margin: 0 0 4px;
	padding: 0;
	color: var(--fxad-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

.fxad-net__tag {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.fxad-net__body {
	position: relative;
	width: 100%;
	max-width: min(100%, var(--fxad-net-w-pc, 100%));
	margin: 0 auto;
	aspect-ratio: var(--fxad-net-ar-pc, auto);
}

.fxad-net__body > ins {
	max-width: 100%;
}

.fxad-net__cp {
	max-width: 100%;
	text-align: center;
}

.fxad-net__cp iframe {
	max-width: 100%;
}

.fxad-dev--mo {
	display: none;
}

@media (max-width: 767px) {
	.fxad-net__body {
		max-width: min(100%, var(--fxad-net-w-m, 100%));
		aspect-ratio: var(--fxad-net-ar-m, auto);
	}

	.fxad-dev--pc {
		display: none;
	}

	.fxad-dev--mo {
		display: block;
	}
}

/* 안 채워졌을 때 — 예약한 칸은 유지한다(밀림 0). 대체(모집 카드)가 있으면 칸 안에 들어간다. */
.fxad--net-empty > .fxad-net__cap {
	visibility: hidden;
}

.fxad--net-fb > .fxad-net__cap {
	display: none;
}

.fxad--net-fb .fxad-net__body > .fxad {
	margin: 0;
}

.fxad-net__body--cp {
	aspect-ratio: auto;
	min-height: var(--fxad-net-cp-h, 0);
}

@media (max-width: 767px) {
	.fxad-net__body--cp {
		aspect-ratio: auto;
	}
}

/* 애드센스: 광고 칸은 예약한 칸을 그대로 채운다(광고가 칸 크기를 바꾸지 않는다). */
.fxad--net-adsense .fxad-net__body > ins.adsbygoogle {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}