/* Cooly WordPress 테마 전용 추가 스타일
   site-b 의 style.css 는 그대로 두고, WordPress 에서만 필요한 것(회원 링크, 일반 페이지 본문, 404,
   Fluent Forms 양식 외관)을 여기에 둠. 규칙: hover 시각 변화 없음 / 한글 자간 0 / 한글 14px 이상 */

/* ---------- 헤더 오른쪽 회원 링크 ---------- */
.main-nav .nav-auth {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 6px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
}

.main-nav .nav-auth svg {
	width: 16px;
	height: 16px;
	flex: none;
	/* 모바일 Safari 에서 아이콘 선이 사라지고 테두리만 남는 현상(사용자 보고). 메뉴 글자색이 color-mix(currentColor …) 라
	   stroke="currentColor" 가 그 색을 못 받는 것으로 보고, 색을 직접 주고 투명도로 다른 메뉴(62%)와 밝기를 맞춤 */
	stroke: var(--snow);
	opacity: 0.62;
}

.site-header.on-light-hero .nav-auth svg {
	stroke: var(--ink);
}

.main-nav .nav-auth[aria-current='page'] svg {
	opacity: 1;
}

@media (max-width: 720px) {
	.main-nav .nav-auth {
		padding-inline: 10px;
	}

	.main-nav .nav-auth span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ---------- 일반 페이지 / 단일 글 (본문 편집기로 쓴 글) ---------- */
.page-plain {
	padding: calc(var(--header-h) + 56px) 0 clamp(72px, 9vw, 140px);
}

.page-plain .wrap {
	display: grid;
	gap: clamp(28px, 4vw, 48px);
}

.page-head {
	display: grid;
	gap: 16px;
	max-width: 760px;
}

.page-head h1 {
	font-size: clamp(36px, 4.6vw, 72px);
	line-height: 1.08;
}

.page-head .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: baseline;
}

/* 편집기 본문. 사용자 입력 글이라 한글이 올 수 있어 14px 이상, 자간 0 */
.prose {
	max-width: 720px;
	font-size: 17px;
	line-height: 1.85;
	color: var(--mist);
}

.prose > * + * {
	margin-top: 1.2em;
}

.prose h2,
.prose h3,
.prose h4 {
	margin-top: 2em;
	color: var(--snow);
}

.prose h2 {
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.2;
}

.prose h3 {
	font-size: clamp(21px, 2vw, 26px);
}

.prose h4 {
	font-size: 18px;
}

.prose p {
	text-wrap: pretty;
}

.prose strong {
	color: var(--snow);
	font-weight: 600;
}

.prose a {
	color: var(--snow);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-color: var(--ice);
	text-decoration-thickness: 1.5px;
}

.prose ul,
.prose ol {
	padding-left: 1.4em;
}

.prose ul li {
	list-style: disc;
}

.prose ol li {
	list-style: decimal;
}

.prose li + li {
	margin-top: 0.4em;
}

.prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 2px solid var(--ice);
	color: var(--snow);
	font-size: 1.05em;
}

.prose img,
.prose video,
.prose iframe {
	max-width: 100%;
	height: auto;
	border-radius: var(--r);
}

.prose figure {
	margin: 1.8em 0;
}

.prose figcaption,
.prose .wp-caption-text {
	margin-top: 10px;
	font-size: 14px;
	color: var(--fog);
}

.prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.4em 0;
}

.prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--slate);
}

.prose pre {
	padding: 18px 20px;
	border-radius: var(--r);
	background: var(--void);
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
}

.prose pre code {
	padding: 0;
	background: none;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.prose th,
.prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.prose th {
	color: var(--snow);
	font-weight: 600;
}

.prose .alignleft {
	float: left;
	margin: 0.4em 1.4em 1em 0;
}

.prose .alignright {
	float: right;
	margin: 0.4em 0 1em 1.4em;
}

.prose .aligncenter {
	display: block;
	margin-inline: auto;
}

.prose::after {
	content: '';
	display: block;
	clear: both;
}

/* ---------- 404 ---------- */
.notfound {
	min-height: 100svh;
	display: grid;
	align-content: center;
	padding: calc(var(--header-h) + 40px) 0 80px;
}

.notfound .wrap {
	display: grid;
	gap: 22px;
	justify-items: start;
}

.notfound h1 {
	font-size: clamp(40px, 6vw, 96px);
	line-height: 1.02;
}

.notfound p {
	max-width: 36em;
	font-size: clamp(16px, 1.4vw, 19px);
	color: var(--mist);
}

.notfound .hero-cta {
	margin-top: 8px;
}

/* ---------- Contact : Fluent Forms 양식을 site-b 의 .field / .input 외관으로 ---------- */
.contact .ff-form-wrap,
.contact .fluentform {
	max-width: none; /* 왼쪽 열 폭을 다 씀 (열 폭은 style.css 의 .contact-main 이 정함) */
}

.contact .frm-fluent-form {
	display: grid;
	gap: 26px;
}

.contact .ff_screen_reader_title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.contact .ff-el-group {
	margin: 0;
}

/* 두 칸 행 (이름·회사 / 이메일·전화) */
.contact .ff-t-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
}

.contact .ff-t-cell {
	width: auto;
	padding: 0;
	min-width: 0;
}

.contact .ff-el-input--label {
	margin-bottom: 8px;
}

.contact .ff-el-input--label label {
	padding: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--mist);
}

/* 필수 표시(*)는 두지 않고, 선택 항목만 라벨에 Optional 이라고 적음 */
.contact .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.contact .fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before,
.contact .ff-el-input--label.ff-el-is-required label::after,
.contact .ff-el-input--label.ff-el-is-required label::before {
	content: none;
}

/* 입력 칸. Fluent 기본 CSS(밝은 회색 #dadbdd 테두리)보다 특이성을 올려 테마 테두리(흰색 32%)가 적용되게 함 */
.contact .fluentform .ff-el-form-control {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--slate);
	color: var(--snow);
	font: 400 16px/1.6 var(--font-ko);
	letter-spacing: 0;
	box-shadow: none;
	transition: none;
}

.contact .ff-el-form-control::placeholder {
	color: var(--fog);
}

/* 포커스: Fluent 기본 CSS 가 바탕을 흰색으로 바꿔 튀므로 특이성을 올려 어두운 바탕을 유지하고 테두리만 아이스색으로 */
.contact .fluentform .ff-el-form-control:focus,
.contact .fluentform .ff-el-form-control:focus-visible {
	outline: none;
	border-color: var(--ice);
	background: var(--slate);
	color: var(--snow);
	box-shadow: none;
}

/* 브라우저 자동완성 바탕(흰색·노란색)도 어두운 바탕으로 */
.contact .fluentform .ff-el-form-control:-webkit-autofill,
.contact .fluentform .ff-el-form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--snow);
	-webkit-box-shadow: 0 0 0 1000px var(--slate) inset;
	box-shadow: 0 0 0 1000px var(--slate) inset;
	caret-color: var(--snow);
}

.contact textarea.ff-el-form-control {
	min-height: 180px;
	resize: vertical;
}

/* 주제 라디오를 알약(chip)으로 */
.contact .ff-el-input--content .ff-el-form-check {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 0;
}

.contact .ff-el-form-check-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-weight: 600;
	color: var(--mist);
	cursor: pointer;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.contact .ff-el-form-check-label .ff-el-form-check-input[type='radio'] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.contact .ff-el-form-check-label:has(.ff-el-form-check-input[type='radio']:checked) {
	background: var(--snow);
	border-color: var(--snow);
	color: var(--ink);
}

.contact .ff-el-form-check-label:has(.ff-el-form-check-input[type='radio']:focus-visible) {
	outline: 2px solid var(--ice);
	outline-offset: 3px;
}

/* 동의 체크박스. 마크업: .ff-el-tc > label.ff_tc_label > span.ff_tc_checkbox > input, div.ff_t_c(문구)
   Fluent Forms 기본 CSS 가 라벨을 table-row, 칸을 table-cell 로 두어 체크와 문구가 붙으므로 특이성을 올려 그리드로 바꿈 */
.contact .fluentform .ff-el-tc,
.contact .fluentform .ff-el-form-check.ff-el-tc {
	display: block;
	margin: 0;
}

.contact .fluentform .ff-el-tc .ff_tc_label,
.contact .fluentform .ff-el-tc .ff-el-form-check-label {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 12px;
	align-items: center; /* 체크를 문구와 세로 가운데로 */
	padding: 0;
	margin: 0;
	border: 0;
	min-height: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.7;
	color: var(--mist);
	cursor: pointer;
}

.contact .fluentform .ff-el-tc .ff_tc_checkbox {
	display: block;
	line-height: 0;
	padding: 0;
}

/* 체크박스: 기본(흰 바탕) 대신 입력 칸과 같은 어두운 바탕·테두리. 체크하면 아이스색 바탕에 잉크색 체크 표시 */
.contact .fluentform .ff-el-tc input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--slate) center / 14px 14px no-repeat;
	cursor: pointer;
}

.contact .fluentform .ff-el-tc input[type='checkbox']:checked {
	border-color: var(--ice);
	background-color: var(--ice);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314181c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.contact .fluentform .ff-el-tc input[type='checkbox']:focus-visible {
	outline: 2px solid var(--ice);
	outline-offset: 3px;
}

.contact .fluentform .ff-el-tc .ff_t_c,
.contact .fluentform .ff-el-tc p {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.7;
}

/* 전송 버튼: site-b 의 .btn--accent */
.contact .ff_submit_btn_wrapper {
	margin: 0;
}

.contact .ff-btn-submit {
	display: inline-flex !important; /* Fluent 의 .ff_btn_style 이 inline-block 으로 덮어써서 */
	align-items: center;
	justify-content: center;
	gap: 16px;
	justify-content: space-between; /* 글자는 왼쪽, 화살표는 오른쪽 끝 */
	min-width: 280px;
	min-height: 64px;
	padding: 0 28px 0 32px;
	border: 1px solid var(--ice) !important;
	border-radius: var(--r-sm);
	background: var(--ice) !important;
	color: var(--ink) !important;
	font: 600 17px/1.2 var(--font-ko);
	letter-spacing: 0;
	cursor: pointer;
	opacity: 1;
}

/* 오른쪽 위로 뻗는 화살표 (lucide arrow-up-right). 버튼 글자는 Fluent Forms 설정이라 아이콘은 CSS 마스크로 붙임 */
.contact .ff-btn-submit::after {
	content: '';
	display: inline-block;
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contact .ff-btn-submit:active {
	transform: translateY(1px);
}

.contact .ff-btn-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* 오류·완료 문구 */
.contact .ff-el-is-error .ff-el-form-control {
	border-color: #ff8a80;
}

.contact .ff-el-is-error .text-danger,
.contact .ff-errors-in-stack,
.contact .ff-message-error {
	font-size: 14px;
	color: #ff8a80;
	margin-top: 6px;
}

.contact .ff-message-success {
	margin-top: 26px;
	max-width: 720px;
	padding: 18px 20px;
	border: 1px solid color-mix(in srgb, var(--ice) 40%, transparent);
	border-radius: var(--r-sm);
	background: color-mix(in srgb, var(--ice) 8%, transparent);
	font-size: 16px;
	font-weight: 500;
	color: var(--ice);
}

.contact .ff-message-success p {
	margin: 0;
}

/* Fluent Forms 가 넣는 기본 여백 */
.contact .ff-el-help-message {
	font-size: 14px;
	color: var(--fog);
}

.contact .ff-el-input--content .ff-el-form-hide_label {
	display: none;
}

/* 양식이 아직 없을 때 */
.contact .form-missing {
	max-width: 720px;
	padding: 20px 22px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-sm);
	font-size: 15px;
	color: var(--mist);
}

@media (max-width: 720px) {
	/* 두 칸 행을 한 열로 쌓을 때 행 간격은 0. 필드(.ff-el-group)의 아래 여백 20px 이 이미 있어 다른 필드와 같은 20px 간격이 됨 */
	.contact .ff-t-container {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	/* 모바일 섹션 상하 여백 축소 */
	.page-plain {
		padding-bottom: 40px;
	}

	.notfound {
		padding-bottom: 48px;
	}

	/* 전송 버튼: 모바일은 양식 폭 가득 */
	.contact .ff_submit_btn_wrapper {
		display: block;
	}

	.contact .ff-btn-submit {
		width: 100%;
		min-width: 0;
	}
}

/* 아주 좁은 화면(360px 이하): style.css 의 메뉴 축소와 맞춰 회원 아이콘 칸도 줄임 */
@media (max-width: 360px) {
	.main-nav .nav-auth {
		margin-left: 0;
		padding-inline: 8px;
	}
}