 <style>
    :root{
      --primary:#1e3a8a;
      --primary-soft:#eff6ff;
      --accent:#0ea5e9;
      --success-soft:#ecfdf5;
      --text:#0f172a;
      --muted:#64748b;
      --border:#e2e8f0;
      --card-shadow:0 10px 30px rgba(15, 23, 42, 0.08);
    }

    body{
      font-family:'Niramit', sans-serif;
      background:
        radial-gradient(circle at top left, rgba(14,165,233,.12), transparent 25%),
        radial-gradient(circle at top right, rgba(30,58,138,.10), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
      color:var(--text);
      min-height:100vh;
    }

    .page-wrap{
      padding: 32px 0 50px;
    }

    .hero-card{
      border:0;
      border-radius:24px;
      overflow:hidden;
      box-shadow:var(--card-shadow);
      background:linear-gradient(135deg, #d5e1ff 0%, #83b2C9 100%);
      color:#fff;
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.18);
      color:#960b0b;
      border-radius:999px;
      padding:.45rem .9rem;
      font-size:.95rem;
    }

    .hero-title{
      font-size: clamp(1.35rem, 2vw, 2.1rem);
      color:#013475;
      font-weight:700;
      line-height:1.4;
      margin-bottom:.75rem;
    }

    .hero-subtitle{
      color:#7e0101;
      font-size:1rem;
      line-height:1.8;
      margin-bottom:0;
    }

    .glass-box{
      background: rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(6px);
      border-radius:18px;
      padding:1rem 1.2rem;
      color:#013475;
    }
    
    .search-card,
    .result-card,
    .note-card{
      border:0;
      border-radius:22px;
      box-shadow:var(--card-shadow);
      background:#fff;
    }

    .section-title{
      font-size:1.15rem;
      font-weight:700;
      margin-bottom:.25rem;
    }

    .search-input{
      height:56px;
      border-radius:16px;
      border:1px solid var(--border);
      padding-left:1rem;
      font-size:1.02rem;
    }

    .search-input:focus{
      border-color:#93c5fd;
      box-shadow:0 0 0 .25rem rgba(59,130,246,.12);
    }

    .btn-search{
      height:56px;
      border-radius:16px;
      font-weight:600;
      min-width:140px;
      background:linear-gradient(135deg, #4375e3 0%, #52c6ff 100%);
      border:none;
    }

    .btn-search:hover{
      opacity:.95;
    }

    .result-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.5rem .9rem;
      background:var(--primary-soft);
      color:var(--primary);
      border-radius:999px;
      font-weight:600;
      font-size:.95rem;
    }

    .table-modern{
      margin-bottom:0;
      vertical-align:middle;
    }

    .table-modern thead th{
      border:none;
      background:#d7efff;
      color:#1a4ecd;
      font-weight:600;
      padding:1rem .9rem;
      white-space:nowrap;
    }

    .table-modern thead th:first-child{
      border-top-left-radius:14px;
    }

    .table-modern thead th:last-child{
      border-top-right-radius:14px;
    }

    .table-modern tbody td{
      padding: .95rem .9rem;
      border-color:#eef2f7;
    }

    .table-modern tbody tr:hover{
      background:#f8fbff;
    }

	.table-modern td,
	.table-modern th{
	  white-space: nowrap;
	}

    .seq-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:38px;
      height:34px;
      padding:0 10px;
      border-radius:10px;
      background:#eff6ff;
      border:1px solid #e2e8f0;
      font-weight:600;
      color:#1d4ed8;
      font-size:.9rem;
    }

    .member-badge{
      display:inline-block;
      background:#eff6ff;
      color:#1d4ed8;
      border:1px solid #dbeafe;
      border-radius:999px;
      padding:.3rem .75rem;
      font-weight:600;
      font-size:.92rem;
    }


    .empty-state{
      text-align:center;
      padding:2.2rem 1rem;
    }

    .empty-icon{
      width:72px;
      height:72px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      background:#f8fafc;
      color:#94a3b8;
      font-size:2rem;
      margin-bottom:1rem;
    }

    .note-list{
      margin:0;
      padding-left:1.2rem;
    }

    .note-list li{
      margin-bottom:.55rem;
      line-height:1.8;
    }

    .footer-text{
      color:var(--muted);
      font-size:.92rem;
      text-align:center;
      margin-top:1.25rem;
    }

    @media (max-width: 768px){
      .page-wrap{
        padding-top:18px;
      }
      .hero-card .card-body{
        padding:1.4rem !important;
      }
      .search-card .card-body,
      .result-card .card-body,
      .note-card .card-body{
        padding:1.2rem !important;
      }
      .btn-search{
        width:100%;
      }
    }
  </style>