/* ===== 메인 (index) — Corporate Edition ===== */
#v-index{
	--navy:   #0f2744;
	--navy2:  #1a3a5c;
	--blue:   #1d4ed8;
	--blue-s: #eff6ff;
	--ink:    #0f172a;
	--sub:    #64748b;
	--line:   #e2e8f0;
	--bg:     #f8fafc;
}

/* ── SEO용 H1 — 바로 아래 배너/위젯과 동일한 카드 톤으로 배치(2026-09-22 재정리) ── */
#v-index .vi-page-h1{
	display:flex; align-items:flex-start; gap:8px;
	background:#fff; border:1px solid var(--line); border-radius:12px;
	padding:10px 14px; margin:0 0 12px;
	box-shadow:0 2px 10px rgba(15,23,42,.05);
}
#v-index .vi-page-h1 i{ color:var(--blue); font-size:12px; margin-top:2px; flex-shrink:0; }
#v-index .vi-page-h1 span{
	font-size:12.5px; font-weight:700; color:var(--sub); letter-spacing:-.01em; line-height:1.45;
}

/* ── 섹션 제목 ── */
#v-index .capture > h4.fw-bolder{
	display:flex; align-items:center; gap:10px;
	font-size:18px; font-weight:900; letter-spacing:-.02em; color:var(--ink); margin-bottom:4px;
}
#v-index .capture > h4.fw-bolder .icon{
	display:inline-flex; align-items:center; justify-content:center;
	width:32px; height:32px; border-radius:8px;
	background:var(--blue-s); color:var(--blue); font-size:14px;
}
#v-index .division{
	height:2px; margin:12px 0 20px;
	background:linear-gradient(90deg,var(--blue) 0%,rgba(29,78,216,.15) 35%,transparent 100%);
	border-radius:2px;
}

/* ── 로또 연구실 배너 ── */
#v-index .lotto-notice-banner{
	position:relative; display:block; text-decoration:none; overflow:hidden;
	background:var(--navy); border-radius:12px;
	border-left:4px solid var(--blue);
	box-shadow:0 4px 18px rgba(15,39,68,.18);
	transition:box-shadow .18s ease, border-color .18s ease;
	margin-bottom:14px;
}
#v-index .lotto-notice-banner:hover{ box-shadow:0 8px 28px rgba(15,39,68,.28); border-color:#60a5fa; }

#v-index .lnb-inner{ display:flex; align-items:center; gap:14px; padding:14px 18px; }
#v-index .lnb-icon{
	display:inline-flex; align-items:center; justify-content:center;
	width:40px; height:40px; border-radius:10px; flex-shrink:0; font-size:1.15rem;
	background:rgba(29,78,216,.22); color:#93c5fd;
}
#v-index .lnb-text{ flex:1; min-width:0; }
#v-index .lnb-title{ font-size:.95rem; font-weight:800; color:#fff; letter-spacing:.01em; }
#v-index .lnb-desc{ font-size:.76rem; color:rgba(255,255,255,.45); margin-top:2px; }
#v-index .lnb-go{
	flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
	font-size:.78rem; font-weight:700; color:#93c5fd; white-space:nowrap;
	border:1px solid rgba(147,197,253,.3); border-radius:6px; padding:6px 14px;
	background:rgba(29,78,216,.2); transition:background .18s, color .18s;
}
#v-index .lnb-go i{ transition:transform .18s; }
#v-index .lotto-notice-banner:hover .lnb-go{ background:var(--blue); color:#fff; border-color:var(--blue); }
#v-index .lotto-notice-banner:hover .lnb-go i{ transform:translateX(3px); }
@media(max-width:480px){
	#v-index .lnb-desc{ display:none; }
	#v-index .lnb-inner{ padding:12px 14px; }
}

/* ── 광고제거 배너 (연구실 배너와 같은 구조, 강조색만 다르게) ── */
#v-index .lnb-license{ border-left-color:#16c784; }
#v-index .lnb-license:hover{ border-color:#34d399; }
#v-index .lnb-license .lnb-icon{ background:rgba(22,199,132,.18); color:#6ee7b7; }
#v-index .lnb-license .lnb-go{ color:#6ee7b7; border-color:rgba(110,231,183,.3); background:rgba(22,199,132,.16); }
#v-index .lnb-license:hover .lnb-go{ background:#16c784; color:#06281b; border-color:#16c784; }

/* ── 로또 히어로 카드 ── */
#v-index .capture-lotto .card{
	border:1px solid var(--line); border-top:3px solid var(--blue);
	border-radius:12px; overflow:hidden;
	background:#fff; box-shadow:0 4px 20px rgba(15,23,42,.07);
}
#v-index .capture-lotto .card-body{ padding:22px 20px; }

/* 회차 / 날짜 */
#v-index .capture-lotto .card-title{
	font-size:13px; font-weight:800; letter-spacing:.06em;
	color:var(--blue); text-transform:uppercase; margin-bottom:2px;
}
#v-index .capture-lotto .card-text .text-body-secondary,
#v-index .capture-lotto .card-text small.text-body-secondary{ color:var(--sub) !important; }
#v-index .capture-lotto hr{ border-color:var(--line); opacity:1; }

/* 볼 */
#v-index .capture-lotto .c-lotto-box{ gap:5px; justify-content:center; padding:6px 0; }
#v-index .capture-lotto .c-lotto{ width:auto !important; }
#v-index .capture-lotto .c-lotto .ball{
	width:48px !important; height:48px; line-height:48px !important;
	font-size:17px; font-weight:900;
	box-shadow:0 3px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.3);
}
#v-index .capture-lotto .c-lotto .plus{
	line-height:48px !important; width:22px !important;
	color:var(--sub); font-size:12px;
}
@media(max-width:480px){
	#v-index .capture-lotto .c-lotto .ball{ width:38px !important; height:38px; line-height:38px !important; font-size:14px; }
	#v-index .capture-lotto .c-lotto .plus{ line-height:38px !important; }
}

/* 당첨금액 */
#v-index .capture-lotto .list-group{ border-radius:8px; overflow:hidden; margin:6px 0; }
#v-index .capture-lotto .list-group-item{
	background:var(--blue-s); border-color:#bfdbfe;
	color:var(--ink); text-align:center; padding:16px;
}
#v-index .capture-lotto .list-group-item strong{
	display:block; font-size:24px; font-weight:900; color:var(--navy); letter-spacing:-.02em; line-height:1.3;
}
#v-index .capture-lotto .list-group-item small{ font-size:12px; color:var(--sub); }

/* 전체회차 버튼 */
#v-index .capture-lotto .btn-outline-dark{
	border-color:var(--line); color:var(--ink);
	border-radius:8px; font-weight:700; padding:8px 20px; font-size:14px;
	transition:background .18s, border-color .18s, color .18s;
}
#v-index .capture-lotto .btn-outline-dark:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ── 자동추첨 배너 ── */
#v-index .lotto-quick-access{
	position:relative; display:block; text-decoration:none; overflow:hidden;
	background:var(--navy2); border-radius:12px;
	border-left:4px solid #22c55e;
	box-shadow:0 4px 18px rgba(15,39,68,.18);
	transition:box-shadow .18s ease, border-color .18s ease;
	margin-top:14px;
}
#v-index .lotto-quick-access:hover{ box-shadow:0 8px 28px rgba(15,39,68,.28); border-color:#4ade80; }

#v-index .lqa-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; }
#v-index .lqa-text{ flex:1; min-width:0; }
#v-index .lqa-title{ font-size:1.1rem; font-weight:900; color:#fff; letter-spacing:-.01em; }
#v-index .lqa-title i{ margin-right:8px; color:#4ade80; }
#v-index .lqa-desc{ font-size:.76rem; color:rgba(255,255,255,.45); margin-top:4px; }
#v-index .lqa-go{
	flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
	font-size:.8rem; font-weight:700; color:#86efac; white-space:nowrap;
	border:1px solid rgba(74,222,128,.3); border-radius:6px; padding:8px 16px;
	background:rgba(34,197,94,.12); transition:background .18s, color .18s, border-color .18s;
}
#v-index .lqa-go i{ transition:transform .18s; }
#v-index .lotto-quick-access:hover .lqa-go{ background:#22c55e; color:#fff; border-color:#22c55e; }
#v-index .lotto-quick-access:hover .lqa-go i{ transform:translateX(3px); }
@media(max-width:480px){
	#v-index .lqa-desc{ display:none; }
	#v-index .lqa-inner{ padding:14px 16px; }
	#v-index .lqa-title{ font-size:1rem; }
}

/* ── 콘텐츠 카드 공통 ── */
#v-index .capture-api .col.item{ position:relative; }

#v-index .capture-research .item.card,
#v-index .capture-post .item.card,
#v-index .capture-api .item .card{
	border:1px solid var(--line); border-radius:10px; overflow:hidden;
	box-shadow:0 1px 4px rgba(15,23,42,.05);
	transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
#v-index .capture-research .item.card:hover,
#v-index .capture-post .item.card:hover,
#v-index .capture-api .item:hover .card{
	transform:translateY(-2px); box-shadow:0 6px 20px rgba(15,23,42,.09); border-color:#cbd5e1;
}

/* 카드 타이틀 */
#v-index .capture-research .card-title,
#v-index .capture-post .card-title{ font-weight:800; font-size:16px; color:var(--ink); letter-spacing:-.01em; line-height:1.45; }
#v-index .capture-api .card-title{ font-weight:800; font-size:15px; color:var(--ink); }

/* 본문 요약 */
#v-index .item .ellipsis{
	font-family:'Noto Sans KR',sans-serif;
	overflow:hidden; display:-webkit-box;
	-webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
	word-wrap:break-word;
}
#v-index .capture-post .card-text.ellipsis,
#v-index .capture-api .card-text.ellipsis{ color:var(--sub); font-size:14px; line-height:1.6; }

/* 카드 푸터 */
#v-index .capture-research .card-footer,
#v-index .capture-api .card-footer{ background:#fff; border-top:1px solid var(--line); }
#v-index .capture-api .card-footer .icon i{ color:var(--blue); }

/* 배지 */
#v-index .capture-research .badge,
#v-index .capture-post .badge{ font-weight:700; border-radius:4px; padding:3px 8px; }

/* ── 더보기 링크 ── */
#v-index .capture .text-end a.link-secondary{
	display:inline-flex; align-items:center; gap:6px;
	font-weight:700; font-size:13px; color:var(--sub) !important; text-decoration:none;
	border:1px solid var(--line); border-radius:6px; padding:7px 16px;
	transition:background .14s, border-color .14s, color .14s;
}
#v-index .capture .text-end a.link-secondary:hover{ background:var(--bg); border-color:#cbd5e1; color:var(--ink) !important; }
#v-index .capture .text-end a.link-secondary i{ color:var(--blue); }

/* ── 최신회차/연구일지/블로그/API 섹션 (신규 카드 레이아웃) ── */
#v-index{
	--vi-navy:#0f2744; --vi-blue:#1d4ed8; --vi-blue-s:#eff6ff;
	--vi-line:#e2e8f0; --vi-bg:#f8fafc; --vi-ink:#0f172a; --vi-sub:#64748b;
	--vi-green:#16a34a; --vi-gray:#94a3b8;
	padding-bottom:40px;
}
#v-index .vi-bottom-spacer{ height:40px; }

/* 다음 추첨일 D-Day 위젯 */
#v-index .vi-drawday-widget{
	display:flex; gap:10px; margin-top:14px;
}
#v-index .vi-drawday-item{
	flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px;
	background:#fff; border:1px solid var(--vi-line); border-radius:12px;
	padding:11px 14px; box-shadow:0 2px 10px rgba(15,23,42,.05);
}
#v-index .vi-drawday-label{ font-size:12.5px; font-weight:700; color:#64748b; display:flex; align-items:center; gap:6px; }
#v-index .vi-drawday-dday{ font-size:14px; font-weight:900; color:var(--vi-blue); }
@media(max-width:420px){
	#v-index .vi-drawday-widget{ flex-direction:column; }
}

/* 로또 카드 */
#v-index .vi-lotto-card{
	background:#fff; border:1px solid var(--vi-line); border-top:3px solid var(--vi-blue);
	border-radius:14px; overflow:hidden; box-shadow:0 4px 20px rgba(15,23,42,.07);
	margin-top:16px; margin-bottom:0;
}
#v-index .vi-lotto-head{
	display:flex; align-items:center; gap:10px;
	padding:14px 18px 12px; border-bottom:1px solid var(--vi-line);
}
#v-index .vi-lotto-round{
	display:inline-block; font-size:12px; font-weight:900; letter-spacing:.06em;
	color:var(--vi-blue); background:var(--vi-blue-s); border:1px solid #bfdbfe;
	border-radius:50px; padding:3px 12px;
}
#v-index .vi-lotto-date{ flex:1; font-size:13px; color:var(--vi-sub); }
#v-index .vi-lotto-date i{ margin-right:4px; }
#v-index .vi-lotto-more{
	font-size:12px; font-weight:700; color:var(--vi-sub);
	border:1px solid var(--vi-line); border-radius:6px; padding:5px 12px;
	text-decoration:none; display:inline-flex; align-items:center; gap:4px;
	transition:all .14s;
}
#v-index .vi-lotto-more:hover{ background:var(--vi-navy); color:#fff; border-color:var(--vi-navy); }
#v-index .vi-lotto-balls{ padding:16px 12px 10px; }
#v-index .vi-lotto-balls .c-lotto-box{ justify-content:center; }
#v-index .vi-lotto-prize{
	text-align:center; padding:16px 20px 14px;
	background:var(--vi-blue-s); border-top:1px solid #dbeafe; border-bottom:1px solid #dbeafe;
}
#v-index .vi-prize-label{ font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--vi-sub); margin-bottom:6px; }
#v-index .vi-prize-amount{ font-size:24px; font-weight:900; color:var(--vi-navy); margin-bottom:4px; }
#v-index .vi-prize-sub{ font-size:12px; color:var(--vi-sub); }
#v-index .vi-lotto-cta{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 18px; font-size:14px; font-weight:800; color:var(--vi-navy);
	text-decoration:none; transition:background .14s;
}
#v-index .vi-lotto-cta:hover{ background:var(--vi-bg); }
#v-index .vi-lotto-cta i.fa-chevron-right{ color:var(--vi-line); }

/* ── 우주 시각화 프로모 카드 (lotto-map) ── */
#v-index .vi-promo-cosmic{
	position:relative; display:flex; align-items:center; gap:14px;
	background:radial-gradient(120% 180% at 12% 15%, #1b2a52 0%, #0c1226 55%, #060911 100%);
	border-radius:14px; padding:16px 18px; margin-top:12px;
	overflow:hidden; text-decoration:none; color:#fff;
	box-shadow:0 6px 22px rgba(10,15,35,.32);
	transition:transform .18s ease, box-shadow .18s ease;
}
#v-index .vi-promo-cosmic:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(10,15,35,.42); }
#v-index .vi-promo-cosmic:active{ transform:translateY(0); }
#v-index .vi-promo-stars{
	position:absolute; inset:0; pointer-events:none; opacity:.9;
	background-image:
		radial-gradient(1.6px 1.6px at 18% 28%, #fff 100%, transparent 100%),
		radial-gradient(1.2px 1.2px at 68% 18%, #cdd6ff 100%, transparent 100%),
		radial-gradient(1.4px 1.4px at 38% 74%, #fff 100%, transparent 100%),
		radial-gradient(1px 1px at 84% 58%, #9fb3ff 100%, transparent 100%),
		radial-gradient(1.3px 1.3px at 53% 42%, #fff 100%, transparent 100%),
		radial-gradient(1px 1px at 9% 78%, #cdd6ff 100%, transparent 100%),
		radial-gradient(1.1px 1.1px at 92% 30%, #fff 100%, transparent 100%);
}
#v-index .vi-promo-constellation{ position:relative; flex-shrink:0; width:104px; height:52px; }
#v-index .vi-promo-svg{ width:100%; height:100%; overflow:visible; }
#v-index .vi-promo-svg polyline{ fill:none; stroke:rgba(147,197,253,.55); stroke-width:1.3; }
#v-index .vi-promo-svg circle{ fill:#fff; filter:drop-shadow(0 0 3px rgba(255,255,255,.85)); }
#v-index .vi-promo-svg circle.is-bonus{ fill:#ffd23f; filter:drop-shadow(0 0 4px rgba(255,210,63,.85)); }
#v-index .vi-promo-body{ position:relative; flex:1; min-width:0; }
#v-index .vi-promo-badge{
	display:inline-block; font-size:10px; font-weight:900; letter-spacing:.05em;
	color:#0b1020; background:linear-gradient(135deg,#ffd23f,#ff9d4d);
	border-radius:999px; padding:2px 8px; margin-bottom:6px;
}
#v-index .vi-promo-title{ font-size:14px; font-weight:900; margin-bottom:3px; line-height:1.3; }
#v-index .vi-promo-sub{ font-size:11.5px; color:#a8b3d6; line-height:1.5; }
#v-index .vi-promo-cta{
	position:relative; flex-shrink:0; display:flex; align-items:center; gap:6px;
	font-size:12px; font-weight:800; color:#0b1020;
	background:#fff; border-radius:999px; padding:8px 14px; white-space:nowrap;
}
@media(max-width:480px){
	#v-index .vi-promo-cosmic{ flex-wrap:wrap; }
	#v-index .vi-promo-sub{ display:none; }
	#v-index .vi-promo-constellation{ width:84px; height:42px; }
	#v-index .vi-promo-cta{ margin-left:auto; }
}

/* ── 지구좌표 변환 프로모 카드 (win-map, 연금복권720 톤으로 우주 프로모와 구분) ── */
#v-index .vi-promo-win{
	position:relative; display:flex; align-items:center; gap:14px;
	background:radial-gradient(120% 180% at 88% 15%, #2a1b52 0%, #12081f 55%, #08050d 100%);
	border-radius:14px; padding:16px 18px; margin-top:12px;
	overflow:hidden; text-decoration:none; color:#fff;
	box-shadow:0 6px 22px rgba(20,10,35,.32);
	transition:transform .18s ease, box-shadow .18s ease;
}
#v-index .vi-promo-win:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(20,10,35,.42); }
#v-index .vi-promo-win:active{ transform:translateY(0); }
#v-index .vi-promo-win-icon{
	flex-shrink:0; width:52px; height:52px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(123,97,255,.2); color:#a78bfa; font-size:22px;
}
@media(max-width:480px){
	#v-index .vi-promo-win{ flex-wrap:wrap; }
	#v-index .vi-promo-win .vi-promo-sub{ display:none; }
	#v-index .vi-promo-win .vi-promo-cta{ margin-left:auto; }
}

/* ── 오늘의 운세 & 타로 뽑기 프로모 카드 — 미스틱 퍼플/골드 톤 ── */
#v-index .vi-promo-fortune{
	position:relative; display:flex; align-items:center; gap:14px;
	background:radial-gradient(120% 180% at 88% 85%, #2e1f4d 0%, #1c1530 55%, #100b1c 100%);
	border-radius:14px; padding:16px 18px; margin-top:12px;
	overflow:hidden; text-decoration:none; color:#fff;
	box-shadow:0 6px 22px rgba(30,20,50,.32);
	transition:transform .18s ease, box-shadow .18s ease;
}
#v-index .vi-promo-fortune:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(30,20,50,.42); }
#v-index .vi-promo-fortune:active{ transform:translateY(0); }
#v-index .vi-promo-fortune-icon{
	flex-shrink:0; width:52px; height:52px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(232,194,106,.18); color:#e8c26a; font-size:22px;
}
@media(max-width:480px){
	#v-index .vi-promo-fortune{ flex-wrap:wrap; }
	#v-index .vi-promo-fortune .vi-promo-sub{ display:none; }
	#v-index .vi-promo-fortune .vi-promo-cta{ margin-left:auto; }
}

/* ── 도구(나만의 사진 보관함) 프로모 카드 — 다른 두 프로모와 구분되는 틸 톤 ── */
#v-index .vi-promo-tool{
	position:relative; display:flex; align-items:center; gap:14px;
	background:radial-gradient(120% 180% at 12% 85%, #0d3b36 0%, #082220 55%, #04100f 100%);
	border-radius:14px; padding:16px 18px; margin-top:12px;
	overflow:hidden; text-decoration:none; color:#fff;
	box-shadow:0 6px 22px rgba(5,25,22,.32);
	transition:transform .18s ease, box-shadow .18s ease;
}
#v-index .vi-promo-tool:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(5,25,22,.42); }
#v-index .vi-promo-tool:active{ transform:translateY(0); }
#v-index .vi-promo-tool-icon{
	flex-shrink:0; width:52px; height:52px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(45,212,191,.18); color:#2dd4bf; font-size:22px;
}
/* ── 보안 비밀번호 생성기 프로모 카드 — 그린 톤 (2026-09-08 추가) ── */
#v-index .vi-promo-pwg{
	position:relative; display:flex; align-items:center; gap:14px;
	background:radial-gradient(120% 180% at 12% 15%, #0d3b2a 0%, #082219 55%, #04100c 100%);
	border-radius:14px; padding:16px 18px; margin-top:12px;
	overflow:hidden; text-decoration:none; color:#fff;
	box-shadow:0 6px 22px rgba(5,25,17,.32);
	transition:transform .18s ease, box-shadow .18s ease;
}
#v-index .vi-promo-pwg:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(5,25,17,.42); }
#v-index .vi-promo-pwg:active{ transform:translateY(0); }
#v-index .vi-promo-pwg-icon{
	flex-shrink:0; width:52px; height:52px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(52,211,153,.18); color:#34d399; font-size:22px;
}
@media(max-width:480px){
	#v-index .vi-promo-pwg{ flex-wrap:wrap; }
	#v-index .vi-promo-pwg .vi-promo-sub{ display:none; }
	#v-index .vi-promo-pwg .vi-promo-cta{ margin-left:auto; }
}

/* ── 이미지 편집 올인원 도구 프로모 카드 — 앰버 톤 (2026-09-08 추가) ── */
#v-index .vi-promo-ie{
	position:relative; display:flex; align-items:center; gap:14px;
	background:radial-gradient(120% 180% at 88% 50%, #3b2b0d 0%, #221708 55%, #100b04 100%);
	border-radius:14px; padding:16px 18px; margin-top:12px;
	overflow:hidden; text-decoration:none; color:#fff;
	box-shadow:0 6px 22px rgba(25,17,5,.32);
	transition:transform .18s ease, box-shadow .18s ease;
}
#v-index .vi-promo-ie:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(25,17,5,.42); }
#v-index .vi-promo-ie:active{ transform:translateY(0); }
#v-index .vi-promo-ie-icon{
	flex-shrink:0; width:52px; height:52px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(245,158,11,.18); color:#f59e0b; font-size:22px;
}
@media(max-width:480px){
	#v-index .vi-promo-ie{ flex-wrap:wrap; }
	#v-index .vi-promo-ie .vi-promo-sub{ display:none; }
	#v-index .vi-promo-ie .vi-promo-cta{ margin-left:auto; }
}

/* ── 나만의 스케줄 프로모 카드 — 시안 톤(회원전용) (2026-09-08 추가) ── */
#v-index .vi-promo-sc{
	position:relative; display:flex; align-items:center; gap:14px;
	background:radial-gradient(120% 180% at 50% 85%, #0d333b 0%, #082022 55%, #041012 100%);
	border-radius:14px; padding:16px 18px; margin-top:12px;
	overflow:hidden; text-decoration:none; color:#fff;
	box-shadow:0 6px 22px rgba(5,20,23,.32);
	transition:transform .18s ease, box-shadow .18s ease;
}
#v-index .vi-promo-sc:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(5,20,23,.42); }
#v-index .vi-promo-sc:active{ transform:translateY(0); }
#v-index .vi-promo-sc-icon{
	flex-shrink:0; width:52px; height:52px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(34,211,238,.18); color:#22d3ee; font-size:22px;
}
@media(max-width:480px){
	#v-index .vi-promo-sc{ flex-wrap:wrap; }
	#v-index .vi-promo-sc .vi-promo-sub{ display:none; }
	#v-index .vi-promo-sc .vi-promo-cta{ margin-left:auto; }
}

@media(max-width:480px){
	#v-index .vi-promo-tool{ flex-wrap:wrap; }
	#v-index .vi-promo-tool .vi-promo-sub{ display:none; }
	#v-index .vi-promo-tool .vi-promo-cta{ margin-left:auto; }
}

/* 섹션 헤더 */
#v-index .vi-section-head{
	display:flex; align-items:center; justify-content:space-between;
	padding:22px 0 12px;
}
#v-index .vi-section-tit{
	display:flex; align-items:center; gap:8px;
	font-size:16px; font-weight:900; color:var(--vi-ink);
}
#v-index .vi-section-tit i{ color:var(--vi-blue); font-size:15px; }
#v-index .vi-section-more{
	font-size:12px; font-weight:700; color:var(--vi-sub);
	text-decoration:none; border:1px solid var(--vi-line);
	border-radius:6px; padding:5px 12px; background:#fff;
	display:inline-flex; align-items:center; gap:4px; transition:all .14s;
}
#v-index .vi-section-more:hover{ background:var(--vi-navy); color:#fff; border-color:var(--vi-navy); }

/* 공용 카드 목록 */
#v-index .vi-list{ display:flex; flex-direction:column; gap:10px; }
#v-index .vi-card{
	position:relative; display:flex; align-items:stretch;
	background:#fff; border:1px solid var(--vi-line); border-radius:14px;
	overflow:hidden; transition:box-shadow .15s, transform .12s; cursor:pointer;
}
#v-index .vi-card:hover{ box-shadow:0 4px 20px rgba(15,39,68,.10); transform:translateY(-1px); }
#v-index .vi-card-link{ position:absolute; inset:0; z-index:1; }

/* 액센트 바 */
#v-index .vi-accent{ width:5px; flex-shrink:0; background:var(--vi-gray); }
#v-index .vi-type-free .vi-accent{ background:var(--vi-green); }
#v-index .vi-type-pay  .vi-accent{ background:var(--vi-blue); }
#v-index .vi-accent-blog{ background:#0ea5e9; }

/* 카드 본문 */
#v-index .vi-body{ flex:1; min-width:0; padding:14px 12px; }
#v-index .vi-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
#v-index .vi-badge{
	display:inline-flex; align-items:center; gap:3px;
	font-size:11px; font-weight:800; padding:3px 9px; border-radius:20px; white-space:nowrap;
}
#v-index .vi-b-free  { background:#dcfce7; color:var(--vi-green); }
#v-index .vi-b-pay   { background:var(--vi-blue-s); color:var(--vi-blue); }
#v-index .vi-b-hidden,
#v-index .vi-b-closed{ background:#f1f5f9; color:var(--vi-sub); }
#v-index .vi-b-blog  { background:#f0f9ff; color:#0369a1; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
#v-index .vi-date{ font-size:11px; color:var(--vi-gray); white-space:nowrap; flex-shrink:0; }
#v-index .vi-title{
	font-size:15px; font-weight:900; color:var(--vi-ink);
	margin:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#v-index .vi-desc{
	font-size:13px; color:var(--vi-sub); margin:0 0 10px;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#v-index .vi-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:12px; color:var(--vi-sub); }
#v-index .vi-meta-sep{ color:var(--vi-line); }
#v-index .vi-go{
	display:flex; align-items:center; justify-content:center;
	width:36px; flex-shrink:0; color:var(--vi-line); font-size:13px; transition:color .13s;
}
#v-index .vi-card:hover .vi-go{ color:var(--vi-blue); }

/* API 그리드 */
#v-index .vi-api-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#v-index .vi-api-card{
	position:relative; background:#fff; border:1px solid var(--vi-line);
	border-radius:14px; padding:16px;
	transition:box-shadow .15s, transform .12s; cursor:pointer;
}
#v-index .vi-api-card:hover{ box-shadow:0 4px 20px rgba(15,39,68,.10); transform:translateY(-1px); }
#v-index .vi-api-icon{
	width:34px; height:34px; background:var(--vi-blue-s); border-radius:9px;
	display:flex; align-items:center; justify-content:center;
	color:var(--vi-blue); font-size:13px; margin-bottom:10px;
}
#v-index .vi-api-name{ font-size:13px; font-weight:900; color:var(--vi-ink); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#v-index .vi-api-desc{ font-size:12px; color:var(--vi-sub); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#v-index .vi-api-foot{ display:flex; gap:10px; margin-top:10px; font-size:11px; color:var(--vi-gray); }

/* 더보기 버튼 */
#v-index .vi-more{ text-align:center; margin:12px 0 4px; }
#v-index .vi-more a{
	display:inline-flex; align-items:center; gap:6px;
	font-size:13px; font-weight:700; color:var(--vi-ink);
	border:1px solid var(--vi-line); border-radius:8px; padding:10px 24px;
	background:#fff; text-decoration:none; transition:all .14s;
}
#v-index .vi-more a:hover{ background:var(--vi-navy); border-color:var(--vi-navy); color:#fff; }

@media(max-width:480px){
	#v-index .vi-api-grid{ grid-template-columns:1fr; }
	#v-index .vi-title{ font-size:14px; }
	#v-index .vi-desc{ font-size:12px; }
}