/* Layout: one-column phone app; step engine with several answer formats; result is a stacked report that reads top-down (type → values → skills → jobs → roadmap) */
:root{
  color-scheme: light;
  --bg:#FFFFFF;
  --paper:#F5F6F9;
  --ink:#171B2B;
  --muted:#686D80;
  --line:#E4E6EE;
  --soft:#EEF0F5;
  --brand:#2F5BD3;
  --brand-soft:#EAF0FD;
  --tone:#2F5BD3; --tone-ink:#2448AE; --tone-soft:#EAF0FD;
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  --r-lg:24px; --r-md:16px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.75; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent}
.app{max-width:480px; margin:0 auto; min-height:100%; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px)); padding-block:20px 48px; display:flex; flex-direction:column}
h1,h2,h3{text-wrap:balance; margin:0; line-height:1.4}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:22px}
.brand small{font-family:var(--sans); font-size:11px; color:var(--muted); letter-spacing:.14em; font-weight:500}
.mark{width:22px; height:22px; flex:none}

.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:56px; border-radius:999px; border:0; background:var(--ink); color:#fff; font-weight:700; font-size:16px; letter-spacing:.04em; transition:transform .15s ease, opacity .15s}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn.tone{background:var(--tone-ink)}
.btn[disabled]{opacity:.35; cursor:default}

/* intro */
.intro{display:flex; flex-direction:column; gap:24px; padding-top:8px}
.hero .eyebrow{font-size:12px; letter-spacing:.2em; color:var(--muted); font-weight:500}
.hero h1{font-size:31px; font-weight:900; margin-top:10px}
.hero h1 em{font-family:var(--serif); font-style:italic; font-weight:400; font-size:42px; color:var(--brand)}
.hero p{color:var(--muted); margin-top:12px}
.cta{display:flex; flex-direction:column; gap:12px; align-items:center}
.meta{display:flex; gap:16px; font-size:13px; color:var(--muted); flex-wrap:wrap; justify-content:center}
.meta b{color:var(--ink); font-variant-numeric:tabular-nums}
.flow{display:flex; flex-direction:column; gap:0; border-left:2px solid var(--line); margin-left:10px}
.flow div{position:relative; padding:0 0 16px 22px; font-size:14px}
.flow div:last-child{padding-bottom:0}
.flow div::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--brand)}
.flow b{display:block; font-size:14.5px}
.flow span{color:var(--muted); font-size:12.5px}
.foot{font-size:11.5px; color:var(--muted); text-align:center; line-height:1.75}

/* quiz */
.qtop{display:flex; align-items:center; gap:12px; height:44px}
.back{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:var(--bg); display:grid; place-items:center; flex:none}
.back svg{width:18px; height:18px}
.prog{flex:1; display:flex; flex-direction:column; gap:6px; min-width:0}
.prog .num{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.04em; display:flex; justify-content:space-between; gap:8px}
.prog .num b{color:var(--ink)}
.bar{height:4px; background:var(--soft); border-radius:4px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--brand); border-radius:4px; transition:width .35s ease}
.qbody{margin-top:34px; display:flex; flex-direction:column; gap:24px}
.sect{display:inline-flex; align-self:flex-start; gap:6px; font-size:12px; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:4px 12px; border-radius:999px}
.qtext{font-size:21px; font-weight:700; line-height:1.6}
.qhint{font-size:13px; color:var(--muted); margin-top:6px}
.opts{display:flex; flex-direction:column; gap:10px}
.opt{display:flex; align-items:center; gap:14px; width:100%; min-height:56px; padding:10px 18px; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--bg); text-align:left; font-size:15px; font-weight:500; line-height:1.5; transition:background .15s, border-color .15s, color .15s}
.opt .mk{width:26px; display:grid; place-items:center; flex:none}
.opt .mk i{display:block; border-radius:50%; border:2px solid var(--ink)}
.opt .em{font-size:20px; width:26px; text-align:center; flex:none}
.opt small{display:block; font-size:12px; color:var(--muted); font-weight:400}
.opt.sel{background:var(--ink); border-color:var(--ink); color:#fff}
.opt.sel small{color:#C9CCD8}
.opt.sel .mk i{border-color:#fff; background:#fff}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1.5px solid var(--line); background:var(--bg); border-radius:999px; padding:9px 15px; font-size:14px; font-weight:500; min-height:44px}
.chip.sel{background:var(--ink); color:#fff; border-color:var(--ink)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.card-opt{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--bg); text-align:left; font-size:14px; font-weight:700; line-height:1.45; min-width:0}
.card-opt .em{font-size:24px; line-height:1}
.card-opt small{font-size:11.5px; color:var(--muted); font-weight:400}
.card-opt.sel{background:var(--ink); color:#fff; border-color:var(--ink)}
.card-opt.sel small{color:#C9CCD8}
.counter{font-size:12.5px; color:var(--muted)}
.counter b{color:var(--brand)}
.scale{display:flex; flex-direction:column; gap:14px}
.srow{display:flex; flex-direction:column; gap:8px}
.srow-h{display:flex; justify-content:space-between; font-size:14.5px; font-weight:700}
.srow-h span{font-size:12px; color:var(--brand); font-weight:700}
.dots5{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.dots5 button{height:40px; border-radius:10px; border:1.5px solid var(--line); background:var(--bg); font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}
.dots5 button.on{background:var(--brand-soft); border-color:var(--brand-soft); color:var(--brand)}
.dots5 button.cur{background:var(--brand); border-color:var(--brand); color:#fff}
.legend5{display:flex; justify-content:space-between; font-size:11px; color:var(--muted)}
.wlb{display:flex; flex-direction:column; gap:12px}
.wlb .ends{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700}
.slide{animation:slideIn .3s ease both}
.slide.rev{animation-name:slideInRev}
@keyframes slideIn{from{opacity:0; transform:translateX(18px)}to{opacity:1; transform:none}}
@keyframes slideInRev{from{opacity:0; transform:translateX(-18px)}to{opacity:1; transform:none}}
.loading{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-height:60vh; color:var(--muted); font-size:14px; text-align:center}
.loading .steps{display:flex; flex-direction:column; gap:6px; font-size:13px}
.loading .steps span{animation:fadeIn .4s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* result */
.result{display:flex; flex-direction:column; gap:18px}
.notice{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:var(--paper); font-size:12.5px; line-height:1.75; color:var(--muted)}
.notice b{color:var(--ink)}
.rhead{position:relative; overflow:hidden; border-radius:28px; padding:26px 22px; background:var(--tone-soft)}
.rhead::after{content:""; position:absolute; width:240px; height:240px; right:-80px; top:-90px; border-radius:50%; background:radial-gradient(circle, var(--tone) 0%, transparent 70%); opacity:.3}
.rhead > *{position:relative; z-index:1}
.rhead .eyebrow{font-size:11.5px; letter-spacing:.18em; color:var(--tone-ink); font-weight:700; padding-right:90px}
.rhead .en{font-family:var(--serif); font-style:italic; font-size:30px; color:var(--tone-ink); line-height:1.15}
.rhead h1{font-size:32px; font-weight:900}
.rhead .tag{margin-top:10px; font-weight:700}
.rhead .desc{margin-top:8px; font-size:14px; color:#3b3e4d}
.rhead .badge{position:absolute; right:20px; top:20px; width:76px; height:76px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:40px; box-shadow:0 6px 20px rgba(23,27,43,.08)}
.summary{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px}
.summary div{background:rgba(255,255,255,.75); border-radius:14px; padding:10px 12px; min-width:0}
.summary small{display:block; font-size:10.5px; color:var(--muted); letter-spacing:.06em}
.summary b{font-size:13.5px; line-height:1.45; display:block}

.card{background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px 20px}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
.sec-h h2{font-size:17px; font-weight:700}
.sec-h span{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:15px; white-space:nowrap}
.mini{font-size:12.5px; color:var(--muted); line-height:1.7}
.sub{font-size:14px; font-weight:700; margin:18px 0 10px}
.radar-wrap{display:flex; justify-content:center}
.radar-wrap svg{width:100%; max-width:320px; height:auto; overflow:visible}
.list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.list li{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.65}
.list .ic{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; margin-top:1px}
.ic.plus{background:var(--tone-soft); color:var(--tone-ink)}
.ic.minus{background:var(--soft); color:var(--muted)}

.vals{display:flex; flex-wrap:wrap; gap:8px}
.vals span{background:var(--brand-soft); color:var(--brand); font-weight:700; font-size:13px; padding:6px 12px; border-radius:999px}
.kv{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.kv div{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; border-bottom:1px solid var(--line); padding-bottom:8px}
.kv div span{color:var(--muted); flex:none}
.kv div b{text-align:right}

.skills{display:flex; flex-direction:column; gap:12px}
.sk{display:grid; grid-template-columns:9.2em 1fr 2em; gap:10px; align-items:center; font-size:13px}
.sk b{font-weight:700; font-size:13px}
.sk .trk{position:relative; height:10px; border-radius:10px; background:var(--soft)}
.sk .trk i{position:absolute; left:0; top:0; bottom:0; border-radius:10px; background:var(--brand)}
.sk .trk em{position:absolute; top:-4px; width:3px; height:18px; border-radius:2px; background:#E0703A; transform:translateX(-50%)}
.sk .gap{font-size:11px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.gap.ok{color:#2E8C62}
.gap.ng{color:#C2572B}
.legend{display:flex; gap:16px; font-size:11.5px; color:var(--muted); margin-top:12px; flex-wrap:wrap}
.legend i{display:inline-block; width:12px; height:8px; border-radius:4px; background:var(--brand); margin-right:4px; vertical-align:middle}
.legend i.req{width:3px; height:12px; background:#E0703A}

.jobs{display:flex; flex-direction:column; gap:10px}
.job{border-radius:var(--r-md); background:var(--paper); padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.job.top{background:var(--tone-soft); outline:1.5px solid var(--tone)}
.job-h{display:flex; align-items:center; gap:12px}
.job-h .rank{font-family:var(--serif); font-style:italic; font-size:26px; line-height:1; color:var(--tone-ink); width:22px; text-align:center; flex:none}
.job-h .em{font-size:24px; flex:none}
.job-h div{flex:1; min-width:0}
.job-h b{display:block; font-size:15px; line-height:1.4}
.job-h .pct{font-size:20px; font-weight:900; font-variant-numeric:tabular-nums; color:var(--tone-ink); flex:none}
.job-h .pct small{font-size:11px}
.mbar{height:6px; border-radius:6px; background:rgba(23,27,43,.08); overflow:hidden}
.mbar i{display:block; height:100%; background:var(--tone-ink); border-radius:6px}
.why{display:flex; flex-wrap:wrap; gap:6px}
.why span{font-size:11.5px; background:#fff; border-radius:999px; padding:2px 10px; color:var(--muted); font-weight:500}
.why span.hit{color:var(--tone-ink); font-weight:700}
.job p{font-size:13px; color:#3b3e4d}

.poss{display:flex; flex-direction:column; gap:10px}
.match-p{display:flex; gap:12px; align-items:flex-start; background:var(--paper); border-radius:16px; padding:14px}
.match-p .em{font-size:24px; line-height:1.2; flex:none}
.match-p > div{min-width:0}
.match-p b{display:block; font-size:15px}
.match-p b em{font-style:normal; font-size:12px; color:var(--tone-ink); margin-left:8px; font-weight:700}
.match-p p{font-size:13px; color:#3b3e4d; line-height:1.7; margin-top:2px}
.road{display:flex; flex-direction:column; position:relative}
.phase{position:relative; padding:0 0 22px 30px}
.phase:last-child{padding-bottom:0}
.phase::before{content:""; position:absolute; left:8px; top:22px; bottom:0; width:2px; background:var(--line)}
.phase:last-child::before{display:none}
.phase .dot{position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:50%; background:var(--bg); border:3px solid var(--tone-ink)}
.phase .when{font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--tone-ink)}
.phase h3{font-size:16px; font-weight:700; margin:2px 0 8px}
.phase ul{margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:1.65}
.phase .goal{display:inline-block; font-size:12px; background:var(--tone-soft); color:var(--tone-ink); font-weight:700; padding:3px 10px; border-radius:8px; margin-bottom:8px}

.adv{display:flex; flex-direction:column; gap:16px}
.adv-item{display:flex; gap:14px; align-items:flex-start}
.adv-item .n{flex:none; font-family:var(--serif); font-style:italic; font-size:24px; line-height:1; color:var(--tone-ink); width:20px; text-align:center; padding-top:3px}
.adv-item > div{min-width:0}
.adv-item b{display:block; font-size:15px; margin-bottom:2px}
.adv-item p{font-size:14px; color:#3b3e4d}
.tabs{display:grid; grid-template-columns:1fr 1fr; background:var(--paper); border-radius:999px; padding:4px; margin-bottom:18px}
.tabs button{border:0; background:transparent; border-radius:999px; min-height:40px; font-weight:700; font-size:13.5px; color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--bg); color:var(--ink); box-shadow:0 1px 3px rgba(23,27,43,.1)}
.todo{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.todo li{display:flex; gap:10px; align-items:flex-start; background:var(--paper); border-radius:14px; padding:12px 14px; font-size:14px; line-height:1.6}
.todo input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--tone-ink); flex:none}
.todo input:checked + label{color:var(--muted); text-decoration:line-through}
.note{background:var(--paper); border-radius:16px; padding:14px 16px; font-size:13.5px; line-height:1.75; color:#3b3e4d; display:flex; flex-direction:column; gap:8px}
.note b{color:var(--ink)}

.share-prev{border-radius:18px; overflow:hidden; background:var(--paper); aspect-ratio:4/5; max-width:100%; display:grid; place-items:center}
.share-prev img{width:100%; height:100%; object-fit:cover; display:block}
.share-actions{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.hint{font-size:12.5px; color:var(--muted); text-align:center}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:13.5px; z-index:20; max-width:calc(100% - 40px)}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* ===== site / landing ===== */
a{color:var(--brand)}
.wrap{max-width:760px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px))}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:14px}
.site-header .brand{text-decoration:none; color:var(--ink)}
.beta{font-family:var(--sans); font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#A84B17; background:#FFF0E5; border-radius:999px; padding:2px 8px}
.site-nav{display:flex; gap:16px; font-size:13px}
.site-nav a{color:var(--muted); text-decoration:none}
.site-nav a:hover{color:var(--ink)}
@media (max-width:520px){ .site-nav .opt-link{display:none} }

.hero{padding-block:10px 32px}
.hero .wrap{display:flex; flex-direction:column; gap:20px}
.hero .eyebrow{display:inline-flex; align-self:flex-start; gap:8px; align-items:center; font-size:12px; font-weight:700; color:var(--brand); background:var(--brand-soft); border-radius:999px; padding:4px 12px; letter-spacing:.04em}
.hero h1{font-size:clamp(31px, 8vw, 46px); font-weight:900; line-height:1.3; letter-spacing:.01em}
.hero .tagline{font-family:var(--serif); font-style:italic; font-size:21px; color:var(--brand); line-height:1.3; margin-top:-6px}
.hero .def{font-size:15.5px; line-height:1.9; color:#33374a; max-width:40em}
.hero .def strong{color:var(--ink)}
.hero .cta-row{display:flex; flex-direction:column; gap:12px; max-width:480px}
.hero .meta{justify-content:flex-start}
.learn{display:grid; grid-template-columns:1fr; gap:8px; margin:0; padding:0; list-style:none}
@media (min-width:560px){ .learn{grid-template-columns:1fr 1fr} }
.learn li{display:flex; gap:12px; align-items:flex-start; background:var(--paper); border-radius:16px; padding:12px 14px; min-width:0}
.learn .em{font-size:22px; line-height:1.3; flex:none}
.learn b{display:block; font-size:14.5px}
.learn span{font-size:12.5px; color:var(--muted); line-height:1.6}
.box-h{font-size:15px; font-weight:700}
.privacy-line{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--muted)}

.lp section{padding-block:40px; border-top:1px solid var(--line)}
.lp h2{font-size:clamp(21px, 5.4vw, 26px); font-weight:900; line-height:1.45}
.lp .lead2{color:var(--muted); font-size:14px; margin-top:8px; margin-bottom:20px; max-width:40em}
.lp h3{font-size:16px; font-weight:700}
.lp p{line-height:1.9}
.toc{background:var(--paper); border-radius:18px; padding:16px 18px}
.toc ol{margin:8px 0 0; padding-left:1.4em; display:grid; grid-template-columns:1fr; gap:4px 20px; font-size:14px}
@media (min-width:560px){ .toc ol{grid-template-columns:1fr 1fr} }
.toc a{color:var(--ink); text-decoration:none}
.toc a:hover{color:var(--brand); text-decoration:underline}
.grid2c{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:560px){ .grid2c{grid-template-columns:1fr 1fr} }
.who{border:1.5px solid var(--line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:6px; min-width:0}
.who .em{font-size:26px; line-height:1}
.who p{font-size:13.5px; color:#3b3e4d; line-height:1.8}
.steps-list{list-style:none; margin:0; padding:0; counter-reset:st; display:flex; flex-direction:column; gap:10px}
.steps-list li{counter-increment:st; display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:var(--paper); border-radius:16px}
.steps-list li::before{content:counter(st); flex:none; width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:900; font-size:13px; margin-top:1px}
.steps-list b{display:block; font-size:15px}
.steps-list span{font-size:13px; color:var(--muted)}
.tbl{overflow-x:auto; border:1.5px solid var(--line); border-radius:16px}
.tbl table{width:100%; border-collapse:collapse; font-size:13px}
.tbl th,.tbl td{padding:11px 10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); line-height:1.6}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{background:var(--paper); font-size:12.5px; color:var(--muted)}
.tbl td.us{font-weight:700; color:var(--ink); background:#F7F9FF}
.tbl tbody th{font-weight:700; white-space:nowrap; font-size:12.5px}
.type-grid{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:560px){ .type-grid{grid-template-columns:1fr 1fr} }
.type-card{display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:18px; text-decoration:none; color:var(--ink); min-width:0; transition:transform .15s}
.type-card:hover{transform:translateY(-2px)}
.type-card .tc-h{display:flex; align-items:center; gap:12px}
.type-card .tc-h .em{width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:24px; flex:none}
.type-card .tc-h b{display:block; font-size:16px; line-height:1.3}
.type-card .tc-h small{font-family:var(--serif); font-style:italic; font-size:14px}
.type-card p{font-size:13px; line-height:1.7}
.type-card .jobs-ex{font-size:12px; color:var(--muted)}
.type-card .more{font-size:12.5px; font-weight:700}
.job-list{display:grid; grid-template-columns:1fr; gap:8px; list-style:none; margin:0; padding:0}
@media (min-width:560px){ .job-list{grid-template-columns:1fr 1fr} }
.job-list li{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1.5px solid var(--line); border-radius:14px; min-width:0}
.job-list .em{font-size:20px; line-height:1.4; flex:none}
.job-list b{display:block; font-size:14px}
.job-list span{font-size:12px; color:var(--muted); line-height:1.6; display:block}
.weights{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.weights div{display:grid; grid-template-columns:9em 1fr 3em; gap:10px; align-items:center; font-size:13px}
.weights i{display:block; height:10px; border-radius:10px; background:var(--brand)}
.weights span{text-align:right; font-variant-numeric:tabular-nums; font-weight:700}
.stage{padding:16px 0; border-bottom:1px solid var(--line)}
.stage:last-child{border-bottom:0}
.stage p{font-size:14px; color:#3b3e4d; margin-top:4px}
.faq{display:flex; flex-direction:column; gap:8px}
.faq details{border:1.5px solid var(--line); border-radius:16px; padding:0 16px; background:var(--bg)}
.faq summary{cursor:pointer; list-style:none; padding:15px 28px 15px 0; font-weight:700; font-size:15px; position:relative; line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋"; position:absolute; right:0; top:15px; color:var(--brand)}
.faq details[open] summary::after{content:"−"}
.faq .ans{padding:0 0 16px; font-size:14px; color:#33374a; line-height:1.9}
.author{display:flex; gap:16px; align-items:flex-start; background:var(--paper); border-radius:20px; padding:18px}
.author .av{width:64px; height:64px; border-radius:50%; background:var(--brand-soft); display:grid; place-items:center; font-size:30px; flex:none}
.author > div{min-width:0}
.author b{font-size:17px; display:block}
.author .ttl{font-size:13px; color:var(--muted)}
.author ul{margin:10px 0 0; padding-left:1.2em; font-size:13.5px; line-height:1.8}
.author .msg{font-size:13.5px; margin-top:10px; color:#33374a}
.disc{font-size:13px; color:#3b3e4d; line-height:1.85; display:flex; flex-direction:column; gap:8px; padding-left:1.2em; margin:0}
.cta-box{background:linear-gradient(135deg, #EAF0FD, #FDF0EA); border-radius:24px; padding:24px 20px; display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.cta-box p{font-size:14px; color:#33374a}
.cta-box .btn{max-width:420px}
.updated{font-size:12px; color:var(--muted)}
.site-footer{border-top:1px solid var(--line); padding-block:28px 40px; font-size:12px; color:var(--muted)}
.site-footer .wrap{display:flex; flex-direction:column; gap:10px}
.site-footer nav{display:flex; flex-wrap:wrap; gap:6px 16px}
.site-footer a{color:var(--muted)}
.crumbs{font-size:12px; color:var(--muted); padding-block:4px 8px}
.crumbs a{color:var(--muted)}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.crumbs li+li::before{content:"›"; margin-right:6px}

/* modes */
body[data-mode="lp"] #app{display:none}
body[data-mode="quiz"] .hero, body[data-mode="quiz"] .lp, body[data-mode="quiz"] .site-footer{display:none}
body[data-mode="result"] .hero{display:none}
body[data-mode="result"] .lp .toc{display:none}

/* share buttons (site version) */
.sns{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sbtn{display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; border-radius:999px; border:1.5px solid var(--line); background:var(--bg); font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; font-family:var(--sans)}
.sbtn.x{background:#0F1419; border-color:#0F1419; color:#fff; grid-column:1 / -1}
.sbtn.line{background:#06C755; border-color:#06C755; color:#fff}
.sbtn svg{width:16px; height:16px}

/* icons / trust / resume */
.hero-main{display:flex; flex-direction:column; gap:18px}
.ic{width:22px; height:22px; flex:none}
.ict{width:44px; height:44px; border-radius:12px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:none}
.kicker{font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--brand); margin-bottom:6px}
.hero-trust{border:1px solid var(--line); border-radius:18px; padding:18px; background:var(--bg); box-shadow:0 10px 30px rgba(23,27,43,.05)}
.ht-h{display:flex; gap:8px; align-items:center; font-weight:700; font-size:15px; color:var(--ink); margin-bottom:12px}
.ht-h .ic{color:#1F8A5B}
.hero-trust ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.hero-trust li{display:flex; gap:12px; align-items:flex-start}
.hero-trust li .ict{width:36px; height:36px; border-radius:10px}
.hero-trust li .ic{width:19px; height:19px}
.hero-trust b{display:block; font-size:14px}
.hero-trust li span{font-size:12.5px; color:var(--muted); line-height:1.6; display:block}
.hero-trust .more-link{display:inline-block; margin-top:12px; font-size:13px; font-weight:700; text-decoration:none}
.trustbar{border-block:1px solid var(--line); background:#F7F8FB}
.trustbar ul{list-style:none; margin:0; padding:12px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px}
.trustbar li{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink)}
.trustbar .ic{color:var(--brand); width:20px; height:20px}
.safety-grid{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:560px){ .safety-grid{grid-template-columns:1fr 1fr} }
.safe{display:flex; flex-direction:column; gap:8px; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--bg)}
.safe p{font-size:13.5px; color:#3b3e4d; line-height:1.85}
.resume{display:flex; flex-direction:column; gap:12px; border:1.5px solid #D6E1FA; background:#F7F9FF; border-radius:16px; padding:14px 16px; max-width:560px}
.rs-item{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between}
.rs-txt{min-width:0}
.rs-txt b{display:block; font-size:14.5px}
.rs-txt span{font-size:12.5px; color:var(--muted)}
.rs-btns{display:flex; gap:8px; flex-wrap:wrap}
.btn.sm{min-height:42px; width:auto; padding:0 18px; font-size:13.5px}
.rs-note{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--muted); flex-wrap:wrap; border-top:1px solid #E3EAFB; padding-top:10px}
.rs-note svg{width:14px; height:14px; color:#1F8A5B}
.linkbtn{border:0; background:none; color:var(--brand); text-decoration:underline; padding:0; font-size:12px; cursor:pointer}
.hdr-cta{display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border-radius:999px; background:var(--ink); color:#fff; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap}
body[data-mode="quiz"] .hdr-cta{visibility:hidden}
@media (max-width:959px){ body[data-mode="quiz"] .trustbar{display:none} }
.site-nav{display:none}
.qside{display:none}
.qlayout{display:block}
.ft-grid{display:grid; grid-template-columns:1fr; gap:22px}
.ft-h{font-weight:700; color:var(--ink); font-size:12.5px; margin-bottom:8px}
.ft-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.ft-safe{display:flex; gap:6px; align-items:center; margin-top:8px}
.ft-safe .ic{width:14px; height:14px; color:#1F8A5B}
.ft-copy{border-top:1px solid var(--line); padding-top:14px; margin-top:8px}
.band{background:#F7F8FB}
.band .author{background:#fff; border:1px solid var(--line)}
.au-links{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.au-links a{display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:700; text-decoration:none; color:var(--ink); background:var(--bg)}
.lp section.band{border-top:1px solid var(--line)}

/* ===== desktop: corporate layout ===== */
@media (min-width:960px){
  body{font-size:15.5px}
  .wrap{max-width:1120px}
  .site-header{position:sticky; top:0; z-index:15; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
  .site-header .wrap{padding-block:12px}
  .site-nav{display:flex; gap:26px; font-size:13.5px; margin-left:auto; margin-right:20px}
  .site-nav a{color:#3b3e4d; font-weight:500}
  .hdr-cta{min-height:42px; padding:0 22px; border-radius:10px; background:var(--brand)}
  .hero{padding-block:64px 72px}
  .hero .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:center}
  .hero-main{display:flex; flex-direction:column; gap:22px}
  .hero h1{font-size:54px; line-height:1.25}
  .hero .def{font-size:16.5px}
  .hero .btn{border-radius:12px; max-width:420px}
  .hero-trust{padding:26px; border-radius:20px}
  .trustbar ul{grid-template-columns:repeat(4,1fr); padding:18px 0}
  .trustbar li{justify-content:center; font-size:14px}
  .lp section{padding-block:80px}
  .lp h2{font-size:32px}
  .lp .lead2{font-size:15px; margin-bottom:32px}
  .learn{grid-template-columns:repeat(3,1fr); gap:14px}
  .learn li{padding:20px; border-radius:14px; background:var(--bg); border:1px solid var(--line); flex-direction:column}
  .band .learn li{background:var(--bg)}
  .grid2c{grid-template-columns:repeat(4,1fr); gap:16px}
  #for-who .who{padding:22px; border-radius:14px}
  .safety-grid{grid-template-columns:repeat(4,1fr); gap:16px}
  .safe{padding:24px; border-radius:14px}
  .steps-list{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .steps-list li{flex-direction:column; padding:22px; border-radius:14px; background:var(--bg); border:1px solid var(--line)}
  .tbl{border-radius:14px; background:var(--bg)}
  .tbl table{font-size:14.5px}
  .tbl th,.tbl td{padding:16px 22px}
  .type-grid{grid-template-columns:repeat(3,1fr); gap:16px}
  .type-card{padding:22px; border-radius:16px}
  .job-list{grid-template-columns:repeat(3,1fr); gap:12px}
  .job-list li{background:var(--bg); border-radius:12px}
  #method .wrap{display:grid; grid-template-columns:1fr 1fr; gap:24px 56px}
  #method .kicker, #method h2, #method .lead2{grid-column:1 / -1}
  #method .lead2{margin-bottom:0}
  #method .m-col{display:flex; flex-direction:column; gap:10px}
  #stages .stage-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px}
  .faq{max-width:880px}
  .faq details{border-radius:12px}
  .author{padding:28px; border-radius:16px; max-width:880px}
  .cta-box{padding:48px; border-radius:20px; align-items:center; text-align:center}
  .toc{max-width:880px}
  .ft-grid{grid-template-columns:2fr 1fr 1fr; gap:48px}
  .site-footer{padding-block:48px 40px; background:#F7F8FB}
  /* quiz */
  body[data-mode="quiz"] #app, body[data-mode="result"] #app{max-width:1000px; padding-block:40px 64px}
  body[data-mode="quiz"] .qlayout{display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start}
  .qside{display:block; position:sticky; top:96px; border:1px solid var(--line); border-radius:16px; padding:20px}
  .qside-h{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--muted); margin-bottom:12px}
  .qside ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
  .qside li{display:flex; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:10px; font-size:13.5px; color:var(--muted)}
  .qside li em{font-style:normal; font-variant-numeric:tabular-nums; font-size:12px}
  .qside li.cur{background:var(--brand-soft); color:var(--brand); font-weight:700}
  .qside li.done:not(.cur){color:var(--ink)}
  .qside li.done em::after{content:" ✓"; color:#1F8A5B}
  .qside-note{display:flex; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); line-height:1.7}
  .qside-note svg{width:16px; height:16px; flex:none; color:#1F8A5B; margin-top:2px}
  .qmain{border:1px solid var(--line); border-radius:20px; padding:32px 40px 40px; box-shadow:0 10px 30px rgba(23,27,43,.04); max-width:640px}
  .qmain .qbody{margin-top:26px}
  body[data-mode="result"] .result{max-width:760px; margin:0 auto}
}

/* type page */
.t-main{max-width:860px}
.t-hero{border-radius:28px; padding:26px 22px; position:relative; overflow:hidden}
.t-hero .badge{position:absolute; right:20px; top:20px; width:76px; height:76px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:40px; box-shadow:0 6px 20px rgba(23,27,43,.08)}
.t-hero .en{font-family:var(--serif); font-style:italic; font-size:30px; line-height:1.15}
.t-hero h1{font-size:clamp(25px,6.6vw,34px); font-weight:900; padding-right:84px; line-height:1.4}
.t-hero .tag{font-weight:700; margin-top:10px}
.t-hero .def{font-size:14.5px; margin-top:8px; color:#33374a; line-height:1.9}
.t-body section{padding-block:28px; border-top:1px solid var(--line)}
.t-body section:first-child{border-top:0}
.t-body h2{font-size:20px; font-weight:900; margin-bottom:14px}
.t-radar{display:flex; justify-content:center}
.t-radar svg{width:100%; max-width:320px; height:auto}
.dot-list{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:6px; font-size:14.5px; line-height:1.8}
.other-types{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (min-width:560px){ .other-types{grid-template-columns:repeat(3,1fr)} }
.other-types a{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; background:var(--paper); text-decoration:none; color:var(--ink); font-size:13px; font-weight:700; min-width:0}