/* 타이틀 */
.rni_box { width:100%; }
.rni_box .title_box {
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:2px solid #eee; margin-bottom:10px; padding-bottom:6px;
}
.rni_box .title_box .title { font-size:1.2rem; font-weight:bold; }
.rni_box .title_box .more a { font-size:0.9rem; color:#0073e6; text-decoration:none; }

/* 그리드: 지정 컬럼만 사용 */
.rni_grid {
  --gap: 12px;
  --cols: 6;
  --anim: 0.5s;
  --radius: 10px;

  --fs-title: 0.95rem;
  --fs-author: 0.88rem;
  --fs-stats: 0.88rem;
  --fw-title: 600;

  --color-title: #222;
  --color-author: #666;
  --color-views: #666;
  --color-comments: #666;
  --color-counts: #ff3366;

  --polaroid-bg: #ffffff;

  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols), 1fr);
}

/* 카드 */
.rni_item {
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* 이미지 비율 박스 */
.thumb_box { position:relative; width:100%; border-bottom:1px solid rgba(0,0,0,0.06); background:#fff; }
.thumb_box::before { content:""; display:block; padding-top: var(--ratio, 75%); }
.thumb_box > a { position:absolute; inset:0; display:block; }
.thumb_img {
  width:100%; height:100%; object-position:center; display:block;
  transition: transform var(--anim) ease, box-shadow var(--anim) ease, opacity var(--anim) ease, filter var(--anim) ease;
}
.type-crop  .thumb_img { object-fit: cover; }
.type-ratio .thumb_img { object-fit: contain; background:#fff; }

/* 캡션: 제목 → 작성자(하트/추천) → 조회·댓글 */
.caption_area { padding: 10px; }
.title_text {
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
  line-height:1.35; text-align:center; color: var(--color-title);
}
.title_text a { color: inherit; text-decoration:none; }

.author_line {
  font-size: var(--fs-author);
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; align-items:center;
}
.author_line .author { color: var(--color-author); }
.author_line .likes  { color: var(--color-counts); display:inline-flex; align-items:center; gap:4px; }
.author_line .likes .count { font-weight:600; }

.stats_line {
  font-size: var(--fs-stats);
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.stats_line .views    { color: var(--color-views); }
.stats_line .comments { color: var(--color-comments); }
.stats_line .count    { color: var(--color-counts); font-weight:600; }
.meta_line .meta      { white-space:nowrap; }

/* 아이콘(이모지) */
.icon { display:inline-block; width:1em; height:1em; line-height:1; }
.icon.heart::before   { content:"♥"; color:#ff2f5b; }
.icon.user::before    { content:"👤"; }
.icon.eye::before     { content:"👁"; }
.icon.comment::before { content:"💬"; }

/* 프레임(액자) */
.frame-none    { border:none; box-shadow:none; }
.frame-border  { border:1px solid rgba(0,0,0,0.15); }
.frame-rounded { border-radius: calc(var(--radius) + 6px); }
.frame-shadowed{ box-shadow: 0 10px 24px rgba(0,0,0,0.22); }
.frame-double  { position:relative; }
.frame-double::after {
  content:""; position:absolute; inset:8px; border-radius: calc(var(--radius) - 2px);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,0.12); pointer-events:none;
}
.frame-inset { box-shadow: inset 0 2px 6px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.7); }
.frame-glass {
  position:relative; background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.15));
  box-shadow: 0 10px 28px rgba(0,0,0,0.22); backdrop-filter: blur(2px);
}
.frame-glass::before {
  content:""; position:absolute; top:6px; left:8px; right:8px; height:30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  border-radius: 8px; pointer-events:none;
}

/* 폴라로이드(배경색 커스터마이즈) */
.frame-polaroid .thumb_box { background: var(--polaroid-bg); }
.frame-polaroid .caption_area { background: var(--polaroid-bg); }
.frame-polaroid .thumb_box::before { padding-top: calc(var(--ratio, 75%) + 18px); }
.frame-polaroid .thumb_box > a { top:9px; left:9px; right:9px; bottom:0; }
.frame-polaroid .thumb_img { border-radius: 4px; background: var(--polaroid-bg); }

/* 호버/애니메이션: 전체 세트 */
.hover-none  .thumb_img:hover { transform:none; box-shadow:none; }
.hover-zoom  .thumb_img:hover { transform: scale(1.08); }
.hover-fade  .thumb_img:hover { opacity:0.75; }
.hover-rotate .thumb_img:hover { transform: rotate(2.5deg) scale(1.04); }
.hover-shadow .thumb_img:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.35); }
.hover-blur .thumb_img:hover { filter: blur(1px); transform: scale(1.02); }
.hover-grayscale .thumb_img:hover { filter: grayscale(100%); transform: scale(1.02); }
.hover-tilt .thumb_img { transform-origin:center; }
.hover-tilt .thumb_img:hover { transform: perspective(600px) rotateY(6deg) rotateX(2deg) scale(1.03); }
.hover-lift .thumb_img:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0,0,0,0.28); }
.hover-shine .thumb_box { position:relative; }
.hover-shine .thumb_box::after {
  content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); transition: left var(--anim) ease; pointer-events:none;
}
.hover-shine .thumb_box:hover::after { left:125%; }
.hover-bounce .thumb_img:hover { animation: rni-bounce var(--anim) ease; }
@keyframes rni-bounce { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.hover-float .thumb_img:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0,0,0,0.28); }
.hover-kenburns .thumb_img { transform-origin:center; }
.hover-kenburns .thumb_img:hover { transform: scale(1.15); }
.hover-pulse .thumb_img:hover { animation: rni-pulse var(--anim) ease-in-out; }
@keyframes rni-pulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }
.hover-slide-up .thumb_img:hover { transform: translateY(-10px); }
.hover-slide-left .thumb_img:hover { transform: translateX(-10px); }
.hover-tilt-3d .thumb_img { transform-origin:center; }
.hover-tilt-3d .thumb_img:hover { transform: perspective(600px) rotateY(6deg) rotateX(2deg) scale(1.03); }
.hover-glow .thumb_img:hover {
  filter: brightness(1.05) saturate(1.05);
  box-shadow: 0 0 14px rgba(77,163,255,.55), 0 0 22px rgba(77,163,255,.85);
}