/* Notice */
    .notice-card{ display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:start; }
    .notice-thumb{ width:96px; height:96px; border-radius:12px; object-fit:cover; border:1px solid var(--line); background:#fff; }
    .notice-meta{ font-size:.85rem; color:var(--muted); }
    .notice-title{ margin:0 0 6px; font-size:18px; font-weight:700; }
    .notice-body{ margin:6px 0 0; line-height:1.6; word-break:keep-all; }
    @media(max-width:859px){
      .notice-card{ grid-template-columns:1fr; }
      .notice-thumb{ width:100%; height:180px; }
    }

    /* === Notice Modal === */
    .notice-modal{position:fixed;inset:0;z-index:80;display:none;}
    .notice-modal.show{display:block;}
    .notice-modal .modal-backdrop{
      position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(3px);
    }
    .notice-modal .modal-dialog{
      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      width:90%;max-width:520px;max-height:90vh;overflow:auto;
      background:#fff;border-radius:18px;padding:22px;
      box-shadow:0 10px 30px rgba(0,0,0,.2);
    }
    .modal-img{width:100%;border-radius:12px;margin-bottom:16px;object-fit:cover;}
    .modal-title{margin:6px 0 12px;font-size:22px;font-weight:700;}
    .modal-body{line-height:1.65;white-space:pre-line;}
    .modal-meta{font-size:.85rem;color:var(--muted);margin-bottom:4px;}
    .modal-close{
      position:absolute;top:10px;right:14px;border:none;background:none;
      font-size:24px;cursor:pointer;color:#444;
    }
    @media(max-width:480px){
      .modal-dialog{padding:18px;}
      .modal-img{max-height:200px;object-fit:cover;}
    }

	/* Weekly-keywords*/
	.weekly-keywords{
		margin: 62px auto; padding: 20px 16px; max-width: 980px;
		background: var(--card); border:1px solid var(--ring);
		border-radius: var(--radius); box-shadow: var(--shadow);
	}
	.wk-head{ display:flex; align-items:end; gap:16px; justify-content:space-between; margin-bottom: 14px; padding-bottom:10px;	border-bottom: 1px dashed rgba(0,0,0,.08);	}
	.wk-head h3{ margin:0; font-size: clamp(18px, 2.4vw, 22px); font-weight:800; color:var(--ink); letter-spacing:-.2px; }
	.wk-head .medal{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.08)); }
	.wk-updated{ font-size:12px; color:var(--muted); white-space:nowrap; }
	/* List */
	.wk-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px;	}
	@media (min-width:720px){ .wk-list{ grid-template-columns: repeat(3, 1fr); } }
	.wk-item{
		display:flex; gap:12px; align-items:center;
		padding:14px 16px; background:radial-gradient(120% 120% at 0 0, var(--bg), transparent) , var(--card);
		border:1px solid var(--ring); border-radius: 14px; position:relative;
		transition: transform .18s ease, box-shadow .18s ease;
	}
	.wk-item:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2,32,71,.09); }      
	.wk-rank{
		--size: 42px;
		width:var(--size); height:var(--size); flex:0 0 var(--size);
		display:grid; place-items:center; font-weight:900; color:#0a0a0a;
		border-radius: 50%;
		background: linear-gradient(180deg, #fff8 0, #0001 100%);
		border:2px solid #fff6;
		box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 6px 12px rgba(0,0,0,.08);
	}
	.gold   .wk-rank{ background: radial-gradient(120% 120% at 30% 20%, #fff7, transparent), linear-gradient(180deg,#ffe07a, #f3b71a); }
	.silver .wk-rank{ background: radial-gradient(120% 120% at 30% 20%, #fff7, transparent), linear-gradient(180deg,#e9eef5,#cfd6e1); }
	.bronze .wk-rank{ background: radial-gradient(120% 120% at 30% 20%, #fff7, transparent), linear-gradient(180deg,#f2c19a,#cf8652); }      
	.wk-body{ flex:1; min-width:0; }
	.wk-word{
		font-weight:800; color:var(--ink);
		font-size: clamp(16px, 2.2vw, 18px);
		overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	}
	.wk-meta{ display:flex; align-items:center; gap:8px; margin-top:4px; }
	.wk-count{
		font-variant-numeric: tabular-nums;
		color:var(--muted); font-size:13px; padding:2px 8px;
		background: rgba(12,203,167,.08); border:1px solid var(--ring);
		border-radius: 999px;
	}
	.wk-trend{ font-size:12px; font-weight:700; letter-spacing:.2px; }
	.wk-trend.up{ color:var(--up); }
	.wk-trend.down{ color:var(--down); }
	.wk-trend.same{ color:var(--same); }
	.wk-item.loading{
		background: linear-gradient(90deg, #0000, #00000008 35%, #0000 65%) var(--bg);
		animation: shimmer 1.2s linear infinite;
	}
	@keyframes shimmer{
		from{ background-position:-120% 0; } to{ background-position:220% 0; }
	}



    
    #toast.show{ opacity:1; }

    #roadmap{
      --ink:#0b0f14; --muted:#5c6b7a; --line:#e8edf3; --accent:#0b7dda;
      --chip:#eef6ff; --bg:#ffffff; --soft:#f7fafc;
      color:var(--ink); background:var(--bg); border-top:1px solid var(--line);
      font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;
    }
    #roadmap h2{margin:0 0 8px;font-size:22px;letter-spacing:.2px}
    #roadmap .sub{color:var(--muted); margin-bottom:22px}
    #roadmap .card{border:1px solid var(--line); background:#fff; border-radius:14px; padding:16px}
    #roadmap .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
    #roadmap .col-4{grid-column:span 4}
    #roadmap .col-6{grid-column:span 6}
    #roadmap .col-12{grid-column:span 12}
    #roadmap .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--chip);color:#0858a7;font-weight:600;font-size:12px}
    #roadmap .k{font-weight:700}
    #roadmap .muted{color:var(--muted)}
    #roadmap .li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line)}
    #roadmap .li:first-child{border-top:0}
    #roadmap .dot{width:8px;height:8px;border-radius:2px;background:var(--accent);margin-top:7px;flex:0 0 auto}
    #roadmap details{border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:10px 12px}
    #roadmap summary{cursor:pointer;font-weight:700}
    #roadmap code{background:#f3f6fa;border:1px solid var(--line);padding:2px 6px;border-radius:6px}
    #roadmap .stat{display:flex;gap:10px;align-items:baseline}
    #roadmap .stat .n{font-size:22px;font-weight:900}
    @media (max-width:800px){
      #roadmap .col-4,#roadmap .col-6{grid-column:span 12}
    }


	/* 래퍼 */
	.wrap{max-width:980px;margin:0 auto;padding:0 16px;}

	.top-keywords{padding:28px 0;border-top:1px solid #eee;}
	.top-keywords .wk-head{
	display:grid;grid-template-columns:1fr auto auto;align-items:center;
	gap:12px;margin-bottom:12px
	}
	.top-keywords .tabs{display:flex;gap:8px;flex-wrap:wrap}
	.top-keywords .tab{
	border:1px solid var(--line,#e5e7eb);background:#fff;padding:6px 12px;
	border-radius:999px;font-weight:600;cursor:pointer;font-size:.9rem
	}
	.top-keywords .tab.is-active{background:#111;color:#fff;border-color:#111}

	/* 리스트 그리드 */
	.wk-list{
	list-style:none;margin:0;padding:0;
	display:grid;gap:10px;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	}

	/* 아이템(뱃지형) */
	.wk-item{
	display:flex;align-items:center;gap:10px;
	border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:10px 12px;
	box-shadow:0 1px 0 rgba(0,0,0,.03);min-width:0
	}
	.wk-rank{
	flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;
	border-radius:999px;background:#f3f4f6;font-weight:800
	}
	.wk-body{flex:1;display:flex;align-items:center;justify-content:space-between;min-width:0}
	.wk-word{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
	.wk-count{
	min-width:38px; text-align:center; font-weight:800; color:#111;
	background:#f3f4f6;border-radius:999px;padding:4px 10px;border:1px solid #e5e7eb
	}

	/* 순위별 색상 — 1등 금, 2등 은, 3등 기본(살짝 황금빛) */
	.wk-item.gold{
	background:linear-gradient(180deg,#fff7d6 0%,#ffe48a 100%);
	border-color:#f5d35c;
	}
	.wk-item.gold .wk-rank{background:#facc15;color:#111;border:1px solid #eab308}
	.wk-item.gold .wk-count{background:#ffe8a3;border-color:#f5d35c}

	.wk-item.silver{
	background:linear-gradient(180deg,#dadbe0 0%,#fff 100%);
	border-color:#d1d5db;
	}
	.wk-item.silver .wk-rank{background:#e9ebf0;color:#111}
	.wk-item.silver .wk-count{background:#edf0f4;border-color:#d1d5db}

	/* 3위는 기본 톤 유지 + 약한 황금빛 */
	.wk-item.bronze{
	background:linear-gradient(180deg,#fff 0%,#fff 100%);
	border-color:#e6e3df;
	}
	.wk-item.bronze .wk-rank{background:#fff;color:#111}
	.wk-item.bronze .wk-count{background:#fff;border-color:#f0eeeb}

	/* 모바일 좁은 화면 대응 */
	@media (max-width:480px){
	.wk-count{min-width:auto;padding:4px 8px}
	.top-keywords .wk-head{grid-template-columns:1fr auto;grid-auto-rows:auto}
	}

	/* Gallary */
	.hg-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:16px;
	margin-top:8px;
	}

	.hg-item{
	display:flex;
	flex-direction:column;
	overflow:hidden;
	}

	.hg-thumb{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	display:block;
	}

	.hg-body{
	padding:10px 12px 12px;
	}

	.hg-title{
	margin:0 0 4px;
	font-size:14px;
	font-weight:600;
	}

	.hg-text{
	margin:0 0 6px;
	font-size:13px;
	color:#4b5563;
	}

	.hg-meta{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:11px;
	color:#9ca3af;
	}

	.hg-tags{
	display:flex;
	gap:4px;
	flex-wrap:wrap;
	}
	.hg-tag{
	padding:2px 6px;
	border-radius:999px;
	border:1px solid #e5e7eb;
	background:#f9fafb;
	}

	.hg-thumb,
	.pg-item img {
	  max-width: 100%;
	  width: 100%;
	  height: auto;
	  display: block;
	  object-fit: cover;
	}

	/* 모달 전체 배경 */
	.img-modal {
	  display: none;
	  position: fixed;
	  z-index: 2000;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0,0,0,0.7);
	  backdrop-filter: blur(4px);
	  justify-content: center;
	  align-items: center;
	}

	/* 모달 이미지 */
	.img-modal-content {
	  max-width: 90%;
	  max-height: 90%;
	  border-radius: 14px;
	  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
	}

	/* 닫기 버튼 */
	.img-modal-close {
	  position: absolute;
	  top: 20px;
	  right: 30px;
	  color: #fff;
	  font-size: 40px;
	  cursor: pointer;
	  font-weight: 600;
	}
	
	
	/* To Top */
	.to-top{
		position:fixed; right:16px; bottom:16px;
		width:44px; height:44px; border-radius:999px;
		border:1px solid var(--line); background:#fff; color:var(--ink);
		display:flex; align-items:center; justify-content:center;
		box-shadow:0 6px 18px rgba(0,0,0,.08);
		cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s ease;
		z-index:60;
    }
    .to-top.show{ opacity:1; pointer-events:auto; }
    .to-top:active{ transform:translateY(1px); }