/* ============================================================
   職務経歴書chan — 履歴書chan ブランドトークン準拠・モバイルファースト
   ============================================================ */
:root{
  --c-primary:#f26c8b; --c-primary-dark:#d94e70; --c-coral:#ff8fa6;
  --c-accent:#ffe6ec; --c-accent-soft:#fff5f7;
  --c-orange:#ff9a42; --c-orange-dark:#f97316; --c-peach:#fff3ea; --c-cream:#fff9f6;
  --c-text:#4a2e2b; --c-text-sub:#7a6864; --c-faint:#b3a09b; --c-border:#f3d9d3; --c-white:#fff;
  --c-cat:#f8bd77;
  --radius:18px; --radius-lg:28px;
  --shadow-card:0 12px 34px rgba(242,108,139,.12); --shadow-cta:0 12px 22px rgba(249,115,22,.24);
  --shadow-sm:0 3px 10px rgba(242,108,139,.10);
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
  --font-doc:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --header-h:56px; --sticky-h:76px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0; background:var(--c-cream); color:var(--c-text); font-family:var(--font); font-size:15px; line-height:1.8; -webkit-font-smoothing:antialiased}
body.has-sticky{padding-bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom))}
a{color:var(--c-primary-dark)}
button{font-family:inherit; color:inherit}
input,textarea{font-family:inherit; color:inherit; font-size:inherit}
h1,h2,h3{line-height:1.45; text-wrap:balance; margin:0}
p{margin:0 0 .9em}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}
.skip{position:absolute; left:-999px; top:8px; background:var(--c-white); padding:8px 12px; border-radius:8px; z-index:100}
.skip:focus{left:8px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--c-orange); outline-offset:2px}

/* ---------- header ---------- */
.hd{position:sticky; top:0; z-index:40; background:rgba(255,249,246,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--c-border)}
.hd__in{display:flex; align-items:center; gap:12px; height:var(--header-h)}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; margin-right:auto; min-width:0}
.logo__mark{width:36px; height:36px; border-radius:11px; flex:none; background:linear-gradient(180deg,#f6a5b8,#e9748f); display:grid; place-items:center}
.logo__t{font-weight:800; font-size:16px; line-height:1.1; white-space:nowrap}
.logo__t small{display:block; font-size:10px; color:var(--c-text-sub); font-weight:500; margin-top:2px}
.hd__nav{display:flex; gap:6px; align-items:center}
.hd__nav a{text-decoration:none; font-size:13px; font-weight:700; padding:8px 10px; border-radius:999px; color:var(--c-text-sub)}
.hd__nav a.hd__cta{background:linear-gradient(180deg,var(--c-orange),var(--c-orange-dark)); color:#fff; padding:8px 14px}
@media (max-width:480px){ .hd__nav a:not(.hd__cta){display:none} .logo__t small{display:none} }

/* ---------- footer ---------- */
.ft{margin-top:56px; border-top:1px solid var(--c-border); padding:28px 0 32px; font-size:13px; color:var(--c-text-sub)}
.ft__grid{display:grid; gap:18px}
.ft__logo{font-weight:800; color:var(--c-text); margin:0 0 4px}
.ft__desc{line-height:1.8}
.ft nav{display:flex; flex-direction:column; gap:8px}
.ft nav a{text-decoration:none; font-weight:600}
.ft__copy{margin-top:18px; color:var(--c-faint); font-size:12px}
.operator{background:var(--c-white); border:2px solid var(--c-accent); border-radius:var(--radius); padding:14px 18px; margin-bottom:22px; line-height:1.7}
.operator p{margin:0}
.operator__role{font-size:11px; font-weight:800; color:var(--c-primary); letter-spacing:.06em}
.operator__name{font-size:16px; font-weight:800; color:var(--c-text)} .operator__name a{text-decoration:none; color:inherit}
.operator__cred{font-size:12.5px; color:var(--c-text); font-weight:600; margin-top:2px}
.operator__desc{font-size:12.5px; color:var(--c-text-sub); margin-top:4px}
.supervised{font-size:12.5px; color:var(--c-text-sub); margin:-6px 0 14px} .supervised a{font-weight:700}
.kv{display:grid; gap:8px; margin:0}
.kv div{display:grid; grid-template-columns:7em 1fr; gap:10px; background:var(--c-white); border:2px solid var(--c-border); border-radius:12px; padding:10px 14px; font-size:14px}
.kv dt{font-weight:800; color:var(--c-text-sub)} .kv dd{margin:0}
@media (min-width:720px){ .ft__grid{grid-template-columns:1.4fr 1fr} }

/* ---------- breadcrumb ---------- */
.bc{font-size:12px; color:var(--c-text-sub); padding:10px 16px 0; max-width:1120px; margin:0 auto; overflow-x:auto; white-space:nowrap}
.bc ol{list-style:none; margin:0; padding:0; display:flex; gap:4px}
.bc li+li::before{content:"›"; margin:0 6px 0 2px; color:var(--c-faint)}
.bc a{color:inherit; text-decoration:none}
.bc [aria-current]{color:var(--c-text); font-weight:700}

/* ---------- FV / hero ---------- */
.fv,.hero{padding:22px 0 10px}
.eyebrow{font-size:12px; font-weight:800; color:var(--c-primary); letter-spacing:.04em; margin:0 0 6px}
.fv h1,.hero h1{font-size:26px; font-weight:800; margin-bottom:10px}
.fv__lead,.hero__lead{font-size:15px; color:var(--c-text-sub); margin-bottom:16px}
.fv__lead b{color:var(--c-orange-dark); font-size:1.15em}
.fv__cta,.hero__cta{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.hero__note{font-size:12px; color:var(--c-faint); margin-top:12px}
@media (min-width:720px){ .fv h1,.hero h1{font-size:34px} .hero{padding:40px 0 16px} .hero__cta{flex-direction:row; align-items:center} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:999px; padding:13px 26px; font-size:15px; font-weight:800; cursor:pointer; text-decoration:none; line-height:1.3; min-height:48px}
.btn--primary{background:linear-gradient(180deg,var(--c-orange),var(--c-orange-dark)); color:#fff; box-shadow:var(--shadow-cta)}
.btn--primary:hover{filter:brightness(1.05)}
.btn--primary[disabled]{opacity:.45; box-shadow:none; cursor:not-allowed; filter:none}
.btn--ghost{background:var(--c-white); color:var(--c-text); border:2px solid var(--c-border)}
.btn--ghost:hover{border-color:var(--c-primary); color:var(--c-primary-dark)}
.btn--lg{padding:16px 34px; font-size:17px}
.btn.sec{background:var(--c-white); color:var(--c-text-sub); border:2px solid var(--c-border); box-shadow:none; padding:10px 20px; font-size:14px}
.btn.sec:hover{border-color:var(--c-primary); color:var(--c-primary-dark)}
.btn.link{background:none; box-shadow:none; color:var(--c-primary-dark); font-weight:700; padding:10px 6px; font-size:13px; text-decoration:underline; text-underline-offset:3px}
.btn__skip{font-size:14px; color:var(--c-text-sub); text-decoration:underline; text-underline-offset:3px; padding:6px 2px}
.more{font-weight:700; text-decoration:none}

/* ---------- content sections ---------- */
.answer{background:var(--c-white); border:2px solid var(--c-accent); border-radius:var(--radius); padding:16px 18px; margin:14px 0 8px; font-size:15px; line-height:1.9; box-shadow:var(--shadow-sm)}
.answer p{margin:0}
.sec{padding:26px 0 6px}
.sec h2{font-size:20px; font-weight:800; margin-bottom:10px; padding-left:12px; border-left:4px solid var(--c-primary)}
.sec h3{font-size:16px; font-weight:800; margin:16px 0 6px}
.sec p{color:var(--c-text)}
.note{font-size:13px; color:var(--c-text-sub); background:var(--c-peach); border-radius:12px; padding:10px 14px; line-height:1.8}
.src{font-size:12px; color:var(--c-faint)}
.ul{padding-left:1.3em; margin:0 0 .9em} .ul li{margin-bottom:4px}
.updated{font-size:12px; color:var(--c-faint); margin-top:20px}
.cta-mid{text-align:center; padding:20px 0}

.checklist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.checklist li{display:flex; align-items:flex-start; gap:10px; background:var(--c-white); border:2px solid var(--c-border); border-radius:14px; padding:10px 12px; font-size:14px; line-height:1.6}
.checklist li span{flex:1}
.copy{flex:none; border:1px solid var(--c-border); background:var(--c-cream); border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:700; color:var(--c-text-sub); cursor:pointer}
.copy:hover,.copy.done{border-color:var(--c-primary); color:var(--c-primary-dark)}

.axes{display:grid; gap:8px; margin:12px 0 16px}
.axes div{display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:start; background:var(--c-white); border:2px solid var(--c-border); border-radius:14px; padding:10px 12px}
.axes dt{font-weight:800; color:var(--c-primary-dark); font-size:15px}
.axes dd{margin:0; font-size:13.5px; color:var(--c-text-sub); line-height:1.7}
@media (min-width:720px){ .axes{grid-template-columns:1fr 1fr} }

.ex{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px}
.ex li{background:var(--c-white); border:2px solid var(--c-border); border-radius:14px; padding:11px 14px; font-size:14px; line-height:1.9}
mark.fill{background:var(--c-peach); color:var(--c-orange-dark); font-weight:800; padding:0 4px; border-radius:4px; border-bottom:2px solid var(--c-orange)}

.chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.chips li,.chips a{display:inline-flex; align-items:center; border:2px solid var(--c-border); background:var(--c-white); border-radius:999px; padding:6px 13px; font-size:13px; font-weight:600; text-decoration:none; color:var(--c-text)}
.chips li:has(>a){padding:0; border:0} .chips li>a{display:inline-flex}

.sv-bar{display:grid; grid-template-columns:8.5em 1fr 3em; gap:10px; align-items:center; margin:6px 0; font-size:13px}
.sv-bar__t{height:14px; background:var(--c-accent); border-radius:99px; overflow:hidden}
.sv-bar__t i{display:block; height:100%; background:linear-gradient(90deg,var(--c-coral),var(--c-primary)); border-radius:99px}
.sv-bar__v{font-weight:800; text-align:right; font-variant-numeric:tabular-nums}
.bars{margin:8px 0 6px}

.qa{background:var(--c-white); border:2px solid var(--c-border); border-radius:14px; padding:12px 16px; margin-bottom:10px}
.qa h3{margin:0 0 6px; font-size:15px}
.qa h3::before{content:"Q. "; color:var(--c-primary)}
.qa p{margin:0; font-size:14px; color:var(--c-text-sub); line-height:1.8}

.links{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.links a{display:block; background:var(--c-white); border:2px solid var(--c-border); border-radius:12px; padding:9px 14px; text-decoration:none; font-weight:600; font-size:14px}
.links a:hover{border-color:var(--c-primary)}
@media (min-width:720px){ .links{grid-template-columns:1fr 1fr} }

.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:8px}
.steps li{counter-increment:s; display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; background:var(--c-white); border:2px solid var(--c-border); border-radius:14px; padding:10px 12px}
.steps li::before{content:counter(s); width:28px; height:28px; border-radius:50%; background:var(--c-primary); color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px}
.steps b{display:block; font-size:14.5px} .steps span{font-size:13px; color:var(--c-text-sub); line-height:1.6}

.feats{display:grid; gap:10px}
.feat{background:var(--c-white); border:2px solid var(--c-border); border-radius:var(--radius); padding:14px 16px}
.feat b{display:block; font-size:15px; margin-bottom:4px} .feat p{margin:0; font-size:13.5px; color:var(--c-text-sub)}
@media (min-width:720px){ .feats{grid-template-columns:1fr 1fr} }

.catgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.catgrid a{display:flex; align-items:center; gap:8px; background:var(--c-white); border:2px solid var(--c-border); border-radius:14px; padding:10px 12px; text-decoration:none; font-weight:700; font-size:13.5px; color:var(--c-text); min-height:48px}
.catgrid a:hover{border-color:var(--c-primary)} .catgrid__e{font-size:18px}
@media (min-width:720px){ .catgrid{grid-template-columns:repeat(3,1fr)} }
.sister{text-align:center; color:var(--c-text-sub); font-size:14px}

.cat{margin-bottom:22px}
.cat__h{font-size:17px; font-weight:800; margin-bottom:6px} .cat__h a{text-decoration:none; color:inherit} .cat__h small{font-size:12px; color:var(--c-faint); font-weight:500; margin-left:6px}
.cat__jobs{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.cat__jobs a{display:inline-block; background:var(--c-white); border:1px solid var(--c-border); border-radius:999px; padding:5px 12px; font-size:13px; text-decoration:none; color:var(--c-text)}
.cat__jobs a.more{border:0; background:none; color:var(--c-primary-dark)}

.joblist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.joblist a{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--c-white); border:2px solid var(--c-border); border-radius:14px; padding:11px 14px; text-decoration:none; color:var(--c-text); min-height:48px}
.joblist a:hover{border-color:var(--c-primary)} .joblist b{font-size:15px} .joblist small{font-size:12px; color:var(--c-primary-dark); font-weight:700; white-space:nowrap}
@media (min-width:720px){ .joblist{grid-template-columns:1fr 1fr} }
.rest{margin-top:14px; font-size:13px; color:var(--c-text-sub)} .rest summary{cursor:pointer; font-weight:700; padding:6px 0} .rest .chips{margin-top:8px}

.tbl{border-collapse:collapse; width:100%; font-size:13.5px; background:var(--c-white); border-radius:14px; overflow:hidden}
.tbl th,.tbl td{padding:9px 12px; border-bottom:1px solid var(--c-border); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{background:var(--c-accent-soft); color:var(--c-primary-dark); font-size:12px}
.tbl tfoot th{background:var(--c-peach); font-weight:800}
.tbl a{text-decoration:none; font-weight:600}

/* ---------- sticky CTA (親指圏) ---------- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(255,249,246,.94); backdrop-filter:blur(8px); border-top:1px solid var(--c-border); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:4px}
.sticky-cta .btn{width:100%; max-width:520px}
.sticky-cta__alt{font-size:12px; color:var(--c-text-sub); text-decoration:underline; text-underline-offset:3px}
@media (min-width:900px){ .sticky-cta{display:none} }

/* ============================================================
   ビルダー（/create/）
   ============================================================ */
.create{padding-top:12px}
.cur{display:flex; align-items:center; gap:8px; background:var(--c-white); border:2px solid var(--c-accent); border-radius:999px; padding:6px 8px 6px 14px; margin-bottom:12px; font-size:13px; flex-wrap:wrap}
.cur__l{font-weight:800; color:var(--c-text-sub)} .cur__v{font-weight:800; color:var(--c-primary-dark); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cur__opt{font-size:10.5px; font-weight:800; color:var(--c-orange-dark); background:var(--c-peach); border-radius:99px; padding:1px 8px}
.cur__btn{border:0; background:var(--c-primary); color:#fff; border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:800; cursor:pointer; min-height:34px}
.cur__btn:hover{background:var(--c-primary-dark)}

.nyan-row{display:flex; align-items:flex-end; gap:10px; margin-bottom:12px}
.nyan{width:64px; flex:none} .nyan svg{display:block; width:100%; height:auto}
.bubble{background:var(--c-white); border:2px solid var(--c-accent); border-radius:var(--radius) var(--radius) var(--radius) 4px; padding:10px 14px; font-size:13.5px; line-height:1.7; font-weight:600; box-shadow:var(--shadow-sm); flex:1}

.bar{height:8px; background:var(--c-accent); border-radius:99px; overflow:hidden; margin-bottom:8px}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--c-coral),var(--c-primary)); border-radius:99px; transition:width .3s}
.rail{display:flex; overflow-x:auto; margin-bottom:14px; scrollbar-width:none} .rail::-webkit-scrollbar{display:none}
.rail-item{display:flex; align-items:center; gap:5px; white-space:nowrap; border:0; background:none; padding:4px 10px 4px 0; font-size:12px; color:var(--c-faint); cursor:default}
.rail-item .n{width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700; border:1.5px solid currentColor; flex:none}
.rail-item.done{color:var(--c-primary); cursor:pointer} .rail-item.done .n{background:var(--c-primary); border-color:var(--c-primary); color:#fff}
.rail-item.now{color:var(--c-primary-dark); font-weight:800} .rail-item.now .n{background:var(--c-accent); border-color:var(--c-primary-dark)}

.tabs{display:flex; gap:4px; background:var(--c-white); border:1px solid var(--c-border); border-radius:999px; padding:4px; margin-bottom:14px; box-shadow:var(--shadow-sm)}
.tabs button{flex:1; border:0; background:none; padding:9px; border-radius:999px; font-size:13.5px; font-weight:700; cursor:pointer; color:var(--c-text-sub); min-height:40px}
.tabs button[aria-pressed="true"]{background:var(--c-primary); color:#fff}
.create__grid{display:grid; gap:20px}
body[data-view="p"] .panel,body[data-view="p"] .nyan-row{display:none}
body[data-view="q"] .side{display:none}
@media (min-width:900px){
  .tabs{display:none}
  .create__grid{grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:start}
  body[data-view="p"] .panel,body[data-view="p"] .nyan-row,body[data-view="q"] .side{display:block}
  .side{position:sticky; top:calc(var(--header-h) + 12px)}
  .nyan{width:80px}
}

.panel{background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden}
.q-head{padding:20px 18px 2px} .q-eyebrow{font-size:11px; letter-spacing:.1em; color:var(--c-primary); font-weight:800; margin:0 0 5px}
.q-title{font-size:20px; font-weight:800} .q-help{margin:6px 0 0; color:var(--c-text-sub); font-size:13px}
.q-body{padding:14px 18px 20px; display:flex; flex-direction:column; gap:16px}
.hint{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--c-text-sub)}
.hint .pill{background:var(--c-accent); color:var(--c-primary-dark); border-radius:999px; padding:3px 12px; font-weight:800; font-size:12px; font-variant-numeric:tabular-nums}
.chip{border:2px solid var(--c-border); background:var(--c-white); border-radius:999px; padding:8px 14px; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-align:left; line-height:1.55; font-weight:600; min-height:42px}
.chip:hover{border-color:var(--c-coral)}
.chip[aria-pressed="true"]{background:var(--c-accent); border-color:var(--c-primary); color:var(--c-primary-dark)}
.chip.wide{width:100%; border-radius:14px; align-items:flex-start; font-weight:500}
.chip.own{border-style:dashed} .chip.own[aria-pressed="true"]{border-style:solid}
.ownbadge{font-size:10px; font-weight:800; color:var(--c-orange-dark); background:var(--c-peach); border-radius:99px; padding:1px 7px; flex:none}
.mk{width:16px; height:16px; border-radius:50%; border:2px solid var(--c-border); flex:none; display:grid; place-items:center; font-size:9px; color:transparent; margin-top:2px}
.chip:not(.wide) .mk{margin-top:0}
.chip[aria-pressed="true"] .mk,.ach[data-on="1"] .mk,.str[aria-pressed="true"] .mk{background:var(--c-primary); border-color:var(--c-primary); color:#fff}
.q-body .chips{display:flex; flex-wrap:wrap; gap:8px}
.fields{display:grid; gap:14px} .f{display:grid; gap:5px}
.f>label{font-size:12px; font-weight:800; color:var(--c-text-sub)} .f .opt{font-weight:500; color:var(--c-faint)}
.req{color:var(--c-primary); font-size:10.5px; background:var(--c-accent); border-radius:99px; padding:1px 8px; margin-left:5px; font-weight:800}
.q-body input[type=text],.q-body textarea{border:2px solid var(--c-border); background:var(--c-white); border-radius:12px; padding:11px 13px; width:100%; line-height:1.6; font-size:16px}
.q-body textarea{resize:vertical; min-height:72px}
.q-body input:focus,.q-body textarea:focus{outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-accent)}
.row2{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center} .tilde{color:var(--c-text-sub); font-size:13px}
.check{display:inline-flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; font-weight:600} .check input{width:18px; height:18px; accent-color:var(--c-primary)}
.achs{display:grid; gap:9px}
.ach{border:2px solid var(--c-border); border-radius:14px; background:var(--c-white); padding:11px 14px; display:grid; grid-template-columns:auto 1fr; gap:10px; cursor:pointer; align-items:start; line-height:2; font-size:13.5px}
.ach:hover{border-color:var(--c-coral)} .ach[data-on="1"]{background:var(--c-accent-soft); border-color:var(--c-primary); cursor:default}
.ach .txt{color:var(--c-text-sub)} .ach[data-on="1"] .txt{color:var(--c-text)}
.blank{border:0; border-bottom:2.5px solid var(--c-orange); background:transparent; text-align:center; padding:0 4px 1px; font-weight:800; color:var(--c-orange-dark); font-variant-numeric:tabular-nums; min-width:3ch; border-radius:4px 4px 0 0; font-size:16px}
.blank::placeholder{color:var(--c-faint); font-weight:500} .blank:focus{outline:none; background:var(--c-accent)}
.strs{display:grid; gap:10px}
.str{border:2px solid var(--c-border); border-radius:var(--radius); background:var(--c-white); padding:12px 15px; text-align:left; cursor:pointer; display:grid; gap:4px}
.str:hover{border-color:var(--c-coral)} .str[aria-pressed="true"]{background:var(--c-accent-soft); border-color:var(--c-primary)}
.str .sl{font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px} .str .sb{font-size:12px; color:var(--c-text-sub); line-height:1.8}
.grp{display:grid; gap:8px}
.grp h4{margin:0; font-size:11px; letter-spacing:.06em; color:var(--c-primary-dark); font-weight:800; background:var(--c-accent-soft); border-radius:99px; padding:4px 12px; justify-self:start}
.cochip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--c-orange-dark); background:var(--c-peach); border-radius:999px; padding:3px 12px}
.selrow{display:flex; flex-wrap:wrap; gap:7px; align-items:center; background:var(--c-accent-soft); border:1px dashed var(--c-primary); border-radius:14px; padding:10px 13px}
.selrow .lbl{font-size:11.5px; font-weight:800; color:var(--c-primary-dark)}
.tagsel{display:inline-flex; align-items:center; gap:6px; background:var(--c-white); border:1px solid var(--c-primary); border-radius:999px; padding:4px 6px 4px 12px; font-size:12.5px; font-weight:700}
.delx{border:0; background:var(--c-accent); color:var(--c-primary-dark); width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:11px; display:grid; place-items:center; padding:0}
.delx:hover{background:var(--c-primary); color:#fff}
.adder{display:flex; gap:8px; align-items:center} .adder input{flex:1} .adder .addbtn{white-space:nowrap; padding:9px 16px; font-size:13px}
.nav{display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--c-border); background:var(--c-accent-soft)}
.nav .spacer{margin-left:auto}
.side-head{display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--c-text-sub); padding:0 4px 8px; font-weight:700}
.paper-wrap{background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:22px 20px 26px; position:relative; font-family:var(--font-doc)}
@media (min-width:900px){ .paper-wrap{max-height:calc(100vh - var(--header-h) - 40px); overflow-y:auto; padding:26px} }
.paper h2{margin:0 0 4px; text-align:center; font-size:17px; font-weight:600; letter-spacing:.42em; text-indent:.42em}
.paper .meta{text-align:right; font-size:11.5px; color:var(--c-text-sub); line-height:1.9; margin-bottom:16px} .paper .meta .nm{color:var(--c-text); font-size:13px}
.paper.has-seal .meta{padding-right:66px}
.psec{margin:0 0 16px} .psec-h{font-size:13px; font-weight:600; margin:0 0 6px; padding-bottom:4px; border-bottom:1px solid var(--c-border); display:flex; align-items:center; gap:6px}
.psec-h::before{content:"■"; color:var(--c-primary); font-size:9px}
.psec p{margin:0 0 5px; font-size:12px; line-height:1.95; text-align:justify}
.psec ul{margin:0; padding-left:0; list-style:none; font-size:12px; line-height:1.95}
.psec li{padding-left:1.1em; text-indent:-1.1em}
.psec li::before{content:"・"}
.psec ul.cols{columns:2; column-gap:14px}
.co{margin:0 0 13px} .co-n{font-size:12.5px; font-weight:600; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap} .co-n .per{font-weight:400; font-size:11px; color:var(--c-text-sub)}
.co-m{font-size:11px; color:var(--c-text-sub); margin:1px 0 4px} .co-sub{font-size:11.5px; font-weight:600; margin:6px 0 2px; color:var(--c-primary-dark)}
.ghosted{color:var(--c-faint)} .endmark{text-align:right; font-size:12px; color:var(--c-text-sub); margin-top:12px}
.seal{position:absolute; top:16px; right:18px; width:58px; height:58px; border-radius:50%; border:2.5px solid var(--c-primary); color:var(--c-primary); display:grid; place-items:center; font-family:var(--font-doc); font-weight:600; font-size:15px; transform:rotate(-11deg); animation:stamp .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes stamp{from{transform:rotate(-11deg) scale(1.9); opacity:0}to{transform:rotate(-11deg) scale(1); opacity:1}}
.done-actions{display:flex; gap:9px; flex-wrap:wrap}
.outbox{width:100%; min-height:200px; font-family:var(--font-doc); font-size:12px; line-height:1.9; border:2px solid var(--c-border); border-radius:12px; padding:13px; background:var(--c-cream); white-space:pre; overflow:auto}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--c-text); color:#fff; padding:11px 22px; border-radius:999px; font-size:13.5px; font-weight:700; box-shadow:var(--shadow-card); z-index:60}
.invite{background:var(--c-peach); border-radius:14px; padding:12px 14px; font-size:13px; line-height:1.7; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.invite b{color:var(--c-orange-dark)}

/* ============================================================
   全画面ピッカー（1画面＝1階層。変化は必ずビューポート内で起きる）
   ============================================================ */
.picker{position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; border:0; padding:0; background:var(--c-cream); color:var(--c-text); display:none; flex-direction:column}
.picker[open]{display:flex}
.picker::backdrop{background:rgba(74,46,43,.45)}
.picker__hd{display:grid; grid-template-columns:44px 1fr 44px; align-items:center; height:var(--header-h); border-bottom:1px solid var(--c-border); background:var(--c-white); flex:none}
.picker__title{text-align:center; font-size:15px; font-weight:800; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 4px}
.picker__title:focus{outline:none}
.picker__back,.picker__close{border:0; background:none; font-size:26px; line-height:1; cursor:pointer; height:44px; color:var(--c-text-sub)}
.picker__back[hidden]{visibility:hidden; display:block}
.picker__search{padding:10px 14px; background:var(--c-white); border-bottom:1px solid var(--c-border); flex:none}
.picker__search input{width:100%; border:2px solid var(--c-border); border-radius:999px; padding:10px 16px; font-size:16px; background:var(--c-cream)}
.picker__search input:focus{outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-accent)}
.picker__list{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 14px calc(var(--sticky-h) + 24px); overscroll-behavior:contain}
.pk-h{font-size:11px; font-weight:800; color:var(--c-faint); letter-spacing:.06em; margin:14px 4px 6px}
.pk-row{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--c-white); border:2px solid var(--c-border); border-radius:14px; padding:12px 14px; margin-bottom:8px; font-size:15px; font-weight:700; cursor:pointer; min-height:52px; transition:background .1s,border-color .1s}
.pk-row:active{background:var(--c-accent)}
.pk-row .e{font-size:20px; width:28px; text-align:center; flex:none}
.pk-row .t{flex:1; min-width:0} .pk-row .t small{display:block; font-size:11.5px; color:var(--c-text-sub); font-weight:500; margin-top:1px}
.pk-row .a{color:var(--c-faint); font-size:18px; flex:none}
.pk-row.skip{border-style:dashed; border-color:var(--c-orange); background:var(--c-peach)}
.pk-row.skip .e{color:var(--c-orange-dark)}
.pk-row[aria-selected="true"]{background:var(--c-primary); border-color:var(--c-primary); color:#fff}
.pk-row[aria-selected="true"] .t small,.pk-row[aria-selected="true"] .a{color:rgba(255,255,255,.85)}
.pk-row[aria-selected="true"] .a::before{content:"✓"}
.pk-empty{padding:16px; background:var(--c-white); border-radius:14px; font-size:13.5px; color:var(--c-text-sub); line-height:1.8}
.picker__ft{position:sticky; bottom:0; flex:none; display:flex; align-items:center; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,249,246,.96); backdrop-filter:blur(8px); border-top:1px solid var(--c-border)}
.picker__sel{flex:1; min-width:0; font-size:12px; color:var(--c-text-sub)} .picker__sel b{display:block; font-size:14px; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.picker__ft .btn{flex:none; padding:12px 20px; font-size:14px}
.picker__ft .btn.pulse{animation:pulse .45s ease}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ============================================================
   印刷 / PDF保存 — A4縦の職務経歴書として出力する
   画面用のUIはすべて落とし、#paper だけを本文として組み直す。
   ============================================================ */
@media print {
  @page { size: A4 portrait; margin: 20mm 18mm; }

  html, body { background: #fff !important; margin: 0; padding: 0; }
  body {
    font-family: var(--font-doc);
    color: #000;
    font-size: 10.5pt;
    line-height: 1.75;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* 画面用の要素は印刷しない */
  .hd, .ft, .skip, .nyan-row, .bar, .rail, .tabs, .panel, .side-head,
  .sticky-cta, .cur, .toast, .invite, .adder, .selrow, .note, noscript,
  .bc, .fv__cta, .cta-mid, .copy, .more, .rest { display: none !important; }

  /* 画面のタブ切替（data-view）に関係なく書類を出す */
  body[data-view="q"] .side,
  body[data-view="p"] .side { display: block !important; }

  .wrap, .create, .create__grid, .side { display: block !important; max-width: none; margin: 0; padding: 0; position: static; }
  .paper-wrap {
    border: 0; box-shadow: none; border-radius: 0; padding: 0;
    max-height: none; overflow: visible; background: #fff;
  }
  .seal { display: none !important; }          /* 「完成」印は書類に出さない */

  /* ---- 書類本体 ---- */
  .paper { color: #000; }
  .paper h2 {                                   /* 表題「職務経歴書」 */
    font-size: 16pt; font-weight: 600; text-align: center;
    letter-spacing: .5em; text-indent: .5em; margin: 0 0 8mm;
  }
  .paper .meta {
    text-align: right; font-size: 9.5pt; color: #000;
    line-height: 1.9; margin: 0 0 7mm; padding-right: 0;
  }
  .paper .meta .nm { font-size: 11pt; }

  .psec { margin: 0 0 6mm; }
  .psec-h {
    font-size: 11.5pt; font-weight: 600; color: #000;
    border-bottom: 0.4pt solid #000; padding-bottom: 1.5mm; margin: 0 0 3mm;
    break-after: avoid; page-break-after: avoid;
  }
  .psec-h::before { content: "■"; color: #000; font-size: 8pt; margin-right: 1mm; }
  .psec p { font-size: 10.5pt; line-height: 1.85; margin: 0 0 2mm; text-align: justify; }
  .psec ul { margin: 0 0 2mm; padding-left: 0; list-style: none; font-size: 10.5pt; line-height: 1.8; }
  .psec li { margin-bottom: 0.8mm; padding-left: 4mm; text-indent: -4mm; break-inside: avoid; page-break-inside: avoid; }
  .psec li::before { content: "・"; }
  /* スキル・資格は2段組にしてA4の行数を節約する */
  .psec ul.cols { columns: 2; column-gap: 8mm; }
  .psec ul.cols li { break-inside: avoid; }

  /* 勤務先ブロックは途中で切らない */
  .co { margin: 0 0 5mm; break-inside: avoid; page-break-inside: avoid; }
  .co-n { font-size: 11pt; font-weight: 600; display: block; margin-bottom: 1mm; }
  .co-n .per { float: right; font-weight: 400; font-size: 9.5pt; color: #000; }
  .co-n::after { content: ""; display: block; clear: both; }
  .co-m { font-size: 9.5pt; color: #000; margin: 0 0 1mm; }
  .co-sub {
    font-size: 10pt; font-weight: 600; color: #000; margin: 2.5mm 0 1mm;
    break-after: avoid; page-break-after: avoid;
  }
  .co-sub::before { content: "◆"; font-size: 8pt; margin-right: 1mm; }

  .ghosted { display: none; }                   /* 未入力の案内文は出さない */
  .endmark { text-align: right; font-size: 10.5pt; color: #000; margin-top: 6mm; }

  /* 段落の泣き別れを防ぐ */
  p, li { orphans: 2; widows: 2; }
}

/* ---------- 職種ページ：選べるチェックリスト ---------- */
.picklist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.picklist label{display:flex; align-items:flex-start; gap:11px; background:var(--c-white); border:2px solid var(--c-border);
  border-radius:14px; padding:11px 14px; font-size:14px; line-height:1.7; cursor:pointer; min-height:48px}
.picklist label:hover{border-color:var(--c-coral)}
.picklist input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--c-primary); flex:none}
.picklist label:has(input:checked){background:var(--c-accent-soft); border-color:var(--c-primary)}
.sticky-cta__count{margin:0; font-size:12px; font-weight:700; color:var(--c-primary-dark)}

/* ---------- ウィザード：勤務先の確認 ---------- */
.colist{display:grid; gap:10px}
.coitem{border:2px solid var(--c-border); border-radius:14px; background:var(--c-white); padding:12px 14px}
.coitem__h{display:flex; align-items:center; justify-content:space-between; gap:10px}
.coitem__h b{font-size:15px}
.coitem__h .btn{padding:6px 14px; min-height:36px; font-size:12.5px}
.coitem__m{font-size:12.5px; color:var(--c-text-sub); margin-top:3px}
.addco-btn{width:100%; justify-content:center}