:root{
      --bg: #0b1220;
      --fg: #e8eefc;
      --muted: rgba(232,238,252,0.70);
      --muted2: rgba(232,238,252,0.55);

      --card: rgba(255,255,255,0.04);
      --border: rgba(255,255,255,0.10);
      --border2: rgba(255,255,255,0.14);

      --input: rgba(255,255,255,0.06);
      --inputBorder: rgba(255,255,255,0.12);

      --tabBg: rgba(255,255,255,0.06);
      --tabActiveBg: rgba(99,102,241,0.35);
      --tabActiveBorder: rgba(99,102,241,0.65);

      --badgeBg: rgba(255,255,255,0.08);
      --badgeBorder: rgba(255,255,255,0.12);

      --rowBorder: rgba(255,255,255,0.08);

      --error: #ffb4b4;
      --shadow: 0 8px 30px rgba(0,0,0,0.25);
    }

    html[data-theme="light"]{
      --bg: #f7f8fb;
      --fg: #0f172a;
      --muted: rgba(15,23,42,0.70);
      --muted2: rgba(15,23,42,0.55);

      --card: rgba(15,23,42,0.03);
      --border: rgba(15,23,42,0.10);
      --border2: rgba(15,23,42,0.14);

      --input: rgba(15,23,42,0.04);
      --inputBorder: rgba(15,23,42,0.12);

      --tabBg: rgba(15,23,42,0.04);
      --tabActiveBg: rgba(99,102,241,0.18);
      --tabActiveBorder: rgba(99,102,241,0.45);

      --badgeBg: rgba(15,23,42,0.06);
      --badgeBorder: rgba(15,23,42,0.12);

      --rowBorder: rgba(15,23,42,0.08);

      --error: #b42318;
      --shadow: 0 8px 30px rgba(0,0,0,0.10);
    }

    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
      margin: 0;
      background: var(--bg);
      color: var(--fg);
    }
    .wrap{ max-width: 1200px; margin: 0 auto; padding: 18px; }

    .page-title{
      display:flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin: 2px 0 12px;
    }
    .page-title h1{
      margin:0;
      font-size: 20px;
      letter-spacing: -0.2px;
    }

    .topbar{
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items:center;
      margin-bottom: 12px;
    }

    .search{ min-width: 0; }
    input[type="text"]{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid var(--inputBorder);
      background: var(--input);
      color: var(--fg);
      outline:none;
      box-sizing: border-box;
    }
    input[type="text"]::placeholder{ color: var(--muted2); }

    .right-controls{
      display:flex;
      align-items:center;
      gap: 10px;
      justify-self:end;
      white-space: nowrap;
    }
    .btn{
      border: 1px solid var(--border2);
      background: var(--tabBg);
      color: var(--fg);
      padding: 10px 12px;
      border-radius: 12px;
      cursor:pointer;
      user-select:none;
      font-size: 13px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      white-space:nowrap;
      line-height:1;
      flex: 0 0 auto;
    }
    .btn:hover{ filter: brightness(1.05); }
    .btn:active{ transform: translateY(1px); }

    .status{
      font-size: 13px;
      color: var(--muted);
      white-space:nowrap;
    }

    /* ✅ 필터: 한 줄 */
    .filters{
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

   .tab{
      padding:5px 9px;
      border-radius:999px;
      border:1px solid var(--border2);
      background: var(--tabBg);
      cursor:pointer;
      user-select:none;
      font-size:13px;
      white-space:nowrap;
      min-width: 40px;
      text-align:center;
    }
    .tab.active{
      background: var(--tabActiveBg);
      border-color: var(--tabActiveBorder);
    }

    .meta{
      margin-top:12px;
      font-size:13px;
      color: var(--muted);
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .badge{
      font-size:12px;
      padding:4px 8px;
      border-radius:999px;
      background: var(--badgeBg);
      border: 1px solid var(--badgeBorder);
      color: var(--fg);
    }

    .section{ margin-top: 18px; }
    .theme-card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px;
      margin-bottom: 12px;
      box-shadow: var(--shadow);
    }
    .theme-title{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .theme-title h3{ margin:0; font-size:16px; }

    table{ width:100%; border-collapse: collapse; margin-top:10px; }
    th, td{
      text-align:left;
      vertical-align: top;
      padding:10px 8px;
      border-top:1px solid var(--rowBorder);
    }
    th{ font-size:12px; color: var(--muted); font-weight:600; }
    td{ font-size:13px; }

    .code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      opacity:0.9;
    }

    /* ✅ 핵심: 한 UL 안에서 2컬럼(내용/날짜) */
    .items-ul{
      margin: 0;
      padding-left: 18px; /* bullet 보존 */
    }
    .items-ul > li{
      margin: 4px 0;
    }
    .item-grid{
      display:grid;
      grid-template-columns: 1fr 110px; /* 내용 | 날짜 */
      gap: 14px;
      align-items:start;
    }
    .item-text{
      line-height: 1.6;
      word-break: break-word;
      white-space: normal;
    }
    .item-date{
      line-height: 1.6;
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
      text-align:right;
      padding-top: 1px;
    }

    .muted{ color: var(--muted); }
    .error{ color: var(--error); }
    .loading{ opacity: 0.85; }

    .more-wrap{
      display:flex;
      justify-content:center;
      margin: 14px 0 6px;
    }

    @media (max-width: 720px){
      .topbar{ grid-template-columns: 1fr; }
      .right-controls{ justify-self:start; }
      .item-grid{ grid-template-columns: 1fr; }
      .item-date{ text-align:left; }
    }

  .pwa-nav {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: 8px;
    padding: 8px 12px;
    background: #0b1220;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .pwa-nav button {
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    background: #1f2a44;
    color: #fff;
    cursor: pointer;
  }

/* Adsense/content friendly additions - copied to match normal case3612 layout */
html, body { overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; min-height: 100% !important; }
.adsense-content { background:#0f172a; color:#e5e7eb; padding:24px 16px; }
.adsense-inner { max-width:1180px; margin:0 auto; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:24px; box-shadow:0 16px 36px rgba(15,23,42,.16); }
.adsense-inner h2 { margin:0 0 10px; color:#fff; font-size:26px; }
.adsense-inner p { color:#cbd5e1; line-height:1.75; }
.content-label { color:#93c5fd !important; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.guide-grid article { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px; }
.guide-grid h3 { margin:0 0 8px; color:#fff; font-size:17px; }
.ad-slot-inline { min-height:90px; border:1px dashed rgba(255,255,255,.22); border-radius:14px; margin-top:18px; display:flex; align-items:center; justify-content:center; color:#64748b; }
.legal-footer { background:#0f172a; color:#94a3b8; text-align:center; padding:24px 16px 40px; }
.legal-footer a { color:#cbd5e1; margin:0 8px; text-decoration:none; }
@media(max-width:900px){ .guide-grid{grid-template-columns:1fr}.adsense-inner{padding:18px}.adsense-inner h2{font-size:22px} }