/* ============================================
   作品卡片 / 作品格線 — index.html 與 works.html 共用
   (原內嵌於 index.html,抽出以供兩頁共用)
   ============================================ */

  .work{padding:130px 0 40px;}
  .work-groups{display:flex;flex-direction:column;gap:80px;}
  .work-group{display:flex;flex-direction:column;gap:26px;}
  .wg-label{
    font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--accent);display:flex;align-items:center;gap:16px;
  }
  .wg-label::after{content:"";flex:1;height:1px;background:var(--line);}
  .wg-label .cnt{color:var(--ink-faint);font-size:.7em;letter-spacing:.1em;flex-shrink:0;}
  .work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
  .work-grid.grid-3{grid-template-columns:repeat(3,1fr);gap:20px;}
  .card{
    position:relative;display:flex;flex-direction:column;
    background:var(--paper-2);border:1px solid var(--line-soft);border-radius:10px;
    overflow:hidden;text-decoration:none;color:inherit;
    transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .4s;
  }
  .card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(29,26,21,.35);border-color:var(--line);}
  .card.featured{grid-column:span 2;flex-direction:row;}
  .card-thumb{
    background:linear-gradient(135deg,var(--paper-3),var(--paper-2));
    position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    min-height:230px;
  }
  .card.featured .card-thumb{flex:1.1;min-height:340px;}
  .card:not(.featured) .card-thumb{min-height:0;aspect-ratio:2560/1368;}
  .card-thumb .placeholder{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-faint);opacity:.6;text-align:center;padding:0 20px;line-height:2;
  }
  .card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}

  /* 迷你終端機（cleanup 卡片） */
  .card-thumb .mini-term{
    position:absolute;inset:14px;background:#1d1a15;border-radius:7px;overflow:hidden;
    display:flex;flex-direction:column;border:1px solid rgba(246,241,231,.08);
    box-shadow:0 12px 24px -14px rgba(0,0,0,.5);
  }
  .card-thumb .mini-term .mt-bar{
    display:flex;align-items:center;gap:5px;padding:6px 10px;background:#2b271f;
    border-bottom:1px solid rgba(246,241,231,.08);flex-shrink:0;
  }
  .card-thumb .mini-term .mt-bar i{width:7px;height:7px;border-radius:50%;display:inline-block;}
  .card-thumb .mini-term .mt-bar i.r{background:#e0564a;}
  .card-thumb .mini-term .mt-bar i.y{background:#e0a23a;}
  .card-thumb .mini-term .mt-bar i.g{background:#7fae6b;}
  .card-thumb .mini-term .mt-bar .ti{
    font-family:var(--mono);font-size:.58rem;color:rgba(246,241,231,.58);
    margin-left:8px;letter-spacing:.04em;
  }
  .card-thumb .mini-term .mt-body{
    margin:0;padding:11px 14px;font-family:var(--mono);
    font-size:clamp(.56rem,1.1vw,.7rem);line-height:1.75;
    color:rgba(246,241,231,.82);white-space:pre;overflow:hidden;flex:1;
  }
  .card-thumb .mini-term .ac{color:#e2795f;}
  .card-thumb .mini-term .dim{color:rgba(246,241,231,.45);}
  .card-thumb .mini-term .ok{color:#9ac184;}
  .card-thumb .mini-term .cur{color:#e2795f;animation:blink 1.1s steps(1) infinite;}
  @keyframes blink{50%{opacity:0;}}

  /* 迷你 GUI 視窗（pdf-unlock 卡片） */
  .card-thumb .mini-app{
    position:absolute;inset:14px;background:#f3f3f3;border-radius:7px;overflow:hidden;
    display:flex;flex-direction:column;border:1px solid rgba(29,26,21,.18);
    box-shadow:0 12px 24px -14px rgba(0,0,0,.4);
  }
  .card-thumb .mini-app .ma-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:5px 12px;background:#e4e4e4;border-bottom:1px solid rgba(29,26,21,.08);flex-shrink:0;
  }
  .card-thumb .mini-app .ma-bar .ttl{font-family:var(--sans);font-size:.6rem;color:#333;}
  .card-thumb .mini-app .ma-bar .ctrls{font-family:var(--mono);font-size:.64rem;color:#555;letter-spacing:.18em;}
  .card-thumb .mini-app .ma-body{
    padding:14px 18px;display:flex;flex-direction:column;align-items:center;
    gap:7px;flex:1;justify-content:center;
  }
  .card-thumb .mini-app .ma-status{
    font-family:"Noto Sans TC",sans-serif;
    font-size:clamp(.54rem,1vw,.68rem);color:#444;
  }
  .card-thumb .mini-app .ma-status b{color:var(--accent-deep);font-weight:500;}
  .card-thumb .mini-app .ma-btn{
    font-family:"Noto Sans TC",sans-serif;
    font-size:clamp(.52rem,.95vw,.64rem);padding:4px 14px;
    border:1px solid #adadad;border-radius:3px;
    background:linear-gradient(180deg,#fafafa,#e6e6e6);color:#222;
  }
  .card-thumb .mini-app .ma-input{
    width:62%;padding:4px 8px;border:1px solid #bbb;border-radius:2px;
    background:#fff;font-family:var(--mono);letter-spacing:.3em;color:#666;
    font-size:clamp(.5rem,.9vw,.6rem);text-align:center;
  }
  .card-thumb .mini-app .ma-btn.go{
    background:#2e7d32;color:#fff;border:1px solid #275a2b;
    font-weight:500;padding:5px 16px;
  }

  /* 迷你深色視窗（yt-mp3 卡片 · CustomTkinter 風格） */
  .card-thumb .mini-yt{
    position:absolute;inset:14px;background:#242429;border-radius:7px;overflow:hidden;
    display:flex;flex-direction:column;border:1px solid #3a3a40;
    box-shadow:0 12px 24px -14px rgba(0,0,0,.5);
  }
  .card-thumb .mini-yt .my-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:5px 12px;background:#1c1c20;border-bottom:1px solid #2e2e34;flex-shrink:0;
  }
  .card-thumb .mini-yt .my-bar .ttl{font-family:var(--sans);font-size:.6rem;color:#cfcfd4;}
  .card-thumb .mini-yt .my-bar .ctrls{font-family:var(--mono);font-size:.64rem;color:#7a7a82;letter-spacing:.18em;}
  .card-thumb .mini-yt .my-body{
    padding:11px 14px;display:flex;flex-direction:column;gap:6px;
    flex:1;justify-content:center;
  }
  .card-thumb .mini-yt .field{
    padding:5px 10px;border-radius:5px;background:#2f2f35;border:1px solid #3d3d44;
    font-family:"Noto Sans TC",sans-serif;font-size:clamp(.5rem,.95vw,.62rem);color:#a5a6ae;
  }
  .card-thumb .mini-yt .btn{
    padding:5px 0;border:none;border-radius:5px;background:#2a6fdb;color:#fff;
    font-family:"Noto Sans TC",sans-serif;font-size:clamp(.5rem,.95vw,.62rem);
    font-weight:500;text-align:center;
  }
  .card-thumb .mini-yt .prog{height:5px;border-radius:3px;background:#2f2f35;overflow:hidden;}
  .card-thumb .mini-yt .prog i{display:block;height:100%;width:64%;background:#2a6fdb;border-radius:3px;}
  .card-thumb .mini-yt .st{
    font-family:"Noto Sans TC",sans-serif;font-size:clamp(.48rem,.9vw,.6rem);
    color:#e0a23a;text-align:center;
  }

  /* 迷你程式碼編輯器（Cornhsu.Labeling 卡片） */
  .card-thumb .mini-code{
    position:absolute;inset:18px;background:#1d1a15;border-radius:7px;overflow:hidden;
    display:flex;flex-direction:column;border:1px solid rgba(246,241,231,.08);
    box-shadow:0 12px 24px -14px rgba(0,0,0,.5);
  }
  .card-thumb .mini-code .mc-bar{
    display:flex;align-items:center;gap:5px;padding:7px 12px;background:#2b271f;
    border-bottom:1px solid rgba(246,241,231,.08);flex-shrink:0;
  }
  .card-thumb .mini-code .mc-bar i{width:8px;height:8px;border-radius:50%;display:inline-block;}
  .card-thumb .mini-code .mc-bar i.r{background:#e0564a;}
  .card-thumb .mini-code .mc-bar i.y{background:#e0a23a;}
  .card-thumb .mini-code .mc-bar i.g{background:#7fae6b;}
  .card-thumb .mini-code .mc-bar .ti{
    font-family:var(--mono);font-size:.6rem;color:rgba(246,241,231,.58);
    margin-left:8px;letter-spacing:.04em;
  }
  .card-thumb .mini-code .mc-body{
    margin:0;padding:16px 18px;font-family:var(--mono);
    font-size:clamp(.58rem,1.15vw,.74rem);line-height:1.9;
    color:rgba(246,241,231,.82);white-space:pre;overflow:hidden;flex:1;
  }
  .card-thumb .mini-code .kw{color:#7fa9d6;}
  .card-thumb .mini-code .ty{color:#8fd0c5;}
  .card-thumb .mini-code .st{color:#d6a97f;}
  .card-thumb .mini-code .cm{color:rgba(246,241,231,.4);font-style:italic;}
  .card-thumb .mini-code .mt{color:#e2c184;}
  .card-thumb .mini-code .cur{color:#e2795f;animation:blink 1.1s steps(1) infinite;}

  .card-thumb .big-glyph{
    font-family:var(--display);font-style:italic;font-weight:300;
    font-size:clamp(3rem,7vw,6rem);color:var(--accent);opacity:.18;
    position:absolute;
  }
  .card-info{padding:32px 34px 34px;display:flex;flex-direction:column;flex:1;}
  .card.featured .card-info{justify-content:center;flex:1;padding:48px 46px;}
  .card-kicker{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:10px;
  }
  .card-kicker .badge{
    background:var(--accent);color:var(--paper);padding:2px 8px;border-radius:3px;font-size:.6rem;
  }
  .card-title{
    font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.1rem);
    line-height:1.15;margin-bottom:6px;
  }
  .card-title .zh{font-size:.86rem;font-weight:400;color:var(--ink-faint);letter-spacing:.05em;font-family:var(--sans);display:block;margin-top:8px;}
  .card-tagline{font-family:var(--serif);font-size:1rem;color:var(--ink-soft);line-height:1.6;margin:14px 0 22px;}
  .card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;}
  .card-tags span{
    font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);
    background:var(--paper);padding:4px 10px;border-radius:4px;
  }
  .card-cta{
    margin-top:22px;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;
    color:var(--accent);display:flex;align-items:center;gap:8px;transition:gap .3s;
  }
  .card:hover .card-cta{gap:14px;}

  @media(max-width:860px){
    .work-grid,.work-grid.grid-3{grid-template-columns:1fr;}
    .work-groups{gap:56px;}
    .card.featured{flex-direction:column;grid-column:span 1;}
    .card.featured .card-thumb{min-height:230px;}
  }