/* Hallmark · shape: app screen · genre: editorial · theme: Almanac (by request)
 * nav: wordmark only · signature: continuous Canvas image-search signal · states: empty, loading, error, results
 * axes: white/grotesk-sans/monochrome · posture: restrained · surface: absolute · copy: factual · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: E, the procedural motion needs phone inspection; removed the postcard, slide chrome and numbered menu */
/* Hallmark · waive 7b · surface: absolute, white paper and black ink pass contrast · nozoki uses the user's explicit monochrome palette in place of the Almanac slate */
/* Hallmark · dismissed 23 · nozoki has no separate accent hue; black foreground and the primary button follow the user's monochrome palette */
/* Hallmark · finish-review: subagent, ship; requested control states reviewed; results checked at desktop and phone widths */
:root {
  --cap-checkmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2025%22%3E%3Crect%20x%3D%22.5%22%20y%3D%22.5%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20d%3D%22m5%2012%205%205L20%207%22%2F%3E%3C%2Fsvg%3E");
  --cap-error-cross: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20d%3D%22m6%206%2012%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E");
  --container: 1180px;
  --font-display: "Hanken Grotesk", "Noto Sans KR", sans-serif;
  --font-body: "Noto Sans KR", sans-serif;
  --font-outlier: "IBM Plex Mono", monospace;
  --wordmark-size: 6rem;
  --gutter: 40px;
}
body { font-synthesis: none; word-break: keep-all; overflow-wrap: normal; }
html, body { overflow-x: clip; }
::selection { background: var(--color-ink); color: var(--color-paper); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
a { text-decoration-color: var(--color-ink); }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { text-wrap: pretty; overflow-wrap: break-word; }
h2 { font-size: var(--text-xl); line-height: 1.4; }
.masthead { padding-block: 48px; }
.identity { min-width: 0; }
.identity h1 { margin-inline-start: -.04em; font-size: var(--wordmark-size); line-height: 1; letter-spacing: -.065em; }
.identity h1 a { text-decoration: none; }
.description { margin-block-start: var(--space-sm); font-family: var(--font-display); font-size: var(--text-md); letter-spacing: -.01em; }
.section-heading { display: flex; flex-direction: column; gap: var(--space-sm); }
.section-heading p { font-size: var(--text-sm); }
.search-sheet { padding-block-start: var(--space-xl); border-block-start: var(--rule-bar) solid var(--color-ink); }
.search-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--space-2xl); margin-block-start: var(--space-xl); }
.upload-area { position: relative; min-width: 0; padding: var(--space-xl); border: var(--rule-hair) solid var(--color-ink); text-align: center; }
.upload-area.is-dragging { background: var(--color-ink); color: var(--color-paper); }
.upload-empty { min-height: 145px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-xs); text-align: center; }
.upload-icon { margin-block-end: var(--space-lg); }
.upload-empty > p { font-size: var(--text-sm); }
.file-label { display: flex; justify-content: center; align-items: center; min-height: 44px; width: fit-content; margin: var(--space-sm) auto 0; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: .35em; cursor: pointer; }
input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.upload-area:has(input:focus-visible) .file-label { outline: var(--rule-bar) solid var(--color-ink); outline-offset: 4px; }
.file-hint { display: block; margin-block-start: var(--space-xs); font-size: var(--text-xs); }
.preview-wrap { min-height: 160px; }
.preview-wrap img { width: 100%; height: 210px; object-fit: contain; }
.file-name { margin-block-start: var(--space-xs); font-size: var(--text-sm); overflow-wrap: anywhere; }
.search-controls { display: flex; min-width: 0; flex-direction: column; gap: var(--space-lg); justify-content: center; }
.privacy-note { font-size: var(--text-xs); line-height: 1.9; max-width: 36ch; }
cap-widget { min-height: 54px; display: flex; --cap-background: var(--color-paper); --cap-color: var(--color-ink); --cap-border-color: var(--color-ink); --cap-border-radius: var(--radius-pill); --cap-checkbox-border-radius: var(--radius-pill); --cap-checkbox-background: var(--color-paper); --cap-checkbox-border: 1px solid var(--color-ink); --cap-focus-ring: var(--color-ink); --cap-font: var(--font-body); --cap-widget-width: 100%; --cap-spinner-color: var(--color-ink); --cap-spinner-background-color: var(--color-paper); --cap-troubleshoot-color: var(--color-ink); --cap-invalid-border-color: var(--color-ink); --cap-invalid-ring-color: var(--color-ink); }
cap-widget:focus-visible, cap-widget:focus-within { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.button-primary { min-height: 52px; width: 100%; padding: var(--space-sm) var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-md); font-weight: 500; cursor: pointer; }
.button-primary:hover { background: var(--color-paper); color: var(--color-ink); }
.button-primary:active { transform: translateY(1px); }
.button-primary:disabled { background: var(--color-paper); color: var(--color-ink); border-style: dashed; cursor: not-allowed; transform: none; }
.queue-cancel { background: var(--color-paper); color: var(--color-ink); }
.helper { min-height: 2.5em; font-size: var(--text-xs); line-height: 1.8; }
.helper.is-error { text-decoration: underline; text-underline-offset: .15em; }
.captcha-error-panel { display: grid; gap: var(--space-sm); min-width: 0; font-size: var(--text-xs); }
.captcha-error-panel[hidden] { display: none; }
.captcha-error-panel .result-copy { width: 152px; }
.captcha-error-panel summary { cursor: pointer; }
.captcha-error-panel textarea { width: 100%; min-height: 15rem; margin-block-start: var(--space-sm); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font: inherit; overflow-wrap: anywhere; resize: vertical; }
.search-progress { margin-block-start: var(--space-xl); }
.search-progress-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); font-size: var(--text-sm); }
.search-progress-note { margin-block-start: var(--space-xs); font-size: var(--text-xs); }
.search-steps { list-style: none; padding: 0; margin: var(--space-lg) 0 0; }
.search-steps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); animation: search-step-enter var(--dur-micro) var(--ease-out); }
.search-step-state { font-size: var(--text-xs); white-space: nowrap; }
.search-progress.is-error progress { border-style: dashed; }
@keyframes search-step-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .search-steps li { animation: none; } }
#search-percent { white-space: nowrap; }
.no-script { margin-block-start: var(--space-lg); font-size: var(--text-sm); }
.results-section { margin-block-start: var(--space-2xl); }
.results-heading h2 { font-size: var(--text-sm); font-weight: 500; }
.results-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block-end: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-ink); }
.result-count { font-size: var(--text-sm); }
.empty-message { padding-block: var(--space-lg); font-size: var(--text-xs); }
.results-list { list-style: none; padding: 0; margin: 0; }
.results-list li { display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-lg) var(--space-xl); padding-block: var(--space-xl); border-block-end: var(--rule-hair) solid var(--color-rule); }
.result-header { grid-column: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); min-width: 0; }
.result-heading { min-width: 0; }
.result-metadata { margin-block-end: var(--space-xs); font-size: var(--text-xs); line-height: 1.7; overflow-wrap: anywhere; }
.result-title { max-width: none; font-family: var(--font-body); font-weight: 500; font-size: var(--text-lg); line-height: 1.65; letter-spacing: -.025em; overflow-wrap: anywhere; }
.result-similarity { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }
.result-score-label { font-size: var(--text-xs); white-space: nowrap; }
.result-score { font-size: var(--text-xl); line-height: 1.3; white-space: nowrap; }
.result-actions { grid-column: 2; display: flex; align-items: center; align-self: start; gap: var(--space-sm); min-width: 0; }
.result-link, .result-page-link, .result-copy { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); line-height: 1.5; white-space: nowrap; text-decoration: none; cursor: pointer; }
.result-page-link { inline-size: 144px; background: var(--color-ink); color: var(--color-paper); }
.result-link:hover, .result-copy:hover { background: var(--color-ink); color: var(--color-paper); }
.result-page-link:hover { background: var(--color-paper); color: var(--color-ink); }
.result-copy { inline-size: 96px; flex: none; }
.result-preview { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; align-self: start; width: 100%; min-width: 0; padding: var(--space-xs); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font: inherit; font-size: var(--text-xs); cursor: pointer; touch-action: manipulation; }
.result-preview-hint { display: flex; align-items: center; justify-content: center; min-height: 40px; width: 100%; line-height: 1.6; }
.result-preview:disabled { cursor: default; border-style: dashed; }
.result-preview-stage { position: relative; display: block; width: 100%; height: 180px; overflow: hidden; }
.result-preview img { display: block; width: 100%; height: 180px; object-fit: contain; filter: blur(20px); opacity: 0; visibility: hidden; transition: filter var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.result-preview[data-state="ready"] img { opacity: 1; visibility: visible; }
.result-preview img[hidden] { display: none; }
.result-preview.is-revealed img { filter: none; }
.result-preview-loader { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-md); }
.result-preview-loader::before { content: ""; width: 18px; height: 18px; border: var(--rule-bar) solid var(--color-ink); border-inline-end-color: var(--color-paper); animation: preview-loading calc(var(--dur-long) * 2) linear infinite; }
.result-preview-loader[hidden], .result-preview[data-state="error"] .result-preview-stage { display: none; }
@keyframes preview-loading { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .result-preview img { transition: none !important; } .result-preview-loader::before { animation: none !important; } }
.technology-section { margin-block-start: var(--space-3xl); border-block-start: var(--rule-bar) solid var(--color-ink); }
.technology-note { margin-block: var(--space-lg) var(--space-xl); font-size: var(--text-xs); line-height: 1.8; max-width: 75ch; }
.status-section { margin-block-start: var(--space-2xl); padding-block-start: var(--space-xl); border-block-start: var(--rule-bar) solid var(--color-ink); }
.status-heading h2 { font-size: var(--text-md); font-weight: 500; }
.status-heading { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-lg); }
.status-caption { font-size: var(--text-xs); }
.index-progress { margin-block-start: var(--space-2xl); }
.progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
#progress-label { font-size: var(--text-sm); }
#progress-value { font-size: var(--text-xl); line-height: 1.3; }
progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 4px; margin-block-start: var(--space-md); padding: 0; border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); }
progress::-webkit-progress-bar { background: var(--color-paper); }
progress::-webkit-progress-value { background: var(--color-ink); }
progress::-moz-progress-bar { background: var(--color-ink); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-xl) 0 0; }
.stats > div { min-width: 0; padding-block: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-ink); }
.stats dt { font-size: var(--text-xs); }
.stats dd { margin: var(--space-md) 0 0; font-size: var(--text-xl); }
#server-state { font-size: var(--text-md); }
.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.estimate { font-size: var(--text-xs); margin-inline-start: var(--space-xs); }
.status-footnote { margin-block-start: var(--space-lg); font-size: var(--text-xs); max-width: 75ch; }
.colophon { display: flex; justify-content: space-between; gap: var(--space-md); margin-block-start: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); border-block-start: var(--rule-hair) solid var(--color-ink); font-size: var(--text-xs); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
@media (max-width: 50rem) {
  .search-grid { gap: var(--space-lg); }
}
@media (max-width: 40rem) {
  :root { --gutter: 24px; --wordmark-size: 4.5rem; }
  .masthead { padding-block: var(--space-xl); }
  .description { font-size: var(--text-sm); }
  .search-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .search-sheet { padding-block-start: var(--space-lg); }
  .upload-area { padding: var(--space-lg); }
  .search-controls { gap: var(--space-md); }
  .results-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--space-lg) var(--space-md); padding-block: var(--space-lg); }
  .result-header { grid-column: 1 / -1; gap: var(--space-md); }
  .result-title { font-size: var(--text-md); }
  .result-metadata { font-size: .6875rem; }
  .result-score-label { font-size: .6875rem; }
  .result-score { font-size: var(--text-lg); }
  .result-preview { grid-column: 1; grid-row: 2; }
  .result-preview-hint { font-size: .6875rem; }
  .result-actions { grid-column: 2; grid-row: 2; flex-direction: column; align-self: start; gap: var(--space-sm); }
  .result-link, .result-page-link, .result-copy { width: 100%; padding-inline: var(--space-xs); }
  .technology-section, .status-section { margin-block-start: var(--space-2xl); }
  .status-section { padding-block-start: var(--space-lg); }
  .status-heading { flex-direction: column; gap: var(--space-sm); }
  .index-progress { margin-block-start: var(--space-xl); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .stats dt { min-height: 3em; line-height: 1.5; }
  .stats dd { font-size: var(--text-lg); }
  .colophon { padding-block: var(--space-lg) var(--space-2xl); }
}

@media (max-width: 24rem) {
  :root { --wordmark-size: 4rem; }
}