:root {
  --color-canvas: #f9f9f9;
  --color-surface: #ffffff;
  --color-surface-raised: #f1f1f1;
  --color-ink: #1a1c1f;
  --color-muted: #60646b;
  --color-line: #dedfe1;
  --color-accent: #24272b;
  --color-accent-strong: #111315;
  --color-accent-ink: #ffffff;
  --color-danger: #b64242;
  --color-warning: #955e18;
  --color-success: #27734f;
  --color-hover-line: #bfc2c5;
  --color-selected: #eaebed;
  --color-placeholder: #777c83;
  --color-error-bg: #fff8f8;
  --color-error-line: #e1b2b2;
  --color-error-text: #8c3030;
  --color-info-bg: #f0f3f6;
  --color-success-bg: #f0faf4;
  --color-warning-bg: #fff8ef;
  --color-soft-accent: #f5f5f5;
  --color-operation-line: #c8cbce;
  --color-focus: #62686f;
  --select-chevron: url("icons/chevron-down.svg");
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --container: min(1180px, calc(100vw - 40px));
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #111111;
  --color-surface: #181818;
  --color-surface-raised: #242424;
  --color-ink: #dfdfdf;
  --color-muted: #aaaeb2;
  --color-line: #363636;
  --color-accent: #dfdfdf;
  --color-accent-strong: #ffffff;
  --color-accent-ink: #181818;
  --color-danger: #ffaaa8;
  --color-warning: #f1c47d;
  --color-success: #92d8ac;
  --color-hover-line: #616161;
  --color-selected: #303030;
  --color-placeholder: #999da1;
  --color-error-bg: #39272c;
  --color-error-line: #8b545c;
  --color-error-text: #ffb8b6;
  --color-info-bg: #292d31;
  --color-success-bg: #203b31;
  --color-warning-bg: #3c3025;
  --color-soft-accent: #202020;
  --color-operation-line: #565b60;
  --color-focus: #d6d6d6;
  --select-chevron: url("icons/chevron-down-dark.svg");
}

* { box-sizing: border-box; }

html { background: var(--color-canvas); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--color-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent-strong); }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

button, .button-secondary {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.95rem;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

button:hover { border-color: var(--color-accent-strong); background: var(--color-accent-strong); }
button:disabled { cursor: progress; opacity: 0.65; }
.button-secondary { color: var(--color-ink); background: transparent; border-color: var(--color-line); }
.button-secondary:hover { color: var(--color-ink); background: var(--color-surface-raised); border-color: var(--color-hover-line); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.skip-link { position: fixed; top: -3rem; left: var(--space-4); z-index: 10; padding: var(--space-2) var(--space-3); color: var(--color-accent-ink); background: var(--color-accent); }
.skip-link:focus { top: var(--space-3); }
.shell { width: var(--container); margin-inline: auto; }

.site-header { border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.nav-content { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: var(--space-4); }
.product-name { color: var(--color-ink); font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
.site-header nav { display: flex; align-items: center; gap: var(--space-1); }
.site-header nav a { border-radius: 999px; padding: 0.35rem 0.7rem; color: var(--color-muted); font-size: 0.9rem; text-decoration: none; }
.site-header nav a:hover { color: var(--color-ink); background: var(--color-surface-raised); }
.site-header nav a[aria-current="page"] { color: var(--color-accent-strong); background: var(--color-selected); font-weight: 700; }
.theme-toggle { display: inline-flex; flex: none; min-height: 36px; gap: 0; border-color: var(--color-line); border-radius: 999px; padding: 3px; color: var(--color-muted); background: var(--color-surface-raised); font-size: 0.75rem; font-weight: 700; }
.theme-toggle:hover { border-color: var(--color-hover-line); background: var(--color-surface-raised); }
.theme-toggle span { border-radius: 999px; padding: 0.25rem 0.55rem; }
.theme-toggle span:first-child, html[data-theme="dark"] .theme-toggle span:last-child { color: var(--color-ink); background: var(--color-surface); }
html[data-theme="dark"] .theme-toggle span:first-child { color: var(--color-muted); background: transparent; }
html[data-theme="dark"] .theme-toggle span:last-child { color: var(--color-ink); background: var(--color-surface); }

.archive-intro { display: grid; gap: var(--space-5); padding: var(--space-6) 0 var(--space-5); border-bottom: 1px solid var(--color-line); }
.archive-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2) var(--space-5); min-width: 0; }
.archive-copy > div { grid-column: 1; }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-accent); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 24ch; margin-bottom: 0; font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.15; text-wrap: balance; word-break: keep-all; }
h2 { margin-bottom: var(--space-3); font-size: 1.35rem; letter-spacing: -0.025em; line-height: 1.25; }
h3 { margin-bottom: var(--space-2); font-size: 1rem; }
.intro-copy { grid-column: 1; max-width: 58ch; margin: 0; color: var(--color-muted); font-size: 0.95rem; text-wrap: pretty; }
.status-refresh-form { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.archive-actions { min-width: 0; }
.url-form { display: grid; gap: var(--space-2); width: 100%; }
.url-form label, .filter-row label, .edit-form label { display: grid; gap: var(--space-1); color: var(--color-muted); font-size: 0.82rem; font-weight: 700; }
.url-form label { font-size: 0.82rem; }
.url-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: var(--space-2); }
.url-controls input, .url-controls button { min-height: 46px; }
.url-controls input { padding-inline: 0.9rem; }
.url-controls button { padding-inline: 1.25rem; }
.career-site-fields { display: grid; grid-template-columns: minmax(10rem, 0.6fr) minmax(0, 1.4fr) auto; align-items: end; gap: var(--space-2); }
.career-site-fields label { min-width: 0; }
.career-site-fields input { width: 100%; min-height: 46px; }
.career-site-fields button { min-height: 46px; white-space: nowrap; }
.career-site-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.career-site-card { display: flex; min-height: 76px; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); color: var(--color-ink); background: var(--color-surface); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; transition: border-color 180ms ease, background-color 180ms ease; }
.career-site-card:hover { border-color: var(--color-hover-line); color: var(--color-ink); background: var(--color-surface-raised); }
input, select, textarea { min-width: 0; border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; color: var(--color-ink); background: var(--color-surface); }
input, select { min-height: 42px; }
select { -webkit-appearance: none; appearance: none; padding-right: 2.25rem; background-image: var(--select-chevron); background-position: right 0.625rem center; background-repeat: no-repeat; background-size: 1.25rem; }
textarea { width: 100%; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--color-placeholder); }

.auth-page {
  display: grid;
  min-height: 100vh;
  align-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.auth-shell { width: min(100%, 460px); margin-inline: auto; }
.auth-panel {
  padding: clamp(1.5rem, 6vw, 3rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}
.auth-theme-row { display: flex; justify-content: flex-end; margin-bottom: var(--space-5); }
.auth-panel h1 { max-width: none; margin-bottom: var(--space-3); font-size: clamp(2rem, 8vw, 3.25rem); }
.auth-copy { max-width: 36ch; margin-bottom: var(--space-5); color: var(--color-muted); text-wrap: pretty; }
.auth-form { display: grid; gap: var(--space-2); }
.auth-form label { color: var(--color-muted); font-size: 0.82rem; font-weight: 700; }
.auth-form input { min-height: 50px; }
.auth-form button { width: 100%; min-height: 50px; margin-top: var(--space-2); }
.field-help { margin: 0; color: var(--color-muted); font-size: 0.82rem; }

.notice { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); color: var(--color-muted); background: var(--color-surface); }
.notice-error { color: var(--color-error-text); border-color: var(--color-error-line); background: var(--color-error-bg); }
.notice-operation { color: var(--color-ink); }
.operation-progress { display: grid; gap: var(--space-2); }
.operation-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.operation-progress-label { font-weight: 700; }
.operation-progress-meta { color: var(--color-muted); font-size: 0.82rem; }
.operation-progress-track { display: block; height: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--color-surface-raised); }
.operation-progress-bar { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--color-accent); }
.operation-progress-bar.is-indeterminate { width: 35%; animation: operation-slide 1.3s ease-in-out infinite; }
@keyframes operation-slide {
  from { transform: translateX(-130%); opacity: 0.45; }
  50% { opacity: 1; }
  to { transform: translateX(360%); opacity: 0.45; }
}

.button-tertiary { min-height: 36px; padding: 0.35rem 0.65rem; border-color: transparent; color: var(--color-muted); background: transparent; font-size: 0.82rem; }
.button-tertiary:hover { border-color: var(--color-line); color: var(--color-ink); background: var(--color-surface-raised); }

.archive-tools { padding: var(--space-4) 0 var(--space-6); border-top: 1px solid var(--color-line); }
.archive-tools-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; gap: clamp(var(--space-5), 5vw, var(--space-7)); }
.model-settings-section, .connection-panel { min-width: 0; padding: 0; border: 0; }
.tool-panel-heading { display: grid; min-width: 0; gap: 0.08rem; }
.tool-panel-heading .eyebrow { margin-bottom: 0; }
.tool-panel-title { margin: 0; color: var(--color-ink); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
.connection-list { border-top: 1px solid var(--color-line); }
.connection-settings { max-width: none; }
.connection-settings > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 34px; align-items: center; gap: var(--space-2); padding: 0.1rem 0.625rem 0.1rem 0; cursor: pointer; }
.connection-settings > summary::-webkit-details-marker { display: none; }
.connection-settings > summary::marker { content: ""; }
.connection-settings > summary::after { width: 1.25rem; height: 1.25rem; background: var(--select-chevron) center / contain no-repeat; content: ""; transition: transform 160ms ease; }
.connection-settings[open] > summary::after { transform: rotate(180deg); }
.connection-settings-panel { padding-top: var(--space-2); }
.connection-row { display: grid; grid-template-columns: minmax(7rem, 0.75fr) minmax(9rem, 0.9fr) minmax(0, 1.45fr); align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }
.connection-row + .connection-row { border-top: 1px solid var(--color-line); }
.connection-site h3 { margin-bottom: 0.1rem; font-size: 0.86rem; }
.connection-state { display: grid; justify-items: start; gap: var(--space-1); min-width: 0; }
.connection-badge { display: inline-flex; width: fit-content; align-items: center; border: 1px solid currentColor; border-radius: 999px; padding: 0.12rem 0.42rem; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.connection-status-not_connected, .connection-status-unknown { color: var(--color-muted); background: var(--color-surface-raised); }
.connection-status-excluded { color: var(--color-muted); background: var(--color-surface-raised); }
.connection-status-opening, .connection-status-checking { color: var(--color-accent); background: var(--color-info-bg); }
.connection-status-connected { color: var(--color-success); background: var(--color-success-bg); }
.connection-status-login_required, .connection-status-check_failed { color: var(--color-warning); background: var(--color-warning-bg); }
.connection-error { color: var(--color-danger); font-size: 0.75rem; overflow-wrap: anywhere; }
.connection-actions { display: flex; flex-wrap: wrap; justify-content: start; gap: 0.15rem; }
.connection-actions form { margin: 0; }
.button-compact { min-height: 40px; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.connection-operation { grid-column: 1 / -1; }

.model-settings { max-width: none; }
.model-settings > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 34px; align-items: center; gap: var(--space-2); padding: 0.1rem 0.625rem 0.1rem 0; }
.model-settings > summary::-webkit-details-marker { display: none; }
.model-settings > summary::marker { content: ""; }
.model-settings > summary::after { grid-column: 2; grid-row: 1; width: 1.25rem; height: 1.25rem; background: var(--select-chevron) center / contain no-repeat; content: ""; transition: transform 160ms ease; }
.model-settings[open] > summary::after { transform: rotate(180deg); }
.model-settings-current { display: flex; grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; gap: 0.1rem var(--space-3); justify-self: start; max-width: 100%; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; line-height: 1.5; }
.model-settings-current > span { white-space: nowrap; }
.model-settings-panel { padding: var(--space-2) 0 0; }
.model-settings-success { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-success); border-radius: var(--radius-sm); color: var(--color-success); background: var(--color-success-bg); font-size: 0.82rem; }
.model-settings-help { margin-bottom: var(--space-2); color: var(--color-muted); font-size: 0.82rem; }
.model-settings-form { display: grid; gap: var(--space-2); max-width: 36rem; }
.model-setting-row { display: grid; grid-template-columns: 4.7rem minmax(0, 1fr) 7.5rem; align-items: center; gap: var(--space-2); }
.model-setting-row > span { color: var(--color-muted); font-size: 0.82rem; font-weight: 700; }
.model-setting-row .model-fixed { min-height: 40px; display: flex; align-items: center; padding: 0.25rem 0.6rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-surface-raised); font-size: 0.82rem; }
.model-setting-row select { min-width: 0; min-height: 40px; padding: 0.25rem 1.5rem 0.25rem 0.4rem; background-position: right 0.5rem center; background-size: 1rem; font-size: 0.82rem; }
.model-settings-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.model-settings-actions button { min-height: 40px; padding: 0.25rem 0.55rem; font-size: 0.75rem; }
.model-settings-actions span { color: var(--color-muted); font-size: 0.75rem; }

.archive-stage { padding: var(--space-5) 0 var(--space-7); }
.stage-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.count-label { margin: 0; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.filter-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(9rem, 0.6fr) minmax(10rem, 0.65fr) auto auto; align-items: end; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
.filter-reset { align-self: center; font-size: 0.85rem; white-space: nowrap; }
.empty-state { display: grid; justify-items: start; padding: var(--space-7) 0; border-top: 1px solid var(--color-line); color: var(--color-muted); }
.empty-state p { margin-bottom: var(--space-4); }
.empty-state-action { justify-self: start; }

.job-list { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); }
.job-card { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-4) var(--space-5); }
.job-card + .job-card { border-top: 1px solid var(--color-line); }
.job-card-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 0.75fr); align-items: center; gap: var(--space-5); }
.job-card-identity { min-width: 0; }
.job-company { margin-bottom: var(--space-1); color: var(--color-muted); font-size: 0.875rem; font-weight: 700; }
.job-title { margin: 0; font-size: 1.125rem; line-height: 1.4; }
.job-title a { color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.job-title a:hover { color: var(--color-accent); text-decoration: underline; }
.job-profile-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-muted); font-size: 0.875rem; }
.job-optional-fact span { color: var(--color-muted); font-weight: 700; }
.job-card-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.job-fact { min-width: 0; }
.job-card-dates dt { margin-bottom: var(--space-1); font-family: var(--font-body); font-size: 0.75rem; }
.job-card-dates dd { color: var(--color-ink); font-family: var(--font-body); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.job-card-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.job-status-area, .job-status-area form { min-width: 0; }
.job-status-area .status-edit-form { gap: var(--space-1); }
.job-status-area .status-reason { padding-left: 0; }
.job-action-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.job-action-group form { margin: 0; }
.job-action-group .button-compact { min-height: 42px; }
.job-card-controls .button-tertiary { min-height: 42px; padding-inline: var(--space-3); font-size: 0.875rem; }
.job-card-controls .button-tertiary:hover { border-color: var(--color-hover-line); color: var(--color-ink); background: var(--color-surface-raised); }
.experience-value { word-break: keep-all; overflow-wrap: break-word; }
.career-chip { display: inline-flex; width: fit-content; align-items: center; border: 1px solid currentColor; border-radius: 999px; padding: 0.12rem 0.5rem; font-size: 0.72rem; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.career-chip-high { color: var(--color-warning); background: var(--color-warning-bg); }
.status-edit-form { display: grid; justify-items: start; gap: var(--space-1); }
.status-control-row { display: flex; align-items: center; gap: var(--space-2); }
.status-control-row .button-compact { min-width: 6.5rem; white-space: nowrap; }
.status-edit-form button:disabled, .status-edit-form button:disabled:hover { cursor: default; opacity: 1; border-color: var(--color-line); color: var(--color-muted); background: var(--color-surface-raised); }
.status-edit-form[data-dirty="true"] button { border-color: var(--color-accent); color: var(--color-accent-strong); background: var(--color-soft-accent); }
.status-select { min-height: 42px; min-width: 9rem; width: 9rem; border-radius: var(--radius-sm); padding: 0.5rem 2.25rem 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 700; }
.status-select option { color: var(--color-ink); background: var(--color-surface); font-weight: 400; }
.status-select.status-active { color: var(--color-success); border-color: currentColor; background-color: var(--color-success-bg); }
.status-select.status-closed { color: var(--color-warning); border-color: currentColor; background-color: var(--color-warning-bg); }
.status-select.status-unknown { color: var(--color-muted); border-color: currentColor; background-color: var(--color-surface-raised); }
.status-badge { display: inline-flex; width: fit-content; border: 1px solid currentColor; border-radius: 999px; padding: 0.12rem 0.5rem; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.status-active { color: var(--color-success); }
.status-closed { color: var(--color-warning); }
.status-unknown { color: var(--color-muted); }
.status-reason { color: var(--color-muted); font-size: 0.8rem; word-break: keep-all; overflow-wrap: break-word; }
.job-operation { padding: 0.65rem 0.8rem; border: 1px solid var(--color-operation-line); border-radius: var(--radius-sm); background: var(--color-soft-accent); }

.back-link { margin: var(--space-5) 0 0; font-size: 0.9rem; }
.detail-header { padding: var(--space-5) 0 var(--space-6); border-bottom: 1px solid var(--color-line); }
.detail-header h1 { max-width: 24ch; margin-bottom: var(--space-2); font-size: clamp(2rem, 4vw, 3.25rem); }
.company-name { margin-bottom: 0; color: var(--color-muted); font-size: 1.05rem; }
.archive-status { margin: var(--space-3) 0 0; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; }
.detail-section { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-line); }
.metadata-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.metadata-grid div { min-width: 0; }
dt { margin-bottom: var(--space-1); color: var(--color-muted); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; }
dd { margin: 0; word-break: keep-all; overflow-wrap: break-word; }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.archive-note { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: 0.86rem; }
.edit-details, .detail-section > details { margin-top: var(--space-5); }
summary { cursor: pointer; color: var(--color-accent); font-weight: 700; }
.edit-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: var(--space-3); margin-top: var(--space-4); }
.edit-form-wide { grid-column: 1 / -1; }
.section-intro { max-width: 62ch; margin-bottom: 0; color: var(--color-muted); }
.structure-status, .translation-status { color: var(--color-success); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; }
.translation-text, .analysis-text, .original-text { margin: var(--space-4) 0 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); color: var(--color-ink); background: var(--color-surface); font-family: var(--font-body); font-size: 0.95rem; line-height: 1.7; text-wrap: pretty; white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; }
.original-text { max-height: 52rem; overflow: auto; }
.translation-details > .section-intro { margin-top: var(--space-4); }
.translation-notice { margin: var(--space-4) 0 0; color: var(--color-muted); }
.translation-action { margin-top: var(--space-4); }
.jd-structure-document { display: grid; gap: var(--space-5); max-width: 72ch; margin-top: var(--space-4); }
.jd-markdown-section { padding-bottom: var(--space-5); }
.jd-markdown-section:not(:last-of-type) { border-bottom: 1px solid var(--color-line); }
.jd-markdown-section h3 { margin: 0 0 var(--space-3); color: var(--color-ink); font-size: 1.12rem; }
.jd-markdown-section ul { display: grid; gap: var(--space-2); margin: 0; padding-left: 1.25rem; }
.jd-markdown-section li { padding-left: var(--space-1); line-height: 1.7; }
.jd-markdown-section li.jd-subheading { margin: var(--space-3) 0 0 -1.25rem; padding: 0; list-style: none; font-weight: 700; }
.jd-markdown-section li.jd-subheading:first-child { margin-top: 0; }
.jd-item-text { display: block; }
.jd-evidence-summary { margin-top: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.jd-evidence-summary > summary { color: var(--color-muted); font-size: 0.86rem; font-weight: 600; }
.jd-evidence-groups { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.jd-evidence-group h3 { margin-bottom: var(--space-2); color: var(--color-muted); font-size: 0.86rem; }
.jd-evidence-group ul { display: grid; gap: var(--space-2); margin: 0; padding-left: 1.1rem; color: var(--color-muted); font-size: 0.86rem; }
.jd-evidence-group li { overflow-wrap: anywhere; }
.jd-structure-action { margin-top: var(--space-4); }
.detail-section > .original-details { margin-top: var(--space-4); }
.original-content { max-width: 72ch; }
.failure-reason { margin: var(--space-3) 0 0; color: var(--color-danger); overflow-wrap: anywhere; }
.failure-reason code { font-family: var(--font-mono); font-size: 0.85em; }
.technical-error { margin-top: var(--space-3); font-size: 0.85rem; }
.technical-error summary { color: var(--color-muted); font-weight: 600; }
.technical-error code { display: inline-block; margin-top: var(--space-2); color: var(--color-danger); }
.status-history { display: grid; gap: var(--space-3); padding-left: 1.25rem; color: var(--color-muted); }
.status-history li { display: grid; gap: var(--space-1); }
.status-history strong { color: var(--color-ink); }

@media (max-width: 980px) {
  .archive-tools-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 900px) {
  .connection-row { grid-template-columns: minmax(8rem, 0.7fr) minmax(12rem, 1fr); }
  .connection-actions { grid-column: 1 / -1; justify-content: start; }
  .filter-row { grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.6fr) minmax(10rem, 0.7fr) auto; }
  .filter-reset { grid-column: 1 / -1; justify-self: end; }
  .job-card-main { grid-template-columns: 1fr; align-items: start; gap: var(--space-3); }
  .job-card-controls { justify-content: flex-start; }
  .metadata-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 981px) {
  .archive-tools-grid > .connection-panel { border-left: 1px solid var(--color-line); padding-left: clamp(var(--space-4), 3vw, var(--space-6)); }
  .job-card { grid-template-columns: minmax(0, 1fr) minmax(345px, 0.85fr) 260px; align-items: center; gap: var(--space-5); }
  .job-card-main { display: contents; }
  .job-card-controls { display: grid; justify-content: stretch; gap: var(--space-1); }
  .job-action-group { justify-content: flex-start; gap: var(--space-1); }
  .job-card-controls .button-tertiary { padding-inline: var(--space-2); }
  .job-operation { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .career-site-fields { grid-template-columns: 1fr 1fr; }
  .career-site-fields label:nth-of-type(2) { grid-column: 2; }
  .career-site-fields button { grid-column: 1 / -1; }
  .career-site-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-copy { grid-template-columns: 1fr; }
  .status-refresh-form { grid-column: 1; grid-row: 3; }
  .connection-row { grid-template-columns: 1fr; align-items: start; }
  .connection-actions { grid-column: auto; justify-content: start; }
  .model-settings-current { max-width: 100%; }
  .model-setting-row { grid-template-columns: 1fr 1fr; }
  .model-setting-row > span:first-child { grid-column: 1 / -1; }
  .model-settings-actions { align-items: start; flex-direction: column; gap: var(--space-2); }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .filter-row label:first-of-type { grid-column: 1 / -1; }
  .metadata-grid { grid-template-columns: 1fr 1fr; }
  .edit-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-header nav { flex-wrap: wrap; }
  .career-site-fields, .career-site-list { grid-template-columns: 1fr; }
  .career-site-fields label:nth-of-type(2), .career-site-fields button { grid-column: 1; }
  .shell { width: min(100% - 24px, 1180px); }
  .nav-content { flex-wrap: wrap; gap: 0.15rem var(--space-2); padding-block: var(--space-2); }
  .site-header nav { order: 3; width: 100%; }
  .theme-toggle { margin-left: auto; }
  .auth-page { align-items: start; padding: clamp(2rem, 12vh, 6rem) 12px 2rem; }
  .auth-panel { padding: 1.5rem; }
  .nav-content { min-height: 60px; }
  .site-header nav a { padding-inline: 0.45rem; font-size: 0.82rem; }
  .archive-intro { gap: var(--space-3); padding: 1.1rem 0 1rem; }
  h1 { margin-bottom: var(--space-2); font-size: clamp(1.75rem, 8vw, 2.1rem); }
  .intro-copy { margin-top: var(--space-2); font-size: 0.9rem; }
  .status-refresh-form { margin-top: var(--space-1); }
  .status-refresh-form button { width: auto; min-height: 40px; }
  .archive-actions { min-width: 0; }
  .url-form { gap: var(--space-2); }
  .url-form label { text-align: left; font-size: 0.82rem; }
  .url-controls { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
  .url-controls button { width: auto; padding-inline: 0.75rem; white-space: nowrap; }
  .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
  .filter-row label:first-of-type { grid-column: 1 / -1; }
  .filter-row label { gap: 0.15rem; font-size: 0.75rem; }
  .filter-row label:not(:first-of-type) { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-1); }
  .filter-row label:not(:first-of-type) span { white-space: nowrap; }
  .filter-row button { grid-column: 1 / -1; min-height: 44px; }
  .filter-reset { grid-column: 1 / -1; justify-self: end; }
  .archive-stage { padding: var(--space-4) 0 var(--space-6); }
  .operation-progress-heading { align-items: flex-start; flex-direction: column; gap: 0; }
  .job-card { gap: var(--space-3); padding: var(--space-3); }
  .job-card-main { gap: var(--space-3); }
  .job-status-area .status-edit-form { gap: var(--space-2); }
  .status-edit-form { gap: var(--space-2); }
  .status-control-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); width: 100%; }
  .status-select { width: 100%; min-width: 0; min-height: 44px; }
  .status-control-row .button-compact { min-width: 4.5rem; min-height: 44px; border-color: var(--color-line); color: var(--color-ink); background: var(--color-surface); }
  .status-control-row .button-compact:hover { border-color: var(--color-hover-line); color: var(--color-ink); background: var(--color-surface-raised); }
  .job-card-dates { gap: var(--space-2); }
  .job-card-dates dt { font-size: 0.75rem; }
  .job-card-dates dd { font-size: 0.875rem; overflow-wrap: anywhere; }
  .job-card-controls { align-items: stretch; flex-direction: column; gap: var(--space-2); }
  .job-action-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .job-action-group form:only-child { grid-column: 1 / -1; }
  .job-action-group button { width: 100%; }
  .job-action-group .button-compact { min-height: 44px; border-color: var(--color-line); color: var(--color-ink); background: var(--color-surface); }
  .job-action-group .button-compact:hover { border-color: var(--color-hover-line); color: var(--color-ink); background: var(--color-surface-raised); }
  .metadata-grid, .edit-form { grid-template-columns: 1fr; }
  .section-heading { align-items: start; display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation-duration: 0.01ms !important; transition-duration: 0.01ms; }
}