#view-method .method-flow{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
    #view-method .method-flow-item{
      display:grid;grid-template-columns:44px 1fr;gap:16px;
      padding:16px 18px;
      background:var(--surface);
      border:1px solid var(--divider);
      border-radius:var(--r);
      position:relative;
    }
    #view-method .method-flow-item:not(:last-child)::after{
      content:"";position:absolute;
      left:31px;bottom:-11px;
      width:1.5px;height:12px;
      background:linear-gradient(180deg,var(--brand) 0%,var(--brand-soft) 100%);
      z-index:0;
    }
    #view-method .method-flow-num{
      width:44px;height:44px;border-radius:10px;
      background:var(--brand-soft);color:var(--brand);
      display:flex;align-items:center;justify-content:center;
      align-self:center;
      font-family:var(--font-serif);font-size:18px;font-weight:600;font-style:italic;
      letter-spacing:.02em;
      overflow:hidden;
      box-shadow:0 6px 14px rgba(20,151,208,.10);
      position:relative;z-index:1;
    }
    #view-method .method-flow-num img{display:block;width:44px;height:44px;object-fit:cover}
    #view-method .method-flow-title{font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.005em;padding-top:9px}
    #view-method .method-flow-desc{margin-top:6px;font-size:14px;line-height:1.55;color:var(--ink-2)}
    #view-method .skill-icon{align-self:center}

    #view-method .timeline-total{
      display:flex;justify-content:space-between;align-items:center;
      font-family:var(--font-sans);font-size:11px;font-weight:700;
      letter-spacing:.14em;text-transform:uppercase;
      color:var(--ink-3);margin-bottom:8px;
    }
    #view-method .timeline-total strong{color:var(--brand);font-weight:700;letter-spacing:.06em;font-size:12px}
    #view-method .timeline-bar{
      display:flex;height:14px;border-radius:999px;overflow:hidden;
      margin-bottom:18px;
      background:var(--brand-softer);
      box-shadow:inset 0 0 0 1px var(--brand-soft);
    }
    #view-method .timeline-seg{position:relative}
    #view-method .timeline-seg:not(:last-child){border-right:1px solid rgba(255,255,255,.7)}
    #view-method .timeline-seg:nth-child(1){background:linear-gradient(180deg,#BDE2F3,#93D0EB)}
    #view-method .timeline-seg:nth-child(2){background:linear-gradient(180deg,#7BC5E5,#4FB1DA)}
    #view-method .timeline-seg:nth-child(3){background:linear-gradient(180deg,#3FA9D3,#1497D0)}
    #view-method .timeline-seg:nth-child(4){background:linear-gradient(180deg,#0F82B6,#0F7AAC)}
    #view-method .timeline-seg:nth-child(5){background:linear-gradient(180deg,#0A6D96,#095C81)}