@import url("tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-padding-top: 88px; }
body { background: var(--color-canvas); color: var(--color-ink); font: 400 var(--text-body)/1.7 var(--font-body); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { min-width: 0; font-style: normal; line-height: 1.5; letter-spacing: 0.015em; }
h1 { font-size: var(--text-display); font-weight: 650; }
h2 { font-size: var(--text-heading); font-weight: 650; }
h3 { font-size: var(--text-medium); font-weight: 650; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { background: none; border: 0; }
button:disabled { color: var(--color-muted); background: var(--color-canvas); cursor: not-allowed; }
a, button, summary { transition: transform var(--dur-press) var(--ease-out); }
button:active, .primary:active, .trade-link:active { transform: translateY(1px); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
img { max-width: 100%; display: block; height: auto; }
svg.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sprite { width: 0; height: 0; position: absolute; overflow: clip; }
.shell { max-width: var(--shell-width); min-height: 100dvh; margin-inline: auto; background: var(--color-paper); }
.site-header { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-inline: var(--space-6); border-bottom: var(--rule-thin) solid var(--color-rule); background: var(--color-paper); position: sticky; top: 0; z-index: var(--z-header); }
.brand { display: flex; align-items: center; min-height: 44px; }
.brand img { width: 152px; }
.help-button { display: inline-flex; gap: var(--space-2); align-items: center; min-height: 44px; padding: var(--space-2) 0 var(--space-2) var(--space-2); white-space: nowrap; font-size: var(--text-body); }
.search-panel { padding: var(--space-6) var(--space-6) var(--space-8); }
.search-caption { color: var(--color-muted); margin-bottom: var(--space-1); }
.search-panel h1 { margin-bottom: var(--space-5); }
.trade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.trade-link { display: block; min-width: 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
.trade-image { width: 100%; aspect-ratio: 1.65; object-fit: cover; border-radius: var(--radius-small); }
.trade-name { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); font-weight: 600; white-space: nowrap; }
.trade-name .icon { width: 16px; height: 16px; }
.area-picker { margin-top: var(--space-6); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-small); }
.area-picker summary { list-style: none; cursor: pointer; min-height: 60px; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
summary::-webkit-details-marker { display: none; }
.area-label { color: var(--color-muted); }
.area-current { margin-left: auto; font-weight: 600; white-space: nowrap; }
.area-picker[open] summary > .icon:last-child { transform: rotate(180deg); }
.area-options { padding: 0 var(--space-4) var(--space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.area-options a { min-height: 44px; display: flex; align-items: center; justify-content: center; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-small); white-space: nowrap; }
.jobs-section { padding: var(--space-8) var(--space-6) var(--space-10); border-top: var(--rule-thin) solid var(--color-rule); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.section-head p { color: var(--color-muted); white-space: nowrap; }
.section-head p strong { color: var(--color-ink); font-size: var(--text-medium); font-weight: 500; }
.jobs-list { display: grid; gap: var(--space-8); }
.job-card { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); overflow: clip; scroll-margin-top: var(--space-4); box-shadow: 0 4px 16px var(--color-shadow); }
.job-link { display: block; }
.job-link:focus-visible { outline-offset: -4px; }
.job-photo { position: relative; }
.job-photo > img { width: 100%; aspect-ratio: 1.6; object-fit: cover; object-position: center 48%; }
.verified { position: absolute; top: var(--space-3); left: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--color-accent); color: var(--color-ink); font-size: var(--text-body); font-weight: 600; border-radius: var(--radius-small); line-height: 1.5; white-space: nowrap; }
.verified .icon { width: 18px; height: 18px; }
.job-copy { padding: var(--space-5); }
.job-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.job-heading h3 { font-size: var(--text-heading); }
.job-kind { color: var(--color-muted); font-size: var(--text-body); white-space: nowrap; }
.company-name { margin-top: var(--space-1); }
.job-location { display: flex; align-items: center; gap: var(--space-1); color: var(--color-muted); margin-top: var(--space-1); }
.job-location .icon { width: 18px; height: 18px; }
.pay { display: flex; align-items: baseline; gap: var(--space-1); margin-block: var(--space-4); font-size: var(--text-body); white-space: nowrap; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pay strong { font-size: clamp(24px, 8vw, var(--text-pay)); font-weight: 650; letter-spacing: -0.045em; line-height: 1.2; }
.pay .range { font-size: 0.62em; padding-inline: 2px; font-weight: 400; vertical-align: 0.1em; }
.card-footer { padding-top: var(--space-4); margin-top: var(--space-4); border-top: var(--rule-thin) solid var(--color-rule); display: flex; align-items: center; gap: var(--space-2); }
.card-footer > .icon { color: var(--color-muted); }
.card-footer strong { font-weight: 600; }
.card-footer .forward { margin-left: auto; }
.site-footer { padding: var(--space-8) var(--space-6) var(--space-10); background: var(--color-canvas); border-top: var(--rule-thin) solid var(--color-rule); }
.trust-title { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 600; margin-bottom: var(--space-3); }
.trust-title .icon { margin-top: var(--space-1); }
.site-footer p { color: var(--color-muted); }
.footer-links { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; }
.detail-footer { margin: 0 var(--space-6) var(--space-6); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; }
.sample-note { margin-top: var(--space-6); }
.detail-page { padding-bottom: 192px; }
.detail-header { height: 64px; padding-inline: var(--space-5); }
.back-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.detail-header > p { font-weight: 600; white-space: nowrap; }
.detail-visual { position: relative; }
.detail-visual > img { width: 100%; height: 244px; object-fit: cover; object-position: center 48%; }
.detail-visual .verified { top: auto; bottom: var(--space-4); left: var(--space-6); }
.detail-intro { padding: var(--space-6) var(--space-6) var(--space-8); }
.detail-intro .pay { margin: 0 0 var(--space-4); gap: var(--space-1); }
.detail-intro .pay strong { font-size: clamp(30px, 9.5vw, var(--text-pay-large)); }
.intro-meta { color: var(--color-muted); margin-bottom: var(--space-2); }
.detail-intro h1 { font-size: var(--text-display); margin-bottom: var(--space-1); }
.detail-intro .company-name { font-size: var(--text-body); }
.detail-reply { margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--rule-thin) solid var(--color-rule); }
.detail-section { padding: var(--space-8) var(--space-6); border-top: var(--rule-thin) solid var(--color-rule); }
.detail-section h2 { margin-bottom: var(--space-4); }
.detail-section p + p { margin-top: var(--space-3); }
.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.benefits li { display: flex; align-items: center; gap: var(--space-2); }
.benefits .icon { width: 18px; height: 18px; }
.job-facts > div { padding-block: var(--space-4); border-top: var(--rule-thin) solid var(--color-rule); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); }
.job-facts dt { color: var(--color-muted); }
.company-check { padding-top: var(--space-6); margin-top: var(--space-6); border-top: var(--rule-thin) solid var(--color-rule); }
.company-check > p { color: var(--color-muted); }
.apply-guide { background: var(--color-canvas); margin: var(--space-2) var(--space-6) var(--space-8); border: 0; padding: var(--space-6); border-radius: var(--radius-card); }
.apply-guide h2 { font-size: var(--text-medium); }
.apply-guide ol { padding-left: var(--space-6); margin-block: var(--space-4); }
.apply-guide li + li { margin-top: var(--space-2); }
.apply-guide > p:last-child { color: var(--color-muted); }
.apply-dock { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--shell-width); background: var(--color-paper); padding: var(--space-4) var(--space-6) max(var(--space-4), env(safe-area-inset-bottom)); z-index: var(--z-dock); border-top: var(--rule-thin) solid var(--color-rule); box-shadow: 0 -4px 20px var(--color-shadow); }
.dock-fields { text-align: center; line-height: 1.5; }
.dock-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: var(--space-3); line-height: 1.5; margin: var(--space-1) 0 var(--space-3); }
.dock-trust span { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.dock-trust .icon { width: 16px; height: 16px; }
.dock-trust strong { font-weight: 600; }
.primary { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-radius: var(--radius-small); background: var(--color-accent); color: var(--color-ink); font-size: var(--text-medium); font-weight: 600; white-space: nowrap; }
.primary .icon { position: absolute; right: var(--space-5); }
.primary { position: relative; }
.dialog { padding: var(--space-6); width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink); background: var(--color-paper); overflow-y: auto; }
.dialog::backdrop { background: var(--color-overlay); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.dialog-head h2 { font-size: var(--text-heading); }
.close-button { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.dialog p + p { margin-top: var(--space-4); }
.dialog a { margin-top: var(--space-5); }
@media (min-width: 40rem) {
  .shell { border-inline: var(--rule-thin) solid var(--color-rule); }
  .site-header { padding-inline: var(--space-10); }
  .search-panel, .jobs-section, .site-footer, .detail-intro, .detail-section { padding-inline: var(--space-10); }
  .trade-image { aspect-ratio: 1.8; }
  .detail-visual > img { height: 320px; }
  .detail-visual .verified { left: var(--space-10); }
  .apply-guide { margin-inline: var(--space-10); padding-inline: var(--space-6); }
  .apply-dock { padding-inline: var(--space-10); }
  .detail-intro .pay strong { font-size: 44px; }
}
@media (hover: hover) {
  .trade-link:hover .trade-name, .job-link:hover h3, .back-link:hover { text-decoration: underline; text-underline-offset: 5px; }
  .area-picker summary:hover, .area-options a:hover, .help-button:hover, .close-button:hover { background: var(--color-hover); }
  .primary:hover { background: var(--color-accent-hover); }
  .text-link:hover { text-decoration-thickness: 2px; }
}
@media (max-width: 22.4375rem) {
  .job-copy { padding: var(--space-4); }
  .job-heading h3 { font-size: var(--text-medium); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}