/* Scoped Figma Semantic · Color tokens (Light / Dark), verified 2026-09-29.
 * Existing theme --color-content-primary means brand, unlike Figma content/primary.
 * No quote-selection token exists: selected paragraphs use action/primary/pressed.
 */
[data-quote-ready], .quote-share-controls, .quote-card-preview, .quote-share-hint {
	/* Quote UI uses the HTML prototype font; the main UI uses Inter. */
	--quote-font-ui: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
	--quote-hint-background: #fff;
	--quote-hint-content: #26262a;
	--quote-background-elevated: #fff;
	--quote-border-default: var(--color-border-neutral, #ddd);
	--quote-border-focus: var(--color-content-primary, #fb746e);
	--quote-content-primary: var(--color-content-neutral-strong, #000);
	--quote-content-on-brand: var(--color-content-white-in-card, #fff);
	--quote-content-disabled: #999;
	--quote-action-primary-default: var(--color-content-primary, #fb746e);
	--quote-action-primary-hover: #de635d80;
	--quote-action-primary-pressed: #de635d80;
	--quote-action-secondary-default: transparent;
	--quote-action-secondary-hover: #fcf3f2;
	--quote-action-secondary-pressed: #ebebeb;
	--quote-action-disabled: #ebebeb;
}
html[data-theme="dark"] [data-quote-ready],
html[data-theme="dark"] .quote-share-controls,
body[data-schema="dark"] [data-quote-ready],
body[data-schema="dark"] .quote-share-controls,
html[data-theme="dark"] .quote-card-preview,
body[data-schema="dark"] .quote-card-preview,
html[data-theme="dark"] .quote-share-hint,
body[data-schema="dark"] .quote-share-hint {
	--quote-hint-background: #45454d;
	--quote-hint-content: #f2f2f2;
	--quote-background-elevated: #353535;
	--quote-content-primary: var(--color-content-neutral-strong, #fff);
	--quote-border-default: var(--color-border-neutral, #3e3e3e);
	--quote-content-disabled: #7c7c7c;
	--quote-action-secondary-hover: #363636;
	--quote-action-secondary-pressed: #3e3e3e;
	--quote-action-disabled: #3e3e3e;
}
/* Explicit reader backgrounds take precedence over the site-wide dark theme. */
body[data-schema="light"] .quote-share-hint,
body[data-schema="pink"] .quote-share-hint {
	--quote-hint-background: #fff;
	--quote-hint-content: #26262a;
}
[data-quote-ready], [data-quote-ready] *, .quote-share-controls {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
[data-quote-block] {
	/* Figma spacing/8 and radius/card. Extend the box, keeping text aligned. */
	padding-inline: 8px;
	margin-inline: -8px;
	border-radius: 12px;
	-webkit-tap-highlight-color: transparent;
}
[data-quote-block][data-quote-selected] {
	background: var(--quote-action-primary-pressed);
	color: var(--quote-content-primary);
}
[data-quote-block]:focus-visible {
	outline: 2px solid var(--quote-border-focus);
	outline-offset: 2px;
}
.quote-share-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	position: fixed;
	box-sizing: border-box;
	z-index: 10000;
	bottom: calc(12px + env(safe-area-inset-bottom));
	/* Size and place the bar against the viewport, without auto margins. */
	left: max(12px, calc((100vw - 560px) / 2));
	right: auto;
	width: calc(100vw - 24px);
	max-width: 560px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--quote-border-default);
	border-radius: 14px;
	background: var(--quote-background-elevated);
	color: var(--quote-content-primary);
	letter-spacing: 0;
	font: 12px/16px var(--quote-font-ui);
}
.quote-share-controls[hidden] { display: none; }
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
	.quote-share-controls {
		bottom: calc(12px + env(safe-area-inset-bottom) + var(--quote-covered-bottom, 0px));
	}
}
/* Show only quote actions while selecting; preserve the reader's own hidden state. */
body:has([data-quote-selecting]) .text-reading-footer {
	visibility: hidden;
	pointer-events: none;
}
/* Figma Selection bar layout with the reader design system Light / Dark tokens. */
.quote-share-controls p {
	flex: 1;
	min-width: 0;
	margin: 0;
	font: inherit;
	overflow-wrap: anywhere;
}
.quote-share-controls button {
	box-sizing: border-box;
	flex-shrink: 0;
	border: 0;
	border-radius: 12px;
	font: 500 14px/20px var(--quote-font-ui);
	cursor: pointer;
}
.quote-share-controls [data-quote-cancel] {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 36px;
	height: 36px;
	padding: 10px;
	background: var(--quote-action-secondary-pressed);
	color: var(--quote-content-primary);
}
/* Extend the hit area without changing the icon button's visible size. */
.quote-share-controls [data-quote-cancel]::after {
	content: "";
	position: absolute;
	inset: -4px;
}
.quote-share-close-icon {
	display: block;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../images/quote-share/close.svg") center / 16px 16px no-repeat;
	mask: url("../images/quote-share/close.svg") center / 16px 16px no-repeat;
}
.quote-share-controls [data-quote-confirm] {
	min-height: 40px;
	padding: 10px 14px;
	background: var(--quote-action-primary-default);
	color: var(--quote-content-on-brand);
	white-space: nowrap;
}
.quote-share-controls button:focus-visible {
	outline: 2px solid var(--quote-border-focus);
	outline-offset: 2px;
}
.quote-share-controls button:disabled { cursor: not-allowed; }
.quote-share-controls [data-quote-confirm]:disabled {
	background: var(--quote-action-disabled);
	color: var(--quote-content-disabled);
}
.quote-share-controls .quote-share-limit {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 8px);
	padding: 10px 14px;
	border: 1px solid var(--quote-border-default);
	border-radius: 12px;
	background: var(--quote-background-elevated);
	color: var(--quote-content-primary);
	text-align: center;
	pointer-events: none;
	font: 500 14px/20px var(--quote-font-ui);
}
.quote-share-controls .quote-share-limit[hidden] { display: none; }

.quote-card-preview {
	position: fixed;
	inset: auto 0 var(--quote-covered-bottom, 0px);
	box-sizing: border-box;
	width: min(100%, 480px);
	max-width: 100%;
	max-height: var(--quote-visible-height, 100dvh);
	margin: 0 auto;
	padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
	border: 0;
	border-radius: 18px 18px 0 0;
	background: var(--quote-background-elevated);
	color: var(--quote-content-primary);
	letter-spacing: 0;
	font: 14px/20px var(--quote-font-ui);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.quote-card-preview[open] { display: flex; flex-direction: column; gap: 14px; }
.quote-card-preview::backdrop { background: rgb(0 0 0 / 60%); }
.quote-card-preview header { display: flex; align-items: center; justify-content: space-between; }
/* Keep the requested larger title while using the prototype font and weight. */
.quote-card-preview h2 { margin: 0; font: 500 20px/28px var(--quote-font-ui); color: inherit; }
.quote-card-preview p { margin: 0; font: inherit; color: inherit; }
.quote-card-preview [data-card-status]:empty { display: none; }
.quote-card-preview [data-card-image] { display: block; width: 100%; height: auto; flex-shrink: 0; -webkit-touch-callout: default; user-select: auto; }
.quote-card-preview [hidden] { display: none; }
.quote-card-preview button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 0;
	border-radius: 12px;
	padding: 10px 14px;
	font: 500 14px/20px var(--quote-font-ui);
	background: var(--quote-action-secondary-pressed);
	color: var(--quote-content-primary);
	cursor: pointer;
}
.quote-card-preview [data-card-close] { position: relative; padding: 8px; border-radius: 10px; }
.quote-card-preview [data-card-close]::after { content: ""; position: absolute; inset: -6px; }
.quote-card-actions { display: flex; gap: 8px; }
.quote-card-actions button { position: relative; flex: 1; min-height: 40px; }
.quote-card-actions button::after { content: ""; position: absolute; inset: -2px 0; }
.quote-card-preview [data-card-share] { background: var(--quote-action-primary-default); color: var(--quote-content-on-brand); }
.quote-card-preview button:disabled { opacity: .5; cursor: not-allowed; }
.quote-card-preview button:focus-visible { outline: 2px solid var(--quote-border-focus); outline-offset: 2px; }
.quote-card-save-icon, .quote-card-share-icon { display: block; width: 16px; height: 16px; background: currentColor; }
.quote-card-save-icon { mask: url("../images/quote-share/save.svg") center / 16px 16px no-repeat; -webkit-mask: url("../images/quote-share/save.svg") center / 16px 16px no-repeat; }
.quote-card-share-icon { mask: url("../images/quote-share/share.svg") center / 16px 16px no-repeat; -webkit-mask: url("../images/quote-share/share.svg") center / 16px 16px no-repeat; }

.quote-share-hint {
	position: fixed;
	z-index: 10000;
	top: calc(var(--quote-hint-top, 12px) + env(safe-area-inset-top));
	/* Use explicit viewport bounds, like the selection bar on mobile. */
	left: max(16px, calc((100vw - 560px) / 2));
	right: auto;
	width: calc(100vw - 32px);
	max-width: 560px;
	box-sizing: border-box;
	pointer-events: none;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	/* Follow the reader theme; lift the dark surface above the reading background. */
	border: 1px solid var(--quote-border-default);
	background: var(--quote-hint-background);
	color: var(--quote-hint-content);
	font: 14px/20px var(--quote-font-ui);
}
.quote-share-hint > span { flex: 1; }
.quote-share-hint svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--quote-action-primary-default); }