/* Njob Inquiry — page styles (design reference: design_handoff_njob_website) */
/* ---- 문의 폼 ---- */
  .inq{background:var(--bg-2); padding:96px 0 112px;}
  .inq-grid{display:grid; grid-template-columns:1fr 1.45fr; gap:80px; align-items:start;}
  .inq h2{margin-top:15px; font-size:46px; line-height:1.1; font-weight:800;
    letter-spacing:-0.042em; word-break:keep-all;}
  .inq .side-p{margin-top:20px; font-size:16.5px; line-height:1.75; color:var(--ink-2);
    max-width:400px; word-break:keep-all;}
  .inq .side-p b{color:var(--ink); font-weight:700;}

  .route{margin-top:32px; border-top:1px solid var(--line-2);}
  .rt{display:grid; grid-template-columns:104px 1fr; gap:18px; padding:17px 0;
    border-bottom:1px solid var(--line-2); align-items:start;}
  .rt dt{font-size:13px; font-weight:700; color:var(--ink-mute); padding-top:2px;}
  .rt dd{font-size:14.5px; font-weight:700; line-height:1.6; word-break:keep-all;}
  .rt dd span{display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:var(--ink-mute);}
  .rt dd a{border-bottom:1px solid var(--line-2);}
  .rt dd a:hover{color:var(--amber-deep); border-color:var(--amber);}

  .resp{margin-top:30px; background:var(--surface); border-radius:20px; padding:24px;
    border:1px solid rgba(30,29,28,.05);}
  .resp .k{font-size:12.5px; font-weight:800; color:var(--amber-deep);}
  .resp p{margin-top:9px; font-size:14.5px; line-height:1.7; color:var(--ink-2); word-break:keep-all;}
  .resp p b{color:var(--ink); font-weight:800;}

  form.f{background:var(--surface); border-radius:26px; padding:38px; border:1px solid rgba(30,29,28,.05);}
  .fld{display:flex; flex-direction:column; gap:9px; margin-bottom:20px;}
  .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[type=text],.fld input[type=email],.fld input[type=tel],.fld textarea{
    background:var(--bg); border:1.5px solid transparent; border-radius:12px; padding:14px 16px;
    font-size:15px; font-weight:500; outline:none; width:100%;
    transition:border-color .15s, background .15s;}
  .fld input::placeholder,.fld textarea::placeholder{color:var(--placeholder);}
  .fld input:focus,.fld textarea:focus{border-color:var(--ink); background:#fff;}
  .fld textarea{min-height:168px; resize:vertical; line-height:1.7;}
  .fld.err input,.fld.err textarea{border-color:var(--error);}
  .fld .em{display:none; font-size:12px; font-weight:600; color:var(--error);}
  .fld.err .em{display:block;}
  .fld .hint{font-size:12.5px; color:var(--ink-mute); font-weight:500;}

  /* 유형 선택 */
  .types{display:grid; grid-template-columns:repeat(2,1fr); gap:9px;}
  .type-lb{display:flex; gap:11px; align-items:flex-start; padding:14px 15px; border-radius:13px;
    background:var(--bg); border:1.5px solid transparent; cursor:pointer; transition:border-color .16s, background .16s;}
  .type-lb:hover{border-color:var(--line-2);}
  .type-lb input{appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:0 0 18px;
    margin-top:2px; border-radius:50%; border:1.5px solid var(--line-2); background:#fff;
    transition:border-color .15s, box-shadow .15s;}
  .type-lb input:checked{border-color:var(--amber); box-shadow:inset 0 0 0 4.5px var(--amber);}
  .type-lb.sel{border-color:var(--amber); background:var(--amber-wash);}
  .type-lb .tx{font-size:14px; font-weight:700; letter-spacing:-0.022em;}
  .type-lb .ts{display:block; margin-top:4px; font-size:12.5px; font-weight:500; color:var(--ink-mute);
    line-height:1.5; word-break:keep-all;}

  .f .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

  .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, background .15s;}
  .drop:hover{border-color:var(--ink);}
  .drop .t{font-size:14.5px; font-weight:700;}
  .drop .s{margin-top:3px; font-size:12.5px; color:var(--ink-mute);}
  .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; line-height:1.62;
    color:var(--ink-2); margin:8px 0 24px; cursor:pointer;}
  .chk input{width:18px; height:18px; flex:0 0 18px; margin-top:2px; accent-color:var(--amber);}
  .chk b{color:var(--ink);}
  .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; transition:background .18s;}
  .submit:hover{background:var(--amber);}
  .submit .arr{transition:transform .2s;}
  .submit:hover .arr{transform:translateX(3px);}

  /* 접수 완료 */
  .done-box{display:none;}
  form.f.sent .form-inner{display:none;}
  form.f.sent .done-box{display:block;}
  .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:31px; font-weight:800; letter-spacing:-0.04em; line-height:1.2;
    word-break:keep-all;}
  .done-box > p{margin-top:14px; font-size:15.5px; line-height:1.75; color:var(--ink-2); word-break:keep-all;}
  .done-box .ticket{margin-top:24px; background:var(--bg-2); border-radius:16px; padding:20px 22px;
    display:flex; justify-content:space-between; align-items:center; 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; list-style:none;}
  .done-box .tl li{display:flex; justify-content:space-between; gap:20px; padding:14px 0;
    border-top:1px solid var(--line); font-size:14.5px; font-weight:600;}
  .done-box .tl li span{color:var(--ink-mute); font-weight:600; text-align:right;}
  .done-box .tl li.cur{color:var(--amber-deep); font-weight:800;}
  .done-box .tl li.cur span{color:var(--amber-deep); font-weight:700;}
  .done-box .again{margin-top:26px; display:flex; gap:10px; flex-wrap:wrap;}

  /* ---- 다른 창구 ---- */
  .others{background:var(--ink); color:#fff; padding:88px 0;}
  .others .hd{display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
    margin-bottom:30px; flex-wrap:wrap;}
  .others .lbl{font-size:13px; font-weight:700; color:var(--amber);
    display:inline-flex; align-items:center; gap:8px;}
  .others .lbl::before{content:""; width:24px; height:2px; background:var(--amber);}
  .others h2{margin-top:14px; font-size:38px; font-weight:800; letter-spacing:-0.04em;}
  .o-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .o-card{display:flex; flex-direction:column; justify-content:space-between; min-height:200px;
    padding:26px; border-radius:22px; 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{font-size:12px; font-weight:800; color:rgba(255,255,255,.5);}
  .o-card h3{margin-top:22px; font-size:23px; font-weight:800; letter-spacing:-0.035em;}
  .o-card .sub{margin-top:7px; font-size:14px; color:rgba(255,255,255,.62); word-break:keep-all;}
  .o-card .ft{margin-top:24px; font-size:14px; font-weight:700; color:var(--amber);}

  .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);}

  @media (max-width:1180px){ .inq-grid{gap:48px;} .o-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:1024px){
    .inq-grid{grid-template-columns:1fr; gap:38px;}
    .inq h2{font-size:38px;}
    .o-grid{grid-template-columns:1fr;}
  }
  @media (max-width:760px){
    .inq{padding:64px 0 80px;}
    form.f{padding:24px 20px; border-radius:22px;}
    .f .row2{grid-template-columns:1fr; gap:0;}
    .types{grid-template-columns:1fr;}
    .rt{grid-template-columns:1fr; gap:4px;}
    .others{padding:64px 0;}
    .others h2{font-size:29px;}
  }