/* ==========================================================
   LUMIA VERSUS 허브 — 전용 스타일 (.h-* 접두)
   상속: lumi-hud.css(무수정) + shell.css / 테마: data-theme="versus"
   ========================================================== */

.h-screen{--shell-w:1180px;justify-content:center;gap:clamp(18px,3vh,32px);}

/* ---------- 헤로 ---------- */
.h-hero{display:grid;gap:18px;justify-items:center;text-align:center;padding-top:clamp(6px,3vh,26px);}
@media (min-width:860px){
  .h-hero{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;
    align-items:center;gap:30px;}
}
.h-hero-lumi{position:relative;width:clamp(96px,12vw,124px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;border:2px solid var(--accent);background:var(--bg-deep);
  box-shadow:0 0 0 5px rgba(10,16,32,.6),0 0 30px var(--accent-glow);flex:none;}
.h-hero-lumi img{width:100%;height:100%;object-fit:cover;object-position:47% 44%;}
.h-ring{position:absolute;inset:-16px;border:1px dashed rgba(166,208,255,.34);border-radius:50%;
  animation:h-spin 18s linear infinite;pointer-events:none;}
@keyframes h-spin{to{transform:rotate(360deg)}}
.h-hero-text{display:grid;gap:12px;justify-items:inherit;min-width:0;}
.h-title{margin:4px 0 0;font-size:clamp(28px,5.4vw,46px);font-weight:800;line-height:1.14;
  letter-spacing:-.02em;text-shadow:var(--text-shadow);}
.h-title em{font-style:normal;color:var(--accent-bright);
  text-shadow:0 0 22px color-mix(in srgb,var(--accent-bright) 45%,transparent);}
.h-bubble{max-width:560px;}
.h-bubble .hud-bubble-body{background:rgba(10,16,32,.72);}

/* ---------- 카드 2장 ---------- */
.h-cards{display:grid;gap:clamp(14px,2.4vw,24px);}
@media (min-width:820px){.h-cards{grid-template-columns:1fr 1fr;}}
.h-card{position:relative;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,rgba(24,30,48,.5),rgba(6,12,24,.72));
  border:1px solid rgba(53,102,117,.5);overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);}
.h-card::before,.h-card::after{content:"";position:absolute;width:14px;height:14px;z-index:3;
  pointer-events:none;opacity:0;transition:opacity var(--dur) var(--ease);}
.h-card::before{top:-1px;left:-1px;border-top:2px solid var(--accent-bright);
  border-left:2px solid var(--accent-bright);}
.h-card::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent-bright);
  border-right:2px solid var(--accent-bright);}
.h-card:hover{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--accent),0 14px 34px rgba(0,0,0,.45),0 0 22px var(--accent-glow);}
.h-card:hover::before,.h-card:hover::after{opacity:1;}
.h-card:focus-visible{outline:2px solid var(--accent-line);outline-offset:3px;}

/* 미리보기 무드 */
.h-card-prev{position:relative;height:clamp(150px,20vh,200px);overflow:hidden;
  border-bottom:1px solid rgba(53,102,117,.42);
  background:radial-gradient(60% 70% at 50% 84%,color-mix(in srgb,var(--accent) 20%,transparent),
    rgba(6,12,24,.4) 72%);}
.h-prev-wc{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:6px;padding:10px 14px 0;}
.h-prev-por{height:100%;}
.h-prev-por>img{object-position:50% 100%;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));}
.h-prev-vs{align-self:center;padding:5px 11px;background:var(--accent);color:var(--text-on-accent);
  font:800 11.5px/1 var(--font);letter-spacing:.08em;transform:skewX(-12deg);
  box-shadow:0 0 0 3px rgba(6,12,24,.85),0 0 14px var(--accent-glow);}
.h-prev-vs>span{display:inline-block;transform:skewX(12deg);}

.h-prev-tl{display:grid;align-content:center;justify-items:center;gap:7px;padding:14px 18px;}
.h-prev-row{display:grid;grid-template-columns:24px auto;align-items:center;gap:10px;
  padding:5px 12px 5px 7px;background:rgba(6,12,24,.5);border-left:3px solid var(--row);}
.h-prev-row b{font:800 15px/1 var(--font);color:var(--row);text-align:center;}
.h-prev-row span{display:flex;gap:5px;}
.h-prev-face{display:block;width:34px;height:34px;overflow:hidden;background:rgba(6,12,24,.7);
  border:1px solid rgba(123,180,203,.22);flex:none;}
.h-prev-face img{width:100%;height:100%;object-fit:cover;object-position:50% 3%;
  opacity:0;transition:opacity 200ms var(--ease);}
.h-prev-face img.is-ready{opacity:1;}

/* 본문 */
.h-card-body{display:grid;gap:9px;align-content:start;padding:clamp(14px,1.8vw,20px);}
.h-card-tag{justify-self:start;transform:skewX(-12deg);}
.h-card-tag>span{font-size:10px;letter-spacing:.16em;}
.h-card-title{margin:2px 0 0;font-size:clamp(19px,2.4vw,25px);font-weight:800;letter-spacing:-.01em;
  line-height:1.2;}
.h-card-desc{margin:0;font-size:12.5px;line-height:1.65;color:var(--text-muted);word-break:keep-all;}
.h-card-meta{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:5px;}
.h-card-meta li{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.5;
  color:var(--text-option);word-break:keep-all;}
.h-card-meta li::before{content:"";flex:none;width:10px;height:6px;margin-top:5px;
  background:var(--accent);clip-path:polygon(0 0,100% 0,60% 100%,0 100%);}
.h-card-go{display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font:700 12px/1 var(--font);letter-spacing:.12em;color:var(--accent-bright);}
.h-card-go::after{content:"";width:14px;height:8px;background:currentColor;
  clip-path:polygon(0 32%,62% 32%,62% 0,100% 50%,62% 100%,62% 68%,0 68%);
  transition:transform var(--dur) var(--ease);}
.h-card:hover .h-card-go::after{transform:translateX(4px);}

/* ---------- 하단 안내 ---------- */
.h-note{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:12px;margin:0;
  padding:10px 14px 10px 10px;border:1px dashed rgba(123,180,203,.28);background:rgba(6,12,24,.36);}
.h-ggang{width:44px;height:44px;object-fit:contain;}
.h-note span{word-break:keep-all;line-height:1.6;}

@media (prefers-reduced-motion:reduce){.h-ring{animation:none;}}