/* Njob Job Detail — page styles (design reference: design_handoff_njob_website) */
/* header */
  .job-head{padding:36px 0 56px; border-bottom:1px solid var(--line);}
  .crumb{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--ink-mute); flex-wrap:wrap;}
  .crumb a:hover{color:var(--ink);}
  .back{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink-2);
    padding:8px 14px 8px 11px; border:1.5px solid var(--line-2); border-radius:999px;}
  .back:hover{background:var(--card);}
  .head-grid{margin-top:44px; display:grid; grid-template-columns:1fr 400px; gap:60px; align-items:end;}
  .status-wrap{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .status{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--amber-deep);
    background:var(--amber-wash); padding:8px 14px; border-radius:999px;}
  .status .sq{width:6px; height:6px; background:var(--amber); border-radius:2px;}
  .status-wrap .num{font-size:12.5px; font-weight:600; color:var(--ink-mute);}
  h1.job-title{margin-top:22px; font-size:74px; line-height:1.05; font-weight:900; letter-spacing:-0.048em; word-break:keep-all;}
  .job-lede{margin-top:22px; font-size:20px; line-height:1.65; color:var(--ink-2); max-width:720px; word-break:keep-all; text-wrap:pretty;}
  .head-media{border-radius:22px; overflow:hidden; background:var(--panel); padding:20px; border:1px solid rgba(30,29,28,.06);}
  .head-media img{border-radius:12px; width:100%;}

  .facts{margin-top:52px; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line);}
  .fact{padding:22px 22px 4px 0; border-right:1px solid var(--line); margin-right:22px;}
  .fact:last-child{border-right:none; margin-right:0;}
  .fact .k{font-size:12.5px; font-weight:600; color:var(--ink-mute);}
  .fact .v{margin-top:6px; font-size:19px; font-weight:800; letter-spacing:-0.03em;}

  /* body */
  .job-body{padding:76px 0 112px;}
  .body-grid{display:grid; grid-template-columns:1fr 360px; gap:88px; align-items:start;}
  .block{padding:0 0 52px; margin-bottom:52px; border-bottom:1px solid var(--line);}
  .block:last-child{border-bottom:none; margin-bottom:0;}
  .block-label{font-size:13px; font-weight:700; color:var(--amber-deep); display:flex; align-items:center; gap:8px;}
  .block-label::before{content:""; width:24px; height:2px; background:var(--amber);}
  .block h2{margin-top:14px; font-size:37px; line-height:1.15; font-weight:800; letter-spacing:-0.038em; word-break:keep-all; text-wrap:balance;}
  .block p.lead{margin-top:18px; font-size:16.5px; line-height:1.8; color:var(--ink-2); max-width:740px; word-break:keep-all;}
  .block p.lead + p.lead{margin-top:13px;}
  .block p.lead b{color:var(--ink); font-weight:700;}

  ol.items{list-style:none; margin-top:28px; counter-reset:it;}
  ol.items li{counter-increment:it; display:grid; grid-template-columns:52px 1fr; gap:8px; padding:19px 0;
    border-top:1px solid var(--line); font-size:16.5px; line-height:1.65; font-weight:600; word-break:keep-all;}
  ol.items li:last-child{border-bottom:1px solid var(--line);}
  ol.items li::before{content:counter(it, decimal-leading-zero); font-family:ui-monospace,"SF Mono",Menlo,monospace;
    font-size:12.5px; font-weight:700; color:var(--amber-deep); padding-top:4px;}
  ol.items li span{display:block; margin-top:4px; font-size:14.5px; font-weight:500; color:var(--ink-2);}

  .two-col{margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .req-card{background:var(--card); border-radius:22px; padding:28px 26px 30px; border:1px solid rgba(30,29,28,.05);}
  .req-card.plus{background:var(--ink); color:#fff;}
  .req-card .hd{display:flex; justify-content:space-between; align-items:center;}
  .req-card h3{font-size:20px; font-weight:800; letter-spacing:-0.03em;}
  .req-card .tagl{font-size:11.5px; font-weight:800; padding:6px 10px; border-radius:999px; background:var(--bg-2); color:var(--ink-2);}
  .req-card.plus .tagl{background:var(--amber); color:#fff;}
  .req-card ul{list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:13px;}
  .req-card li{display:grid; grid-template-columns:16px 1fr; gap:10px; font-size:15px; line-height:1.65; color:var(--ink-2); word-break:keep-all;}
  .req-card.plus li{color:rgba(255,255,255,.82);}
  .req-card li::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--amber); margin-top:9px;}
  .req-card.plus li::before{background:var(--amber);}

  .stack{margin-top:24px; display:flex; flex-wrap:wrap; gap:8px;}
  .stack span{font-size:13.5px; font-weight:600; color:var(--ink-2); background:var(--card); padding:9px 14px;
    border-radius:999px; border:1px solid var(--line);}

  .quote{margin-top:28px; padding:26px 28px; background:var(--card); border-radius:22px; border-left:4px solid var(--amber);
    display:flex; gap:16px; align-items:flex-start;}
  .quote .qt{font-size:16.5px; line-height:1.65; word-break:keep-all;}
  .quote .qt b{font-weight:800;}
  .quote .who{display:block; margin-top:10px; font-size:13px; color:var(--ink-mute); font-weight:600;}

  .week{margin-top:28px; display:grid; grid-template-columns:repeat(5,1fr); border-top:2px solid var(--ink);}
  .day{padding:18px 16px 22px 0; border-right:1px solid var(--line); margin-right:16px;}
  .day:last-child{border-right:none; margin-right:0;}
  .day .d{font-size:12.5px; font-weight:700; color:var(--amber-deep);}
  .day .t{margin-top:11px; font-size:14.5px; font-weight:700; line-height:1.45; word-break:keep-all;}
  .day .s{margin-top:5px; font-size:12.5px; color:var(--ink-mute); line-height:1.5; word-break:keep-all;}

  .proc{margin-top:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
  .proc div{background:var(--card); border-radius:18px; padding:20px 18px; border:1px solid rgba(30,29,28,.05);}
  .proc .n{font-size:11.5px; font-weight:700; color:var(--amber-deep);}
  .proc h4{margin-top:20px; font-size:16.5px; font-weight:800; letter-spacing:-0.03em; word-break:keep-all;}
  .proc p{margin-top:6px; font-size:12.5px; color:var(--ink-mute); font-weight:600;}

  .notice{margin-top:26px; font-size:13.5px; line-height:1.9; color:var(--ink-mute); list-style:none;}
  .notice li::before{content:"· "; }

  .ref{margin-top:24px; background:var(--bg-2); border-radius:18px; padding:24px 26px;}
  .ref .k{font-size:12.5px; font-weight:700; color:var(--ink-mute);}
  .ref .row{display:flex; gap:28px; margin-top:14px; flex-wrap:wrap;}
  .ref .r .n{font-size:26px; font-weight:800; letter-spacing:-0.04em; line-height:1;}
  .ref .r .c{margin-top:6px; font-size:12.5px; color:var(--ink-2);}

  /* sidebar */
  aside.side{position:sticky; top:102px; display:flex; flex-direction:column; gap:14px;}
  .side-card{background:var(--ink); color:#fff; border-radius:24px; padding:28px;}
  .side-card .k{font-size:12px; font-weight:700; color:var(--amber);}
  .side-card h3{margin-top:10px; font-size:24px; font-weight:800; letter-spacing:-0.035em; line-height:1.2;}
  .side-card dl{margin-top:20px; display:grid; grid-template-columns:70px 1fr; row-gap:11px; font-size:13.5px;
    padding-top:18px; border-top:1px solid rgba(255,255,255,.14);}
  .side-card dt{color:rgba(255,255,255,.5); font-weight:600;}
  .side-card dd{color:rgba(255,255,255,.92); font-weight:600;}
  .apply-btn{margin-top:22px; display:flex; align-items:center; justify-content:space-between; width:100%;
    background:var(--amber); color:#fff; padding:17px 20px; border-radius:13px; font-size:15.5px; font-weight:800; transition:transform .15s;}
  .apply-btn:hover{transform:translateY(-1px);}
  .apply-btn .arr{transition:transform .2s;}
  .apply-btn:hover .arr{transform:translateX(3px);}
  .side-row{display:flex; gap:8px; margin-top:10px;}
  .side-row button{flex:1; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.85); font-size:13.5px; font-weight:700;}
  .side-row button:hover{background:rgba(255,255,255,.06);}
  .side-row button.on{color:var(--amber); border-color:rgba(237,141,9,.45);}
  .side-mini{background:var(--card); border-radius:20px; padding:22px; border:1px solid rgba(30,29,28,.05);}
  .side-mini .k{font-size:12px; font-weight:700; color:var(--ink-mute);}
  .side-mini p{margin-top:8px; font-size:13.5px; line-height:1.65; color:var(--ink-2);}
  .side-mini p b{color:var(--ink); font-weight:800;}
  .toc{list-style:none; margin-top:10px;}
  .toc a{display:flex; justify-content:space-between; padding:9px 0; font-size:13.5px; font-weight:600;
    color:var(--ink-2); border-top:1px solid var(--line);}
  .toc li:first-child a{border-top:none;}
  .toc a.on{color:var(--amber-deep); font-weight:800;}
  .toc a.on::after{content:"●"; font-size:8px; align-self:center;}

  /* apply form */
  .apply{background:var(--bg-2); padding:112px 0;}
  .apply-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:88px; align-items:start;}
  .apply h2{margin-top:15px; font-size:50px; line-height:1.1; font-weight:800; letter-spacing:-0.04em; word-break:keep-all;}
  .apply .side-p{margin-top:18px; font-size:16.5px; line-height:1.75; color:var(--ink-2); max-width:420px; word-break:keep-all;}
  .apply .contact{margin-top:30px; padding-top:22px; border-top:1px solid var(--line-2); font-size:13.5px; color:var(--ink-mute); line-height:1.85;}
  .apply .contact b{color:var(--ink); font-weight:700;}
  form.f{background:var(--card); border-radius:26px; padding:38px; border:1px solid rgba(30,29,28,.05);}
  .f .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .fld{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
  .fld label{font-size:13.5px; font-weight:700;}
  .fld label i{font-style:normal; color:var(--amber);}
  .fld label small{font-weight:500; color:var(--ink-mute); margin-left:6px;}
  .fld input,.fld textarea{background:var(--bg); border:1.5px solid transparent; border-radius:12px; padding:14px 16px;
    font-size:15px; font-weight:500; outline:none; transition:border-color .15s, background .15s; width:100%;}
  .fld input::placeholder,.fld textarea::placeholder{color:var(--placeholder);}
  .fld input:focus,.fld textarea:focus{border-color:var(--ink); background:#fff;}
  .fld.err input,.fld.err textarea{border-color:var(--error);}
  .fld .em{font-size:12px; color:var(--error); font-weight:600; display:none;}
  .fld.err .em{display:block;}
  .fld textarea{min-height:118px; resize:vertical; line-height:1.6;}
  .drop{border:1.5px dashed var(--line-2); border-radius:14px; padding:20px; display:flex; align-items:center;
    justify-content:space-between; gap:16px; background:var(--bg); cursor:pointer; transition:border-color .15s;}
  .drop:hover{border-color:var(--ink);}
  .drop .t{font-size:14.5px; font-weight:700;}
  .drop .s{font-size:12.5px; color:var(--ink-mute); margin-top:2px;}
  .drop .b{font-size:12.5px; font-weight:700; padding:9px 14px; border-radius:10px; background:var(--ink); color:#fff; white-space:nowrap;}
  .drop.has{border-style:solid; border-color:var(--amber); background:var(--amber-wash);}
  .chk{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); line-height:1.6; margin:6px 0 22px; cursor:pointer;}
  .chk input{width:18px; height:18px; accent-color:var(--amber); margin-top:2px; flex:0 0 18px;}
  .chk.err{color:var(--error);}
  .submit{display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--ink); color:#fff;
    padding:19px 24px; border-radius:13px; font-size:16.5px; font-weight:800;}
  .submit:hover .arr{transform:translateX(3px);}
  .submit .arr{transition:transform .2s;}
  .done-box{display:none;}
  .done-box .ok{width:54px; height:54px; border-radius:16px; background:var(--amber); color:#fff; display:grid; place-items:center; font-size:24px; font-weight:900;}
  .done-box h3{margin-top:26px; font-size:33px; font-weight:800; letter-spacing:-0.04em; line-height:1.2;}
  .done-box p{margin-top:13px; font-size:15.5px; color:var(--ink-2); line-height:1.7;}
  .done-box .ticket{margin-top:24px; background:var(--bg-2); border-radius:16px; padding:20px 22px;
    display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .done-box .ticket .k{font-size:12.5px; font-weight:700; color:var(--ink-mute);}
  .done-box .ticket .v{margin-top:6px; font-size:22px; font-weight:800; letter-spacing:-0.02em;}
  .done-box .tl{margin-top:26px; border-top:1px solid var(--line); list-style:none;}
  .done-box .tl li{display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line);
    font-size:14.5px; font-weight:600;}
  .done-box .tl li span{color:var(--ink-mute);}
  .done-box .tl li.cur{color:var(--amber-deep);}
  .done-box .tl li.cur span{color:var(--amber-deep); font-weight:800;}
  form.f.sent .form-inner{display:none;}
  form.f.sent .done-box{display:block;}

  .others{background:var(--ink); color:#fff; padding:96px 0;}
  .others .hd{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; gap:24px; flex-wrap:wrap;}
  .others .lbl{font-size:13px; font-weight:700; color:var(--amber); display:flex; align-items:center; gap:8px;}
  .others .lbl::before{content:""; width:24px; height:2px; background:var(--amber);}
  .others h2{margin-top:14px; font-size:40px; font-weight:800; letter-spacing:-0.04em;}
  .others .all{color:var(--amber); font-weight:700; border-bottom:1.5px solid var(--amber); padding-bottom:2px; font-size:14.5px;}
  .o-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .o-card{display:flex; flex-direction:column; justify-content:space-between; min-height:212px; padding:28px;
    border-radius:24px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    transition:background .2s, transform .2s;}
  .o-card:hover{background:rgba(255,255,255,.09); transform:translateY(-2px);}
  .o-card .top{display:flex; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.5); font-weight:600;}
  .o-card h3{margin-top:26px; font-size:27px; font-weight:800; letter-spacing:-0.035em;}
  .o-card .sub{margin-top:6px; font-size:14.5px; color:rgba(255,255,255,.62);}
  .o-card .ft{margin-top:26px; display:flex; justify-content:space-between; align-items:center;}
  .o-card .type{font-size:12.5px; font-weight:700; background:rgba(237,141,9,.16); color:var(--amber); padding:6px 10px; border-radius:8px;}
  .o-card .go{width:42px; height:42px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; font-weight:800;}
  .o-card:hover .go{background:var(--amber); color:#fff;}


  .toast{position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); background:var(--ink); color:#fff;
    padding:14px 20px; border-radius:999px; font-size:13.5px; font-weight:700; opacity:0; transition:all .25s; pointer-events:none; z-index:100;}
  .toast.show{opacity:1; transform:translate(-50%,0);}