:root{
      --bg:#f6fbff;
      --card:#ffffff;
      --accent:#0078d4;
      --muted:#6b7280;
      --glass: rgba(255,255,255,0.6);
      font-family: Inter, Noto Sans KR, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", sans-serif;
    }
    body{margin:0;
        background:linear-gradient(180deg,var(--bg),#ffffff);
        color:#111827}

    
    .title{
        display:flex;
        gap:16px;
        align-items:center;
        margin-top: 70px;
      }
    .logo{
      width:56px;height:56px;
      border-radius:10px;background:linear-gradient(135deg,var(--accent),#00b0ff);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;font-weight:700;font-size:18px
    }
    h1{
      margin:0;
      font-size:20px
    }
    p.lead{
      margin:8px 0 0;
      color:var(--muted)
    }

    /* Controls */
    .container {
      max-width: 1200px; /* 최대 가로 폭 */
      margin: 0 auto;    /* 가운데 정렬 */
      padding: 0 20px;   /* 양쪽 여백 */
      }
    .controls{
      display:flex;gap:12px;
      flex-wrap:wrap;margin:20px 0
    }
    .search{
      flex:1;
      min-width:220px
    }
    input, select{
      width:100%;
      padding:10px 12px;
      border-radius:8px;
      border:1px solid #e0e7ef;
      background:transparent
    }
    .filters{
      display:flex;gap:8px
    }
    .btn{
      padding:10px 14px;
      border-radius:8px;
      border:none;background:var(--accent);color:#fff;cursor:pointer
    }
    .btn.ghost{
      background:transparent;
      color:var(--accent);
      border:1px solid rgba(0,120,212,0.14)
    }

    /* Cards grid */
    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
      gap:18px;margin-top:18px
    }
    .card{
      background:var(--card);
      border-radius:12px;
      padding:16px;box-shadow:0 6px 18px rgba(2,6,23,0.06);
      display:flex;
      flex-direction:column;gap:8px
    }
    .card .meta{
      display:flex;
      justify-content:space-between;
      align-items:center
    }
    .site-name{
      font-weight:700
    }
    .tags{
      display:flex;
      gap:6px;
      flex-wrap:wrap
    }
    .tag{
      font-size:12px;
      padding:6px 8px;
      border-radius:999px;
      background:#f1f8ff;
      color:var(--accent);
      border:1px solid rgba(0,120,212,0.06)
    }
    .desc{
      color:var(--muted);
      font-size:14px
    }
    .actions{
      margin-top:auto;
      display:flex;gap:8px
    }
    .link{
      flex:1;
      text-align:center;
      padding:10px;border-radius:8px;
      background:#0ea5a1;
      color:#fff;
      text-decoration:none
    }
    .more{
      padding:10px;
      border-radius:8px;
      border:1px solid #e6eef8;
      background:transparent
    }

    /* modal */
    .modal-back{
      position:fixed;
      inset:0;background:rgba(2,6,23,0.45);
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px
    }
    .modal{
      width:100%;
      max-width:720px;
      background:white;
      border-radius:12px;
      padding:18px;
      box-shadow:0 10px 30px rgba(2,6,23,0.3)}
    .modal h3{
      margin:0
    }
    .modal .close{
      float:right;
      background:transparent;
      border:none;
      font-size:18px;
      cursor:pointer
    }


    
    @media (max-width:520px){.title{flex-direction:column;align-items:flex-start}.controls{flex-direction:column}}