:root { --bg: #0b0f14; --card:#11161d; --muted:#9fb0c0; --text:#e9f0f6; --accent:#6aa9ff; --ring:#1c3147; }
    * { box-sizing: border-box; }
    html, body { margin:0; height:100%; }
    body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Nanum Gothic", "Noto Sans KR", Arial, sans-serif; background-color: #0b0f14; color: var(--text); }

    a { color: inherit; text-decoration: none; }
    .container { max-width: 1000px; margin: 0 auto; padding: 24px; }
    header { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
    .brand { display:flex; align-items:center; gap:12px; }
    .logo { position: relative; width: 36px; height: 36px; border-radius: 12px; background: radial-gradient(120% 120% at 0% 0%, #6aa9ff 0%, #7ef3d1 45%, #5b7cff 100%); box-shadow: 0 0 0 6px rgba(106,169,255,.08), 0 10px 30px rgba(0,0,0,.4); overflow: hidden; }
    .logo::before { content:''; position:absolute; inset:-30%; background: conic-gradient(from 0deg, rgba(126,243,209,.0), rgba(126,243,209,.8), rgba(91,124,255,.0)); filter: blur(12px); transform: rotate(0deg); animation: spin-slow 24s linear infinite; }
    .logo::after { content:''; position:absolute; inset:1px; border-radius: 11px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.2); }
    .logo .mark { position:absolute; inset:0; display:grid; place-items:center; font-weight: 800; font-size: 18px; letter-spacing: -0.5px; background: linear-gradient(90deg, #e9f0f6, #7ef3d1); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 12px rgba(110,170,255,.35); z-index:1; }
    @keyframes spin-slow { to { transform: rotate(360deg); } }
    h1 { font-size: 20px; margin: 0; letter-spacing: .2px; }
    .search { position: relative; flex: 1; min-width: 240px; }
    .search input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 12px; border: 1px solid var(--ring); background: var(--card); color: var(--text); outline: none; box-shadow: 0 2px 0 0 rgba(255,255,255,.02) inset; }
    .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .7; }
    .tags { display:flex; gap:8px; flex-wrap: wrap; margin-top:16px; }
    .tag { padding:8px 12px; border-radius:999px; background: #101823; border:1px solid var(--ring); color: var(--muted); cursor: pointer; font-size: 13px; }
    .tag.active { color: #0b1220; background:#7ef3d1; border-color: #7ef3d1; }
    .grid { display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
    @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (min-width: 980px) { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
    .card { background: linear-gradient(180deg, #0f1621, #0e1520); border:1px solid var(--ring); border-radius: 14px; padding: 14px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
    .card:hover { transform: translateY(-2px); border-color: #264b75; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
    .card h3 { margin:0 0 8px; font-size: 15px; font-weight: 700; }
    .card p { margin:0; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .card .links { display:flex; flex-wrap: wrap; gap:8px; margin-top:12px; }
    .pill { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; background:#0b1220; border:1px solid var(--ring); border-radius: 10px; font-size: 13px; color: var(--text); }
    .pill:hover { background:#0d1524; border-color:#2a527e; }
    .pill .favicon { width:16px; height:16px; border-radius:3px; background:#1a2533; display:inline-block; overflow:hidden; }
    .muted { color: var(--muted); }
    footer { margin: 26px 0 6px; color: var(--muted); font-size: 12px; text-align: center; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .fab-telegram {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #0b1220;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 6px rgba(106,169,255,.12);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    }
    .fab-telegram:hover { transform: translateY(-2px); filter: brightness(1.05); }
    .fab-telegram:active { transform: translateY(0); }
    .fab-telegram svg { width: 26px; height: 26px; }
    .fab-telegram .sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
    .fab-top {
    position: fixed;
    right: 20px;
    bottom: 90px; /* 텔레그램 버튼 위쪽 */
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #7ef3d1;
    color: #0b1220;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 6px rgba(126,243,209,.12);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    opacity: 0; /* 기본은 숨김 */
    pointer-events: none;
    }
    .fab-top:hover { transform: translateY(-2px); filter: brightness(1.05); }
    .fab-top.show { opacity: 1; pointer-events: auto; }
    .fab-top svg { width: 26px; height: 26px; }
    
    .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto)); /* 반응형 칼럼 */
    gap: 5px;  /* 이미지 간격 */
    max-width: 900px;
    margin: 0 auto;
    justify-content: center;
    }
    
    /* PC (데스크탑 화면, 1024px 이상) */
    @media (min-width: 1024px) {
        .image-grid {
        grid-template-columns: repeat(3, auto); /* 칸 크게 */
        max-width: 1200px; /* 전체 폭 넓히기 */
        gap: 5px;          /* 간격도 조금 늘리기 */
      }
    }

    .image-grid img {
      width: 350px;         /* 칸 크기에 맞게 자동 조정 */
      height: 150px;        /* 세로 비율 유지 */
      border-radius: 8px;
      object-fit: cover;   /* 꽉 차게 */
      display: block;
    }
  
   .image {
    width: 200px;
    height: 200px;
    transition: transform 0.3s ease; /* 부드러운 확대 효과 */
  }

  .image:hover {
    transform: scale(1.1); /* 1.2배 확대 */
  }
  
  .fab-fortune {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #ffcc00; /* 노란색 운세 버튼 */
  color: #0b1220;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 6px rgba(255,204,0,.12);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .fab-fortune:hover { 
    transform: translateY(-2px); 
    filter: brightness(1.1); 
  }
  .fab-fortune:active { transform: translateY(0); }
  .fab-fortune span { font-size: 24px; } /* 이모지 크기 */