/* Njob History — page styles (design reference: design_handoff_njob_website) */
/* ---- 필터 ---- */
  .filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:44px;}
  .chip{font-size:14px; font-weight:600; padding:10px 17px; border-radius:999px;
    background:var(--surface); color:var(--ink-2); border:1.5px solid var(--line);
    transition:background .16s, color .16s, border-color .16s;}
  .chip:hover{border-color:var(--line-2);}
  .chip.on{background:var(--ink); color:#fff; border-color:transparent; font-weight:700;}
  .chip small{margin-left:6px; opacity:.6; font-weight:600;}

  /* ---- 타임라인 ---- */
  .tl{position:relative; padding-left:0;}
  .tl::before{content:""; position:absolute; left:173px; top:6px; bottom:26px; width:2px;
    background:linear-gradient(180deg,var(--ink) 0%,var(--line) 60%,transparent 100%);}
  .tl-item{display:grid; grid-template-columns:150px 46px 1fr; align-items:start;
    padding:0 0 12px;}
  .tl-item .yr{padding-top:22px; font-size:26px; font-weight:900; letter-spacing:-0.035em;
    line-height:1; text-align:right; padding-right:0;}
  .tl-item .yr em{display:block; font-style:normal; font-size:11.5px; font-weight:700;
    color:var(--ink-mute); margin-top:7px; letter-spacing:0;}
  .tl-item .node{position:relative; display:flex; justify-content:center; padding-top:24px;}
  .tl-item .node i{width:12px; height:12px; border-radius:50%; background:var(--surface);
    border:2px solid var(--line-2); box-sizing:border-box; display:block; position:relative; z-index:1;}
  .tl-item.award .node i{border-color:var(--teal);}
  .tl-item.now .node i{border-color:var(--amber); background:var(--amber);}
  .tl-item.found .node i{border-color:var(--ink); background:var(--ink);}

  .card{margin-bottom:0; background:var(--surface); border:1px solid rgba(30,29,28,.06);
    border-radius:20px; overflow:hidden; transition:border-color .18s, box-shadow .18s;}
  .card:hover{border-color:var(--line-2);}
  .card.open{box-shadow:0 18px 40px -26px rgba(30,29,28,.35);}
  .card-hd{display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
    padding:24px 26px; width:100%; text-align:left; cursor:pointer;}
  .card-hd .l{min-width:0;}
  .card-hd h3{font-size:19px; font-weight:800; letter-spacing:-0.03em; line-height:1.35;
    word-break:keep-all;}
  .card-hd .sub{margin-top:8px; font-size:14px; line-height:1.6; color:var(--ink-2);
    word-break:keep-all; font-weight:500;}
  .card-hd .r{display:flex; align-items:center; gap:12px; flex:0 0 auto; padding-top:2px;}
  .tag{font-size:11.5px; font-weight:800; padding:6px 11px; border-radius:999px;
    background:var(--amber-wash); color:var(--amber-deep); white-space:nowrap;}
  .tag.award{background:var(--teal-wash); color:var(--teal-deep);}
  .tag.build{background:var(--tile); color:var(--ink-2);}
  .tag.now{background:var(--ink); color:#fff;}
  .fold{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-2);
    display:grid; place-items:center; font-size:14px; font-weight:700; color:var(--ink-2);
    transition:transform .22s var(--ease), background .18s, color .18s; flex:0 0 auto;}
  .card.open .fold{transform:rotate(45deg); background:var(--ink); color:#fff; border-color:var(--ink);}
  .card-bd{display:none; padding:0 26px 26px; border-top:1px solid var(--line);
    margin-top:0; padding-top:22px;}
  .card.open .card-bd{display:block;}
  .card-bd dl{display:grid; grid-template-columns:104px 1fr; gap:0;}
  .card-bd .kv{display:contents;}
  .card-bd dt{padding:10px 0; font-size:13px; color:var(--ink-mute); font-weight:600;
    border-top:1px solid var(--line);}
  .card-bd dd{padding:10px 0; font-size:14px; font-weight:600; border-top:1px solid var(--line);
    word-break:keep-all;}
  .card-bd .kv:first-child dt,.card-bd .kv:first-child dd{border-top:none;}
  .card-bd p{margin-top:14px; font-size:14.5px; line-height:1.72; color:var(--ink-2);
    word-break:keep-all;}
  .card-bd p:first-child{margin-top:0;}

  /* ---- 수상 하이라이트 ---- */
  .awards{background:var(--ink); color:#fff;}
  .aw-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .aw{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    border-radius:24px; padding:30px 28px 32px; display:flex; flex-direction:column;}
  .aw .yr{font-size:12.5px; font-weight:800; color:var(--amber);}
  .aw h3{margin-top:16px; font-size:24px; font-weight:800; letter-spacing:-0.035em; line-height:1.25;
    word-break:keep-all;}
  .aw .giver{margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.6); font-weight:600;}
  .aw p{margin-top:18px; font-size:14px; line-height:1.7; color:rgba(255,255,255,.75);
    word-break:keep-all;}
  .aw dl{margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:0;}
  .aw .kv{display:flex; justify-content:space-between; padding:10px 0;
    border-top:1px solid rgba(255,255,255,.12); font-size:13px;}
  .aw .kv dt{color:rgba(255,255,255,.5); font-weight:600;}
  .aw .kv dd{font-weight:700; color:rgba(255,255,255,.92);}

  /* ---- 지표 ---- */
  .milestones{display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink);}
  .ms{padding:28px 24px 32px 0; border-right:1px solid var(--line); margin-right:24px;}
  .ms:last-child{border-right:none; margin-right:0; padding-right:0;}
  .ms .v{font-size:44px; font-weight:800; letter-spacing:-0.045em; line-height:1;}
  .ms .v small{font-size:17px; font-weight:700; color:var(--ink-2); margin-left:4px; letter-spacing:-0.02em;}
  .ms .k{margin-top:12px; font-size:14px; font-weight:700;}
  .ms .s{margin-top:6px; font-size:13px; color:var(--ink-mute); line-height:1.55; word-break:keep-all;}

  @media (max-width:1024px){
    .tl::before{left:3px;}
    .tl-item{grid-template-columns:1fr; padding-left:34px; position:relative;}
    .tl-item .yr{text-align:left; padding-top:18px; padding-right:0; font-size:22px;}
    .tl-item .yr em{display:inline; margin-left:8px;}
    .tl-item .node{position:absolute; left:0; top:0; width:8px; padding-top:26px; justify-content:flex-start;}
    .aw-grid{grid-template-columns:1fr;}
    .milestones{grid-template-columns:repeat(2,1fr); row-gap:30px;}
    .ms:nth-child(2n){border-right:none; margin-right:0; padding-right:0;}
  }
  @media (max-width:760px){
    .card-hd{flex-direction:column; gap:14px; padding:20px 20px;}
    .card-hd h3{font-size:17px;}
    .card-hd .r{width:100%; justify-content:space-between;}
    .card-bd{padding:20px;}
    .card-bd dl{grid-template-columns:1fr; }
    .card-bd dt{border-top:1px solid var(--line); padding-bottom:0;}
    .card-bd dd{padding-top:6px; border-top:none;}
    .card-bd .kv:first-child dt{border-top:none;}
    .milestones{grid-template-columns:1fr;}
    .ms{border-right:none; margin-right:0; padding-right:0;}
    .aw{padding:24px 22px 26px;}
    .aw h3{font-size:21px;}
  }