/* SnapHub shared site chrome and reusable primitives. */

/* Shared interaction contract
 * - Touch highlight and pointer/touch focus residue are owned here only.
 * - Component/page CSS owns keyboard :focus-visible appearance.
 * - Labels are included because Figma toggles and consent controls are label-driven.
 */
:where(a, button, [role="button"], summary, label) {
	-webkit-tap-highlight-color: transparent;
}

@supports selector(:focus-visible) {
	:where(a, button, [role="button"], summary):focus:not(:focus-visible) {
		outline: none;
	}
}

/*
 * Pointer/programmatic focus must keep semantic focus without leaving a visual ring.
 * main.js switches data-focus-modality to keyboard before keyboard-driven focus moves,
 * so native/component :focus-visible styling remains available for keyboard navigation.
 * Form controls are intentionally excluded because their focused border is an input-state cue.
 */
:root:not([data-focus-modality="keyboard"])
	:where(a, button, [role="button"], summary, [tabindex]:not(input):not(select):not(textarea)):focus {
	outline: none !important;
}

/* Shared favorite control keyboard focus. */
.favorite-inline:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Page chrome theme contract.
 * Page-specific CSS decides the pink background treatment.
 * White theme is shared by all pages and keeps component brand colors intact.
 */
.theme--white {
	--page-header-bg: #fff;
	--page-header-border: #ffadb0;
}

.theme--pink {
	--page-header-border: rgba(255,255,255,.7);
}

.site-header {
	height: 80px;
	border-bottom: 1px solid var(--page-header-border,rgba(255,255,255,.7));
	background: var(--page-header-bg,#fff);
	position: relative;
	z-index: 100;
}

.site-header__inner {
	width: min(var(--desktop-content),calc(100% - (var(--page-gutter)*2)));
	height: 100%;
	min-width: 0;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.brand--image {
	display: block;
	width: 180px;
	height: auto;
	flex: 0 0 auto;
	margin-left: 5px;
}

.brand--image img {
	width: 100%;
	height: auto;
}

.primary-nav {
	margin-left: 327px;
	display: flex;
	align-items: center;
	gap: 82px;
	font-size: 16px;
	line-height: 19px;
	font-weight: 500;
	letter-spacing: 0;
}

.primary-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	column-gap: 5px;
	padding: 30px 0;
}

.primary-nav__lab-icon {
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 1;
	color: var(--primary);
}

.primary-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 19px;
	height: 2px;
	background: var(--primary);
	transform: scaleX(0);
	transition: transform .2s ease;
}

.primary-nav a:focus-visible::after {
	transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
	.primary-nav a:hover::after {
		transform: scaleX(1);
	}
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	flex: 0 0 auto;
}

.header-button {
	width: 108px;
	height: 43px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 19px;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.header-button--login {
	min-width: 108px;
	border: 1px solid var(--line-strong);
	background: #fff;
	color: #000;
	gap: 8px;
	letter-spacing: 0;
}

.header-button__login-icon {
	display: block;
	width: 16px;
	height: 18px;
	flex: 0 0 16px;
	background: currentColor;
	-webkit-mask: url("../svg/common/icon-login.svg") center / contain no-repeat;
	mask: url("../svg/common/icon-login.svg") center / contain no-repeat;
}

.header-button--login span {
	display: block;
	white-space: nowrap;
}

.header-button--join {
	min-width: 108px;
	background: var(--primary-soft);
	color: #fff;
}

.mobile-menu-button {
	display: none;
}

/* Favorite icon system: one renderer for main/list/detail cards.
	 The uploaded Figma SVGs define the off(+)/on(check) shapes.
	 Contexts only override --favorite-color; visual size is 32px for PC/tablet and 24px for mobile. State is aria-pressed. */
[data-role="favorite"] {
	--favorite-color: #fff;
	--favorite-size: 32px;
}

[data-role="favorite"] .favorite-icon {
	display: block;
	width: var(--favorite-size);
	height: var(--favorite-size);
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
}

[data-role="favorite"]::before {
	content: "";
	display: block;
	width: var(--favorite-size);
	height: var(--favorite-size);
	background: var(--favorite-color);
	-webkit-mask: url("../svg/common/favorite-off.svg") center / contain no-repeat;
	mask: url("../svg/common/favorite-off.svg") center / contain no-repeat;
	pointer-events: none;
}

[data-role="favorite"][aria-pressed="true"]::before {
	-webkit-mask-image: url("../svg/common/favorite-on.svg");
	mask-image: url("../svg/common/favorite-on.svg");
}

.site-footer {
	position: relative;
	height: 370px;
	border-top: 1px solid #ffadb0;
	background: #fff;
}

.site-footer__inner {
	position: relative;
	width: min(var(--footer-content),calc(100% - (var(--page-gutter)*2)));
	height: 100%;
	min-width: 0;
	margin: 0 auto;
	padding-top: 30px;
}

.footer-brand-column {
	position: absolute;
	left: 0;
	top: 30px;
	width: 250px;
}

.footer-brand-row {
	display: flex;
	align-items: center;
	gap: 9px;
}

.brand--footer {
	width: 175px;
	margin-left: 0;
}

.footer-social {
	display: flex;
	gap: 10px;
}

.footer-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	color: transparent;
	display: grid;
	place-items: center;
	font-size: 0;
	flex: 0 0 36px;
}

.footer-social__link--instagram {
	background-image: url("../images/footer-instagram-fidelity.png");
}

.footer-social__link--kakao {
	background-image: url("../images/footer-talk-fidelity.png");
}

.footer-social a>i,
.footer-social__talk {
	display: none;
}

.footer-notice {
	margin-top: 29px;
	font-size: 16px;
	line-height: 19px;
	font-weight: 400;
	letter-spacing: -.8px;
	color: var(--ink);
	white-space: nowrap;
}

.company-info {
	width: max-content;
	max-width: 100%;
	margin-top: 8px;
	display: grid;
	gap: 8px;
	color: var(--text-disabled);
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;
	letter-spacing: -.7px;
}

.company-info div {
	display: flex;
	align-items: center;
	min-width: 0;
	white-space: nowrap;
}

.company-info dt {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.company-info dt::after {
	content: "";
	width: 1px;
	height: 12px;
	margin: 0 8px;
	background: #b8b8b8;
}

.company-info dd {
	min-width: 0;
}

.copyright {
	margin-top: 17px;
	color: var(--primary-border);
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;
	letter-spacing: -.7px;
	white-space: nowrap;
}

.footer-nav-column {
	position: absolute;
	left: 384px;
	top: 99px;
	display: grid;
	grid-template-columns: 150px 137px 315px;
	column-gap: 47px;
}

.footer-nav-column section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--ink);
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;
	letter-spacing: -.7px;
}

.footer-nav-column h3 {
	margin-bottom: 7px;
	color: var(--ink);
	font-size: 16px;
	line-height: 19px;
	font-weight: 700;
	letter-spacing: -.8px;
}

.footer-contact strong,
.footer-contact a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-contact strong {
	font-weight: 500;
}

.footer-contact a {
	font-weight: 400;
}

.footer-nav-column .footer-contact {
	gap: 6px;
}

.footer-contact p {
	padding-left: 23px;
	line-height: 17px;
	color: var(--text-disabled);
}

.footer-contact small {
	color: var(--text-disabled);
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;
	letter-spacing: -.7px;
}

.footer-contact__arrow {
	display: inline-grid;
	place-items: center;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	margin-left: -4px;
	border-radius: 50%;
	background: url("../images/footer-contact-arrow-fidelity.png") center/14px 14px no-repeat;
	color: transparent;
	font-size: 0;
}

.footer-contact__arrow>i {
	display: none;
}

.footer-contact>strong>i,
.footer-contact>a>i {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-left: -3px;
	border-radius: 50%;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	color: transparent;
	display: block;
	font-size: 0;
}

.footer-contact>strong>i.fa-clock {
	background-image: url("../images/footer-contact-time-fidelity.png");
}

.footer-contact>a>i.fa-phone {
	background-image: url("../images/footer-contact-phone-fidelity.png");
}

.footer-contact>a>i.fa-envelope {
	background-image: url("../images/footer-contact-email-fidelity.png");
}

.footer-contact>a>i.fa-circle-question {
	background-image: url("../images/footer-contact-inquiry-fidelity.png");
}

.header-button:focus-visible,
.footer-policy a:focus-visible,
.footer-nav-column a:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

.footer-policy {
	position: absolute;
	right: 5px;
	top: 42px;
	display: flex;
	gap: 23px;
	color: #a7a7a7;
	font-size: 14px;
	line-height: 17px;
	font-weight: 500;
	letter-spacing: -.7px;
	white-space: nowrap;
}

.footer-policy .is-emphasis {
	color: var(--primary);
}

.mobile-footer-links {
	display: none;
}

/*
 * TOP button design theme
 * - .top-button--theme-brand : SnapHub pink accent (default/recommended)
 * - .top-button--theme-clean : neutral white minimal
 *
 * Keep one theme modifier only. Position/visibility behavior is shared.
 */
.top-button {
	--top-button-bg: #fff;
	--top-button-border: #d8d8d8;
	--top-button-color: #777;
	--top-button-shadow: 0 8px 24px rgba(0,0,0,.1);
	--top-button-shadow-hover: 0 12px 30px rgba(0,0,0,.14);
	--top-button-color-hover: var(--primary);

	position: fixed;
	z-index: 800;
	right: 32px;
	bottom: 32px;
	width: 64px;
	height: 64px;
	border: 1px solid var(--top-button-border);
	border-radius: 50%;
	background: var(--top-button-bg);
	box-shadow: var(--top-button-shadow);
	color: var(--top-button-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(12px);
	transition:
		opacity .2s ease,
		transform .2s ease,
		visibility .2s,
		border-color .2s ease,
		color .2s ease,
		box-shadow .2s ease;
}

.top-button--theme-brand {
	--top-button-bg: linear-gradient(145deg,#fff 0%,#fff4f5 100%);
	--top-button-border: #ffadb0;
	--top-button-color: #ff4848;
	--top-button-shadow:
		0 10px 28px rgba(255,72,72,.16),
		inset 0 1px 0 rgba(255,255,255,.9);
	--top-button-shadow-hover:
		0 14px 34px rgba(255,72,72,.22),
		inset 0 1px 0 rgba(255,255,255,.95);
	--top-button-color-hover: #ff3138;
}

.top-button--theme-clean {
	--top-button-bg: #fff;
	--top-button-border: #d8d8d8;
	--top-button-color: #777;
	--top-button-shadow: 0 8px 24px rgba(0,0,0,.1);
	--top-button-shadow-hover: 0 12px 30px rgba(0,0,0,.14);
	--top-button-color-hover: var(--primary);
}

.top-button span {
	font-size: 10px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: .08em;
}

.top-button i {
	font-size: 12px;
	line-height: 1;
}

.top-button.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.top-button.is-visible:active {
	transform: scale(.96);
}

.top-button:focus-visible {
	outline: 3px solid rgba(255,72,72,.22);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.top-button {
		transition: none;
	}
}

@media (min-width: 1025px) {
	.site-header {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	.top-button.is-visible:hover {
		color: var(--top-button-color-hover);
		box-shadow: var(--top-button-shadow-hover);
		transform: translateY(-3px);
	}
}

.mobile-only-text {
	display: none;
}

/* ==========================================================================
	 Figma common chrome precision pass — desktop 1920 reference
	 Source of truth: SNAPHUB_상세(3).svg + Group 201.svg + Group 202.svg.
	 Only apply exact 1920-class desktop coordinates; compact desktop/tablet
	 keeps the existing responsive layout instead of extrapolating Figma values.
	 ========================================================================== */
@media (min-width: 1600px) {
	/* Group 202 starts x=270 while a centered 1384px container starts x=268. */
	.site-footer__inner {
		left: 2px;
	}

	/* Full-detail footer line y=3143.5, Group 202 y=3186 => +42.5px. */
	.footer-brand-column {
		top: 42.5px;
	}

	/* Group 202 navigation ink begins at y=69 relative to the group. */
	.footer-nav-column {
		top: 111.5px;
	}

	/* Group 202 policy ink begins at y=12 relative to the group. */
	.footer-policy {
		top: 54.5px;
	}

}