/* Layout: 一列の読み物＋上部の対象切替。トップは「分野の地図」→仕事の一覧、詳細は事実の帯→本文の順 */
:root{
  --paper:#F6F8F8; --card:#FFFFFF; --sunk:#E9EEEF; --ink:#18232A; --muted:#4E5B63; --faint:#5F6C74; --line:#D5DEE1;
  --accent:#1E5F78; --accent-ink:#FFFFFF; --mark:#F3C64F; --ok:#2A7253; --warn:#85570F; --hard:#9C4033;
  --chip-s:52%; --chip-l:92%; --chip-ink-l:26%;
  --display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#11181C; --card:#18222A; --sunk:#202C34; --ink:#E6EDF0; --muted:#AEBBC2; --faint:#97A5AC; --line:#2C3A43;
  --accent:#6CB8D2; --accent-ink:#0D1A20; --mark:#D9AE3B; --ok:#6FC79C; --warn:#E0B060; --hard:#E58C7E;
  --chip-s:28%; --chip-l:22%; --chip-ink-l:84%; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#11181C; --card:#18222A; --sunk:#202C34; --ink:#E6EDF0; --muted:#AEBBC2; --faint:#97A5AC; --line:#2C3A43;
  --accent:#6CB8D2; --accent-ink:#0D1A20; --mark:#D9AE3B; --ok:#6FC79C; --warn:#E0B060; --hard:#E58C7E;
  --chip-s:28%; --chip-l:22%; --chip-ink-l:84%; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.8;margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--card)}
a{color:var(--accent)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:980px;margin-left:auto;margin-right:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ヘッダー */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--card);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:8px}
.brand{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:.04em;text-decoration:none;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.brand small{font-family:var(--body);font-weight:500;font-size:11px;color:var(--warn);border:1px solid currentColor;border-radius:999px;padding:0 8px;letter-spacing:.08em}
.modes{margin-left:auto;display:flex;background:var(--sunk);border-radius:999px;padding:3px;gap:2px}
.modes button{border:0;background:transparent;border-radius:999px;min-height:44px;padding:0 16px;cursor:pointer;font-weight:700;font-size:14px;color:var(--muted)}
.modes button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* トップ */
.hero{padding-block:28px 8px}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(26px,5vw,40px);line-height:1.35;margin:0;text-wrap:balance}
.hero h1.kid{word-break:keep-all;overflow-wrap:anywhere}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--mark) 62%);padding:0 .08em}
.hero p{color:var(--muted);margin:8px 0 0;max-width:62ch}
.hero .modehint{font-size:13px;color:var(--faint);margin-top:6px}
.search{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.search input{flex:1 1 260px;min-width:0;min-height:48px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 14px;font-size:16px}
h2.sec{font-family:var(--display);font-weight:700;font-size:18px;margin:30px 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
h2.sec span{font-family:var(--body);font-weight:400;font-size:13px;color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.field{border:0;text-align:left;cursor:pointer;border-radius:12px;padding:10px 12px;min-height:44px;background:hsl(var(--h) var(--chip-s) var(--chip-l));color:hsl(var(--h) 45% var(--chip-ink-l));display:flex;flex-direction:column;gap:2px;min-width:0}
.field .ic{width:34px;height:34px;display:block;margin-bottom:4px}
.field .ic svg{width:100%;height:100%;display:block}
.field b{font-weight:700;font-size:14px;line-height:1.4}
.chip .ic,.job .meta .ic{width:15px;height:15px;display:inline-block;vertical-align:-3px;margin-right:4px}
.chips .chip .ic{width:18px;height:18px;vertical-align:-4px}
.chip .ic svg{width:100%;height:100%;display:block}
.field i{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums}
.field[aria-pressed="true"]{outline:3px solid hsl(var(--h) 45% var(--chip-ink-l));outline-offset:1px}
@media (max-width:560px){
  .fields{grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;grid-auto-columns:minmax(138px,42%);overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
  .field{scroll-snap-align:start}
}
.inds{display:flex;flex-wrap:wrap;gap:6px}
.ind{border:1px solid var(--line);background:var(--card);border-radius:999px;min-height:40px;padding:0 14px;cursor:pointer;font-size:13px;color:var(--ink)}
.ind i{font-style:normal;color:var(--muted);margin-left:4px;font-variant-numeric:tabular-nums}
.ind[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ind[aria-pressed="true"] i{color:inherit}
.from{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:22px}
.from h2{font-family:var(--display);font-weight:700;font-size:18px;margin:0 0 4px}
.from > p{margin:0 0 10px;color:var(--muted);font-size:13px}
.from input{width:100%;min-height:48px;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:10px 14px;font-size:16px}
.picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.picks button{border:1px solid var(--line);background:var(--paper);border-radius:999px;min-height:40px;padding:0 14px;cursor:pointer;font-size:14px}
.near{margin-top:12px}
.near h3{font-size:15px;margin:0 0 8px}
.near .related a{background:var(--paper)}
.near .tag{font-size:12px;font-weight:700}
.tag.ok{color:var(--ok)} .tag.warn{color:var(--warn)} .tag.hard{color:var(--hard)}
.chk{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:13px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--accent)}
.yomi{display:block;font-size:12px;color:var(--muted);font-weight:500;line-height:1.4;margin-bottom:2px}
.detail .yomi{font-size:14px;margin:12px 0 -4px}
.listbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:28px 0 10px}
.listbar h2{font-family:var(--display);font-weight:700;font-size:18px;margin:0}
.listbar .count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.listbar .tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.listbar select{border:1px solid var(--line);background:var(--card);border-radius:10px;min-height:44px;padding:0 10px;font-size:14px}
.clear{border:1px solid var(--line);background:var(--card);border-radius:999px;min-height:40px;padding:0 14px;font-size:13px;cursor:pointer}
.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.job{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink);min-width:0}
.job:hover{border-color:var(--accent)}
.job h3{margin:0;font-size:16px;font-weight:700;line-height:1.45}
.job p{margin:0;color:var(--muted);font-size:13px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.job .meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.job .meta span{white-space:nowrap}
.chip{display:inline-block;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:500;background:hsl(var(--h) var(--chip-s) var(--chip-l));color:hsl(var(--h) 45% var(--chip-ink-l));text-decoration:none;white-space:nowrap}
.chips .chip{padding:6px 12px;font-size:13px}
.more{display:block;margin:16px auto 0;border:1px solid var(--line);background:var(--card);border-radius:999px;min-height:44px;padding:0 22px;cursor:pointer;font-weight:700}
.empty{color:var(--muted);padding:16px 0}
.empty .chips{margin-top:8px}

/* 詳細 */
.back{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14px;text-decoration:none}
.detail h1{font-family:var(--display);font-weight:900;font-size:clamp(24px,4.4vw,34px);line-height:1.35;margin:4px 0 4px;text-wrap:balance}
.alias{color:var(--faint);font-size:13px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.lead{font-size:17px;line-height:1.8;margin:16px 0 0;max-width:62ch}
.note{font-size:12px;color:var(--warn);margin:6px 0 0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:20px 0 0}
.fact{background:var(--card);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fact .k{font-size:12px;color:var(--muted);letter-spacing:.04em}
.fact .v{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.3;font-variant-numeric:tabular-nums}
.fact .v small{font-family:var(--body);font-size:13px;font-weight:500;margin-left:2px}
.fact .s{font-size:11px;color:var(--faint);line-height:1.5}
.pill{display:inline-block;border-radius:999px;padding:2px 12px;font-size:15px;font-weight:700;font-family:var(--body)}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.pill.hard{background:color-mix(in srgb,var(--hard) 16%,transparent);color:var(--hard)}
.block{margin:28px 0 0;max-width:68ch}
.block h2{font-family:var(--display);font-weight:700;font-size:18px;margin:0 0 8px}
.block p{margin:0 0 10px}
.kv{display:grid;grid-template-columns:9.5em 1fr;gap:8px 14px;margin:0}
.kv dt{color:var(--muted);font-size:13px;padding-top:2px}
.kv dd{margin:0;min-width:0}
.sub{display:block;color:var(--muted);font-size:13px;line-height:1.6;margin-top:2px}
.list{margin:0;padding-left:1.2em}
.todo{border:1.5px dashed var(--line);border-radius:12px;padding:10px 14px;color:var(--faint);font-size:13px;margin:0 0 8px}
.todo b{color:var(--muted)}
details{margin-top:6px}
summary{cursor:pointer;color:var(--accent);font-size:14px;min-height:32px}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.related a{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px;text-decoration:none;color:var(--ink);min-width:0}
.related a span{font-size:12px;color:var(--muted)}
.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.links a{display:inline-flex;flex-direction:column;min-height:36px;justify-content:center;text-decoration:none}
.ext{display:inline-block;min-height:32px;text-decoration:none}
.links a .nm{font-weight:inherit}
.links a span{font-size:12px;color:var(--muted)}
.links a .nm::after,.ext::after{content:" ↗";font-size:12px}
.copy{border:1px solid var(--line);background:var(--card);border-radius:999px;min-height:28px;padding:0 10px;margin:0 4px;font-size:12px;cursor:pointer;color:var(--ink)}
.src{margin-top:36px;padding-block:14px 40px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);line-height:1.7}
.src p{margin:0 0 6px;max-width:80ch}
@media (max-width:520px){.kv{grid-template-columns:1fr}.kv dt{padding-top:0}.modes{margin-left:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 公開版で足したもの */
a.field,a.ind{text-decoration:none}
a.ind{display:inline-flex;align-items:center}
.alljobs{margin:22px 0 0;font-size:14px}
.alllist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px}
.alllist a{display:block;padding:6px 0;text-decoration:none;min-height:32px}
.cnt{font-family:var(--body);font-weight:400;font-size:13px;color:var(--muted);margin-left:8px}
nav.foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:13px}
nav.foot a{display:inline-flex;align-items:center;min-height:32px}
.prose{max-width:68ch}
.prose h2{font-family:var(--display);font-weight:700;font-size:18px;margin:28px 0 8px}
.prose p,.prose li{margin:0 0 10px}