/* RIME_INDEX_REMODEL v3 — 여백·크기·배치는 원래 그대로. 질감과 광택만 더한다 */

/* 다크모드 톤 */
html[data-theme="dark"]{
  --rb-bg:#0f1217;--rb-surface:#171b22;--rb-surface2:#1c2129;--rb-line:#272d37;
  --rb-text:#eef0f4;--rb-muted:#a2a8b4;
  --rb-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 26px rgba(0,0,0,.28);
  --rb-shadow-hover:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px rgba(0,0,0,.4);
}

/* 일반 카드 질감 — 위에서 아래로 은은한 그라데이션, 윗면 하이라이트 */
.rb-card{
  background:linear-gradient(180deg,var(--rb-surface),var(--rb-surface2));
  border-color:color-mix(in srgb,var(--rb-line) 85%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--rb-shadow);
}
html[data-theme="dark"] .rb-card{background:linear-gradient(180deg,#1a1e26,#161a21);box-shadow:var(--rb-shadow)}
.rb-card:hover{border-color:color-mix(in srgb,var(--rb-text) 18%,var(--rb-line))}

/* 아이콘 칸 광택 */
.rb-card-icon{
  background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--rb-surface) 55%,#fff),var(--rb-surface2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rb-line) 70%,transparent);
}
html[data-theme="dark"] .rb-card-icon{background:radial-gradient(circle at 50% 28%,#262c36,#161a20)}
.rb-arrow{transition:transform .15s}
.rb-card:hover .rb-arrow{transform:translateX(3px)}

/* 큰 카드 광택 — 아이콘 뒤 은은한 빛, 아이콘 그림자 */
.rb-hero::before{
  content:"";position:absolute;right:-40px;top:50%;width:300px;height:300px;transform:translateY(-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--svc-light) 90%,#fff) 0%,transparent 65%);
  opacity:.9;pointer-events:none;z-index:0;
}
html[data-theme="dark"] .rb-hero::before{background:radial-gradient(circle,color-mix(in srgb,var(--svc-dark) 70%,#8b8bff 12%) 0%,transparent 65%);opacity:.8}
.rb-hero-icon{position:relative;z-index:1}
.rb-hero-icon img,.rb-hero-icon svg{filter:drop-shadow(0 18px 24px rgba(20,20,40,.22))}
.rb-go{transition:transform .15s}
.rb-hero:hover .rb-go{transform:translateX(3px)}
@media(max-width:640px){ .rb-hero::before{width:200px;height:200px;right:-50px} }

/* RIME_ARROW_FIT */
@media(max-width:640px){ .rb-arrow{font-size:13px!important;overflow:visible} }