/* ===================
   마이페이지 「세팅 자료 보내기」 칸 (S9, 2026-10-20)
   마이페이지 대시보드(mypage-home.css)와 같은 v2 토큰·같은 문법: 상자 없이 선·여백, 상태 = 색 + 글자.
   섹션 위치는 mypage-home.css 의 .fhb-home > .fhb-home__section--setup { order } 가 정한다.
   =================== */

.fhb-home .fhb-home__section--setup { padding-top: 32px; }
.fhb-setup__lead { margin: -4px 0 8px; color: var(--fxm-faint); font-size: 15px; line-height: 1.6; }

.fhb-setup {
	display: grid;
	gap: 16px;
	padding: 24px 0;
	border-top: 1px solid var(--fxm-line-2);
	scroll-margin-top: 80px;
}
.fhb-setup:last-child { border-bottom: 1px solid var(--fxm-line-2); }

.fhb-setup__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fhb-setup__order { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; color: var(--fxm-ink); font-size: 16px; }
.fhb-setup__order strong { font-weight: 700; }
.fhb-setup__sub { color: var(--fxm-faint); font-size: 14px; }

.fhb-setup__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 26px;
	padding: 0 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
}
.fhb-setup__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fhb-setup__chip--warn { background: var(--fxm-warn-bg); color: var(--fxm-warn); }
.fhb-setup__chip--ok { background: var(--fxm-ok-bg); color: var(--fxm-ok); }

.fhb-setup__msg { margin: 0; padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.6; list-style: none; }
.fhb-setup__msg--ok { background: var(--fxm-ok-bg); color: var(--fxm-ok); }
.fhb-setup__msg--err { background: var(--fxm-danger-bg); color: var(--fxm-danger); }
.fhb-setup__msg li + li { margin-top: 4px; }

.fhb-setup__files { list-style: none; margin: 0; padding: 0; }
.fhb-setup__file {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px 16px;
	min-height: 48px;
	border-bottom: 1px solid var(--fxm-line-2);
	font-size: 14px;
}
.fhb-setup__file:first-child { border-top: 1px solid var(--fxm-line-2); }
.fhb-setup__file-name {
	min-width: 0;
	overflow: hidden;
	color: var(--fxm-ink);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: var(--fxm-line);
	text-underline-offset: 4px;
}
.fhb-setup__file-name:hover { text-decoration-color: var(--fxm-ink); }
.fhb-setup__file-size { color: var(--fxm-faint); }
.fhb-setup__del { margin: 0; }
.fhb-setup__del-btn {
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
	border: 0;
	background: none;
	color: var(--fxm-faint);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
	transition: color .2s ease;
}
.fhb-setup__del-btn:hover { color: var(--fxm-danger); }

.fhb-setup__form { display: grid; gap: 16px; }
.fhb-setup__field { display: grid; gap: 8px; min-width: 0; }
.fhb-setup__label { color: var(--fxm-ink); font-size: 14px; font-weight: 700; }
.fhb-setup__hint { margin: 0; color: var(--fxm-faint); font-size: 13px; line-height: 1.5; }
.fhb-setup__picked { margin: 0; color: var(--fxm-muted); font-size: 13px; line-height: 1.5; }
.fhb-setup__picked:empty { display: none; }
.fhb-setup__picked.is-warn { color: var(--fxm-danger); }

.fhb-setup__file-input,
.fhb-setup__text {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--fxm-field-line);
	border-radius: var(--fxm-radius-sm);
	background: var(--fxm-field-bg);
	color: var(--fxm-ink);
	font: inherit;
	font-size: 15px;
	transition: border-color .2s ease;
}
.fhb-setup__file-input { min-height: 44px; padding: 8px 12px; }
.fhb-setup__text { padding: 12px; line-height: 1.6; resize: vertical; }
.fhb-setup__file-input:hover,
.fhb-setup__text:hover { border-color: var(--fxm-faint); }
.fhb-setup__file-input:focus-visible,
.fhb-setup__text:focus-visible,
.fhb-setup__submit:focus-visible,
.fhb-setup__del-btn:focus-visible { outline: 2px solid var(--fxm-ink); outline-offset: 2px; }
.fhb-setup__file-input:disabled { background: var(--fxm-surface-2); color: var(--fxm-faint); }

.fhb-setup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fhb-setup__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 24px;
	border: 1px solid var(--fxm-accent);
	border-radius: 999px;
	background: var(--fxm-accent);
	color: var(--fxm-on-accent);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.fhb-setup__submit:hover { border-color: var(--fxm-accent-hover); background: var(--fxm-accent-hover); }
.fhb-setup__submit[disabled] { opacity: .6; cursor: progress; }
.fhb-setup__when { color: var(--fxm-faint); font-size: 13px; }

@media (max-width: 480px) {
	.fhb-setup__submit { width: 100%; }
	.fhb-setup__file { grid-template-columns: minmax(0, 1fr) auto; }
	.fhb-setup__file-size { grid-column: 1; grid-row: 2; }
	.fhb-setup__del { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
	.fhb-setup__file-input, .fhb-setup__text, .fhb-setup__submit, .fhb-setup__del-btn { transition: none; }
}