:root{
    --border:#eee;
    --muted:#666;
    --bg:#fafafa;
    --card:#fff;
  }
  
  *{box-sizing:border-box}
  body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:24px;line-height:1.6}
  a{word-break:break-all}
  header{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
  h1{font-size:20px;margin:0}
  nav a{margin-right:12px}
  .meta{color:var(--muted);font-size:12px}
  
  .container{max-width:1200px;margin:0 auto}
  .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
  .toolbar input[type="text"]{padding:8px 10px;min-width:260px}
  .toolbar select{padding:8px 10px}
  .toolbar .small{font-size:12px;color:var(--muted)}
  
  .grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-top:14px;
  }
  @media (max-width: 1100px){ .grid{grid-template-columns:repeat(3,1fr)}}
  @media (max-width: 860px){ .grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width: 560px){ .grid{grid-template-columns:repeat(1,1fr)}}
  
  .card{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height: 100%;
  }
  .thumb{
    width:100%;
    aspect-ratio: 16/10;
    background:var(--bg);
    display:block;
    object-fit:cover;
  }
  .card-body{padding:12px}
  .badge{
    display:inline-block;
    font-size:12px;
    border:1px solid #dde;
    border-radius:999px;
    padding:2px 10px;
    margin-bottom:8px;
  }
  .title{font-weight:700;margin:0 0 6px;font-size:14px}
  .note{color:var(--muted);font-size:12px;white-space:pre-wrap}
  
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  .btn{
    display:inline-block;
    border:1px solid var(--border);
    padding:8px 10px;
    border-radius:10px;
    text-decoration:none;
    font-size:12px;
    background:#fff;
  }
  .btn.primary{border-color:#cfe4ff;background:#f5fbff}
  
  .panel{
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    margin-top:14px;
    background:#fff;
  }
  .alert-ok{background:#f3fff3;border:1px solid #d9f5d9;padding:10px;border-radius:10px;margin-top:12px}
  .alert-ng{background:#fff3f3;border:1px solid #f5d9d9;padding:10px;border-radius:10px;margin-top:12px}
  .table{width:100%;border-collapse:collapse;margin-top:10px}
  .table th,.table td{border-bottom:1px solid var(--border);padding:10px;vertical-align:top}
  .table th{background:var(--bg);text-align:left}
  .small{font-size:12px;color:var(--muted)}
  
  .detail-head{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
  .detail-thumb{width:min(520px, 100%);aspect-ratio:16/10;object-fit:cover;border:1px solid var(--border);border-radius:14px;background:var(--bg)}
  .kv{flex:1;min-width:260px}
  .kv h2{margin:0 0 8px;font-size:18px}
  .kv .kv-meta{color:var(--muted);font-size:12px;margin-bottom:10px}
  .kv dl{margin:0}
  .kv dt{font-size:12px;color:var(--muted);margin-top:10px}
  .kv dd{margin:4px 0 0}
  
  .pdf-wrap{margin-top:14px}
  .pdf-frame{
    width:100%;
    height:80vh;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
  }