/* ════════════════════════════════════════════════════════════════════════
   journey-onboarding.css — first-run flow (Phase F port of onboarding.html).
   Scoped under #kjOnb (full-screen overlay inside the .kj root). Production
   layout: no mockup phone bezel — fills the viewport.
   和の感性 floor: gold is scarce — the ONLY gold here is the once-ever
   handoff "your path is ready" seal (the onboarding equivalent of the recovery
   seal); selection state is moss; romaji on every Japanese token.
   ════════════════════════════════════════════════════════════════════════ */
#kjOnb{
  --card:#FAFAF7; --paper:#F0EDE8; --romaji:#6B635C; --side:22px;
  --shadow-card:0 2px 6px rgba(28,22,14,.06), 0 18px 44px rgba(28,22,14,.16);
  position:fixed; inset:0; z-index:110; background:var(--paper); color:var(--ink); font-family:var(--font-ui);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
#kjOnb.on{opacity:1; pointer-events:auto;}

#kjOnb .step{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; background:var(--paper); opacity:0; transition:opacity .3s var(--ease);}
#kjOnb .step::-webkit-scrollbar{display:none;}
#kjOnb .step.is-in{opacity:1;}
#kjOnb .step[hidden]{display:none;}
#kjOnb .step-body{flex:1 0 auto; padding:0 var(--side);}
#kjOnb .step--q .step-body{padding-top:calc(env(safe-area-inset-top,0px) + 78px);}
#kjOnb .back{position:absolute; top:calc(env(safe-area-inset-top,0px) + 34px); left:14px; z-index:40; width:40px; height:40px; cursor:pointer; color:var(--stone); display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .15s;}
#kjOnb .back:active{background:rgba(44,44,44,.06);}

#kjOnb .kicker{font-size:10.5px; letter-spacing:2.4px; text-transform:uppercase; font-weight:700; color:var(--faint); margin-bottom:10px;}
#kjOnb .prompt{font-family:var(--font-jp); font-size:25px; font-weight:600; color:var(--ink); line-height:1.32; margin-bottom:5px; letter-spacing:.01em;}
#kjOnb .prompt-rm{font-size:12px; font-weight:500; color:var(--romaji); letter-spacing:.3px; margin-bottom:3px;}
#kjOnb .prompt-en{font-size:14px; color:var(--stone); font-weight:500;}
#kjOnb .helper{font-size:12.5px; color:var(--faint); line-height:1.55; margin-top:14px;}
#kjOnb .helper--count{margin-top:16px; font-weight:600; color:var(--stone); font-variant-numeric:tabular-nums;}

/* hero */
#kjOnb .step--hero{align-items:stretch; position:relative;}
#kjOnb .step--hero .step-body{display:flex; flex-direction:column; padding-left:0; padding-right:0;}
#kjOnb .hero-bg{position:absolute; top:0; left:0; right:0; height:44%; z-index:0; pointer-events:none; background-size:cover; background-position:center; filter:blur(11px) saturate(1.06); transform:scale(1.18); opacity:0; transition:opacity .55s var(--ease);}
#kjOnb .hero-bg.show{opacity:.4;}
#kjOnb .hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(240,237,232,.5) 0%, rgba(240,237,232,.82) 52%, var(--paper) 100%);}
#kjOnb .hero-top{position:relative; z-index:2; padding:calc(env(safe-area-inset-top,0px) + 40px) var(--side) 0; text-align:center;}
#kjOnb .hanko{width:78px; height:78px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 14px; box-shadow:0 3px 14px rgba(20,16,10,.18);}
#kjOnb .brand-name{font-family:var(--font-jp); font-size:34px; font-weight:600; color:var(--ink); letter-spacing:.02em;}
#kjOnb .brand-name span{display:block; font-family:var(--font-ui); font-size:10px; letter-spacing:3.4px; font-weight:600; text-transform:uppercase; color:var(--faint); margin-top:2px;}
#kjOnb .brand-tag{font-size:13px; color:var(--faint); margin-top:12px; font-weight:500;}
#kjOnb .hwrap{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; margin:14px 0 0;}
#kjOnb .hcarousel{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 11% 16px; -webkit-overflow-scrolling:touch;}
#kjOnb .hcarousel::-webkit-scrollbar{display:none;}
#kjOnb .hcard{flex:0 0 78%; aspect-ratio:3/4; border-radius:var(--radius-xl); position:relative; overflow:hidden; background:var(--card); box-shadow:var(--shadow-card); scroll-snap-align:center; cursor:pointer; transform:scale(.92); opacity:.5; transition:transform .4s var(--ease), opacity .4s var(--ease);}
#kjOnb .hcard.is-active{transform:scale(1); opacity:1;}
#kjOnb .hcard .face{position:absolute; inset:0; transition:opacity .35s var(--ease);}
#kjOnb .hcard .photo{position:absolute; inset:0; background-size:cover; background-position:center; background-color:#cdc4b4;}
#kjOnb .hcard .tint{position:absolute; inset:0; background:linear-gradient(to top, rgba(18,13,8,.82) 0%, rgba(22,16,10,.34) 34%, rgba(30,22,14,0) 60%);}
#kjOnb .hcard .en{position:absolute; left:16px; right:16px; bottom:16px; color:#fff; font-size:18px; font-weight:600; text-shadow:0 1px 6px rgba(8,5,3,.6); letter-spacing:.01em;}
#kjOnb .hcard .back-face{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; opacity:0; pointer-events:none;}
#kjOnb .hcard .back-face .photo-dim{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.7) brightness(.4);}
#kjOnb .hcard .back-face .jp{position:relative; font-family:var(--font-jp); font-size:38px; font-weight:600; color:#fff; text-shadow:0 2px 10px rgba(8,5,3,.7);}
#kjOnb .hcard .back-face .rd{position:relative; font-size:14px; color:rgba(255,255,255,.9); font-weight:500;}
#kjOnb .hcard .back-face .rm{position:relative; font-size:11.5px; color:rgba(255,255,255,.7); letter-spacing:.4px;}
#kjOnb .hcard .back-face .en2{position:relative; margin-top:8px; font-size:13px; color:rgba(255,255,255,.85); font-weight:500;}
#kjOnb .hcard.flipped .front-face{opacity:0;}
#kjOnb .hcard.flipped .back-face{opacity:1; pointer-events:auto;}
#kjOnb .hdots{display:flex; justify-content:center; gap:6px; margin:2px 0 0;}
#kjOnb .hdots span{width:5px; height:5px; border-radius:50%; background:rgba(110,104,96,.28); transition:width .2s var(--ease), background .2s var(--ease);}
#kjOnb .hdots span.on{background:var(--accent); width:13px; border-radius:3px;}
#kjOnb .hero-hint{text-align:center; color:var(--faint); font-size:12px; margin-top:14px; letter-spacing:.04em;}
#kjOnb .hero-promise{position:relative; z-index:2; text-align:center; margin:6px 0 0; padding:0 var(--side);}
#kjOnb .hero-promise .hp-line{display:block; font-family:var(--font-ui); font-size:15px; font-weight:500; color:var(--stone); letter-spacing:.01em;}
#kjOnb .hero-promise .hp-stat{display:block; margin-top:6px; font-size:10.5px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); font-variant-numeric:tabular-nums;}

/* footer / btn */
#kjOnb .step-foot{position:sticky; bottom:0; flex-shrink:0; padding:14px var(--side) calc(20px + env(safe-area-inset-bottom,0px)); background:linear-gradient(to top, var(--paper) 62%, rgba(240,237,232,0)); display:flex; justify-content:flex-end; gap:12px; z-index:30;}
#kjOnb .step-foot--center{justify-content:center;}
#kjOnb .btn{font-family:inherit; font-size:15px; font-weight:600; padding:13px 26px; border-radius:var(--radius-full); cursor:pointer; border:0; transition:transform .18s var(--ease), background .15s, opacity .15s; letter-spacing:.01em;}
#kjOnb .btn:disabled{opacity:.34; cursor:not-allowed;}
#kjOnb .btn:not(:disabled):active{transform:scale(.97);}
#kjOnb .btn--solid{background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(61,90,128,.28);}
#kjOnb .btn--block{flex:1; padding:15px 26px; font-size:16px;}
#kjOnb .btn--arrow::after{content:"  →"; font-weight:500;}

/* junction */
#kjOnb .junction{display:flex; flex-direction:column; gap:12px; margin-top:26px;}
#kjOnb .jcard{position:relative; display:block; width:100%; text-align:left; background:var(--card); border-radius:var(--radius-lg); padding:20px 20px 20px 26px; cursor:pointer; box-shadow:var(--shadow-rest); transition:transform .18s var(--ease), box-shadow .18s;}
#kjOnb .jcard::before{content:""; position:absolute; left:12px; top:20px; bottom:20px; width:2.5px; border-radius:3px; background:var(--rail,var(--divider)); transition:width .18s;}
#kjOnb .jcard[data-spine="textbook"]{--rail:var(--accent);}
#kjOnb .jcard[data-spine="custom"]{--rail:var(--moss);}
#kjOnb .jcard[data-spine="balanced"]{--rail:var(--accent);}
#kjOnb .jcard:active{transform:scale(.99);}
#kjOnb .jcard.is-on{background:#F1F3EC; box-shadow:inset 0 0 0 1.5px var(--moss), var(--shadow-rest);}
#kjOnb .jcard.is-on::before{width:3.5px;}
#kjOnb .jcard .jtitle{display:flex; align-items:baseline; gap:9px; font-size:17px; font-weight:600; color:var(--ink); margin-bottom:5px;}
#kjOnb .jcard .jtitle .jp{font-family:var(--font-jp); font-size:14px; font-weight:600; color:var(--stone);}
#kjOnb .jcard .jtitle .jp .jrom{font-family:var(--font-ui); font-size:10px; font-weight:500; color:var(--faint); letter-spacing:.2px; margin-left:5px;}
#kjOnb .jcard .jdesc{font-size:13px; color:var(--stone); line-height:1.5;}

/* textbook pills */
#kjOnb .group{display:flex; flex-direction:column; gap:10px; margin-top:24px;}
#kjOnb .tbpill{position:relative; display:flex; align-items:center; gap:15px; width:100%; text-align:left; background:var(--card); border:1px solid var(--divider); border-radius:var(--radius-lg); padding:16px 18px; cursor:pointer; transition:transform .15s var(--ease), box-shadow .15s, border-color .15s;}
#kjOnb .tbpill:active{transform:scale(.99);}
#kjOnb .tbpill.is-on{background:#F1F3EC; border-color:transparent; box-shadow:inset 0 0 0 1.5px var(--moss);}
#kjOnb .tbpill .tbicon{flex-shrink:0; width:42px; height:52px; border-radius:5px; background:linear-gradient(135deg,#c9b896,#a98f63); box-shadow:0 2px 6px rgba(20,16,10,.22), inset 0 0 0 1px rgba(255,255,255,.25); position:relative;}
#kjOnb .tbpill .tbicon::after{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:rgba(255,255,255,.4); border-radius:2px;}
#kjOnb .tbpill .tbtext{flex:1; min-width:0;}
#kjOnb .tbpill .tbname{font-size:15px; font-weight:600; color:var(--ink); display:flex; align-items:baseline; gap:8px;}
#kjOnb .tbpill .tbname .tbjp{font-family:var(--font-jp); font-size:12.5px; color:var(--faint); font-weight:500;}
#kjOnb .tbpill .tbmeta{font-size:12px; color:var(--stone); margin-top:3px; font-variant-numeric:tabular-nums;}
#kjOnb .tbpill .tbcheck{flex-shrink:0; width:22px; height:22px; opacity:0; transition:opacity .15s; color:var(--moss);}
#kjOnb .tbpill.is-on .tbcheck{opacity:1;}

/* topic tiles */
#kjOnb .tgrid{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:22px;}
#kjOnb .ttile{position:relative; cursor:pointer; background:transparent; padding:0; text-align:left;}
#kjOnb .ttile .tpic{display:block; position:relative; width:100%; aspect-ratio:5/3; border-radius:var(--radius-lg); overflow:hidden; background-size:cover; background-position:center; background-color:#cdc4b4; box-shadow:var(--shadow-sm,0 1px 3px rgba(44,44,44,.05)); transition:box-shadow .22s var(--ease), transform .15s var(--ease);}
#kjOnb .ttile:active .tpic{transform:scale(.98);}
#kjOnb .ttile.is-on .tpic{box-shadow:inset 0 0 0 2.5px var(--moss), 0 4px 14px rgba(28,22,14,.18);}
#kjOnb .ttile .tcheck{position:absolute; top:8px; right:8px; width:21px; height:21px; border-radius:50%; background:var(--moss); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(8,5,3,.34); opacity:0; transform:scale(.5); transition:opacity .2s var(--ease), transform .24s var(--ease);}
#kjOnb .ttile.is-on .tcheck{opacity:1; transform:scale(1);}
#kjOnb .ttile .tcap{padding:7px 2px 0;}
#kjOnb .ttile .tlabel{font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
#kjOnb .ttile .tjp{display:block; font-family:var(--font-jp); font-size:10.5px; font-weight:500; color:var(--faint); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#kjOnb .ttile .tcount{display:block; font-size:10px; color:var(--faint); font-weight:500; font-variant-numeric:tabular-nums; margin-top:2px;}

/* display preference */
#kjOnb .sample{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; margin:24px 0 26px; min-height:118px; padding:22px; background:var(--card); border-radius:var(--radius-lg); border:1px solid var(--divider);}
#kjOnb .sample .s-rd{font-family:'Noto Sans JP',sans-serif; font-size:14px; color:var(--faint); font-weight:500; letter-spacing:.04em; min-height:20px;}
#kjOnb .sample .s-jp{font-family:var(--font-jp); font-size:52px; font-weight:400; color:var(--ink); line-height:1.05;}
#kjOnb .sample .s-rm{font-size:13px; color:var(--romaji); font-weight:500; letter-spacing:.5px; margin-top:6px;}
#kjOnb .dispgroup{display:flex; flex-direction:column; gap:9px;}
#kjOnb .dpill{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; background:var(--card); border:1px solid var(--divider); border-radius:var(--radius-lg); padding:15px 18px; cursor:pointer; transition:transform .15s var(--ease), box-shadow .15s, border-color .15s;}
#kjOnb .dpill:active{transform:scale(.99);}
#kjOnb .dpill.is-on{background:#F1F3EC; border-color:transparent; box-shadow:inset 0 0 0 1.5px var(--moss);}
#kjOnb .dpill .dlabel{display:block; font-size:15px; font-weight:600; color:var(--ink);}
#kjOnb .dpill .ddesc{display:block; font-size:12px; color:var(--stone); margin-top:3px; line-height:1.4;}
#kjOnb .dpill .dtag{flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}

/* handoff — gold seal is the once-ever ceremony (scarce, earned) */
#kjOnb .step--handoff{align-items:stretch;}
#kjOnb .handoff-body{flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:64px var(--side) 0;}
#kjOnb .handoff-seal{width:66px; height:66px; border-radius:50%; background:transparent; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
#kjOnb .handoff-seal span{font-family:var(--font-jp); font-size:30px; color:var(--gold);}
#kjOnb .handoff-eyebrow{font-size:10.5px; letter-spacing:2.4px; text-transform:uppercase; font-weight:700; color:var(--faint); margin-bottom:8px;}
#kjOnb .handoff-title{font-family:var(--font-jp); font-size:26px; font-weight:600; color:var(--ink); line-height:1.32; margin-bottom:6px;}
#kjOnb .handoff-rm{font-size:12.5px; color:var(--romaji); margin-bottom:18px; letter-spacing:.3px;}
#kjOnb .summary{width:100%; background:var(--card); border:1px solid var(--divider); border-radius:var(--radius-lg); padding:6px 18px; margin-top:6px;}
#kjOnb .srow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--divider); text-align:left;}
#kjOnb .srow:last-child{border-bottom:0;}
#kjOnb .srow .sk{font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); font-weight:700;}
#kjOnb .srow .sv{font-size:14px; color:var(--ink); font-weight:600; text-align:right;}

@media (prefers-reduced-motion: reduce){
  #kjOnb *, #kjOnb *::before, #kjOnb *::after{transition-duration:.001ms !important; animation-duration:.001ms !important;}
  #kjOnb .step{opacity:1;}
}