/* ═══════════════════════════════════════════════════════════
   SOKCHOPEAK · REALTIME.CSS  v2
   Dark editorial · 속초 오션 팔레트
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Bebas+Neue&display=swap');

/* ── Variables ── */
:root {
    --rt-bg:       #0a0d12;
    --rt-bg2:      #0d1018;
    --rt-surf:     #131920;
    --rt-surf2:    #1a2230;
    --rt-border:   rgba(255,255,255,0.07);
    --rt-border2:  rgba(255,255,255,0.12);
    --rt-text:     #e2eaf5;
    --rt-muted:    #6b7d93;
    --rt-accent:   #00c6ff;
    --rt-food:     #ff6b35;
    --rt-gold:     #f5c842;
    --rt-green:    #4ade80;
    --rt-r:        14px;
    --rt-r-sm:     9px;
    --rt-max:      1160px;
    --rt-ko:       'Noto Sans KR', sans-serif;
    --rt-disp:     'Bebas Neue', sans-serif;
}

/* ── Reset ── */
.rt-page *, .rt-page *::before, .rt-page *::after { box-sizing:border-box; margin:0; padding:0; }
.rt-page a { text-decoration:none; color:inherit; }
.rt-page button { background:none; border:none; cursor:pointer; font:inherit; color:inherit; }
.rt-page svg { display:inline-block; vertical-align:middle; }

/* ═══════════════════ PAGE ═══════════════════ */
.rt-page {
    background: var(--rt-bg);
    color: var(--rt-text);
    font-family: var(--rt-ko);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ═══════════════════ HERO ═══════════════════ */
.rt-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 24px 64px;
    overflow: hidden;
}
.rt-hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 18% 55%, rgba(0,198,255,.14) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 18%, rgba(255,107,53,.11) 0%, transparent 52%),
        linear-gradient(180deg, #090c11 0%, #0e1622 100%);
}
.rt-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,198,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,198,255,.035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 78%);
}
.rt-hero__orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px);
    animation: rtOrb 9s ease-in-out infinite;
}
.rt-hero__orb--1 { width:440px; height:440px; background:rgba(0,198,255,.13); top:-110px; left:-90px; animation-delay:0s; }
.rt-hero__orb--2 { width:320px; height:320px; background:rgba(255,107,53,.11); bottom:-70px; right:8%; animation-delay:-3.5s; }
.rt-hero__orb--3 { width:220px; height:220px; background:rgba(245,200,66,.07); top:35%; right:28%; animation-delay:-6s; }
@keyframes rtOrb { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-28px) scale(1.04)} }

.rt-hero__content { position:relative; z-index:2; text-align:center; max-width:720px; }

.rt-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,198,255,.1); border: 1px solid rgba(0,198,255,.3);
    color: var(--rt-accent);
    font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    padding: 6px 16px; border-radius: 100px; margin-bottom: 22px;
}
.rt-hero__pulse {
    width: 7px; height: 7px; background: var(--rt-accent); border-radius: 50%; display: inline-block;
    animation: rtPulse 1.6s ease-in-out infinite;
}
@keyframes rtPulse { 0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(0,198,255,.5)} 50%{opacity:.7;transform:scale(1.2);box-shadow:0 0 0 6px rgba(0,198,255,0)} }

.rt-hero__title {
    font-size: clamp(2.3rem, 5.5vw, 4rem);
    font-weight: 900; line-height: 1.15; letter-spacing: -.03em;
    color: #fff; margin-bottom: 14px;
}
.rt-hero__title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--rt-accent), var(--rt-food));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rt-hero__sub { color: var(--rt-muted); font-size: .95rem; font-weight: 300; margin-bottom: 28px; }

/* 핫 트렌드 버튼 */
.rt-hero__hot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin-bottom: 32px;
}
.rt-hero__hot-label {
    font-size: .75rem; font-weight: 700; color: var(--rt-gold);
    background: rgba(245,200,66,.1); border: 1px solid rgba(245,200,66,.25);
    padding: 5px 12px; border-radius: 100px; letter-spacing: .05em;
}
.rt-hero__hot-btn {
    font-size: .78rem; font-weight: 600; color: var(--rt-text);
    background: rgba(255,255,255,.06); border: 1px solid var(--rt-border2);
    padding: 6px 14px; border-radius: 100px;
    transition: background .2s, border-color .2s, color .2s;
}
.rt-hero__hot-btn:hover { background: rgba(0,198,255,.12); border-color: rgba(0,198,255,.4); color: var(--rt-accent); }

/* 통계 */
.rt-hero__stats {
    display: flex; align-items: center; justify-content: center; gap: 20px;
}
.rt-hero__stat { text-align: center; }
.rt-hero__stat strong {
    display: block; font-family: var(--rt-disp); font-size: 1.7rem; color: #fff;
    letter-spacing: .06em; line-height: 1;
}
.rt-hero__stat span { font-size: .68rem; color: var(--rt-muted); margin-top: 3px; display: block; letter-spacing: .04em; }
.rt-hero__stat-div { width: 1px; height: 28px; background: var(--rt-border2); }

/* ═══════════════════ TABS ═══════════════════ */
.rt-tabs-wrap {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,13,18,.94);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--rt-border);
    transition: box-shadow .3s;
}
.rt-tabs-wrap.is-stuck { box-shadow: 0 6px 32px rgba(0,0,0,.55); }

.rt-tabs-row {
    max-width: var(--rt-max); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; gap: 16px;
}

/* nav는 relative + overflow-x 스크롤 */
.rt-tabs {
    position: relative;           /* ← 인디케이터 기준점 */
    display: flex; align-items: stretch;
    overflow-x: auto; scrollbar-width: none;
    flex: 1;
}
.rt-tabs::-webkit-scrollbar { display: none; }

.rt-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 17px 20px;
    font-size: .85rem; font-weight: 500;
    color: var(--rt-muted); white-space: nowrap;
    transition: color .2s;
    position: relative; z-index: 1;
    background: none; border: none; cursor: pointer;
}
.rt-tab:hover { color: var(--rt-text); }
.rt-tab.is-active { color: #fff; font-weight: 700; }

/* 슬라이딩 인디케이터 — nav 내부에 absolute */
.rt-tab-ink {
    position: absolute;
    bottom: 0; height: 2px;
    background: linear-gradient(90deg, var(--rt-accent), var(--rt-food));
    border-radius: 2px 2px 0 0;
    opacity: 0;
    transition: left .32s cubic-bezier(.34,1.56,.64,1), width .32s cubic-bezier(.34,1.56,.64,1), opacity .2s;
    pointer-events: none;
}

/* AI 필터 */
.rt-ai-filter {
    display: flex; align-items: center; gap: 7px;
    flex-shrink: 0; padding: 7px 14px;
    background: rgba(0,198,255,.07); border: 1px solid rgba(0,198,255,.2);
    border-radius: 100px; cursor: pointer;
    transition: background .2s;
}
.rt-ai-filter:hover { background: rgba(0,198,255,.13); }
.rt-ai-filter__dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--rt-green);
    animation: rtPulseGreen 1.8s ease-in-out infinite;
}
@keyframes rtPulseGreen { 0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6)} 50%{box-shadow:0 0 0 4px rgba(74,222,128,0)} }
.rt-ai-filter__label { font-size: .75rem; font-weight: 700; color: var(--rt-accent); }
.rt-ai-filter__tag { font-size: .68rem; color: var(--rt-muted); }

/* ═══════════════════ BODY ═══════════════════ */
.rt-body { max-width: var(--rt-max); margin: 0 auto; padding: 40px 24px 80px; }

.rt-panel { display: none; animation: rtPanelIn .3s ease forwards; }
.rt-panel.is-active { display: block; }
@keyframes rtPanelIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ═══════════════════ SECTION ═══════════════════ */
.rt-section { margin-bottom: 52px; }

.rt-section__head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px; padding-bottom: 18px;
    border-bottom: 1px solid var(--rt-border);
}
.rt-section__icon {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.rt-section__icon svg { width: 20px; height: 20px; }
.rt-section__icon--where { background:rgba(0,198,255,.1); border:1px solid rgba(0,198,255,.22); }
.rt-section__icon--where svg { stroke: var(--rt-accent); fill: none; }
.rt-section__icon--food  { background:rgba(255,107,53,.1); border:1px solid rgba(255,107,53,.22); }
.rt-section__icon--food  svg { stroke: var(--rt-food); fill: none; }

.rt-section__info { flex: 1; }
.rt-section__title { font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.rt-section__title span { font-size: .88rem; font-weight: 400; color: var(--rt-muted); margin-left: 7px; }
.rt-section__sub { font-size: .73rem; color: var(--rt-muted); margin-top: 2px; }
.rt-section__more {
    font-size: .75rem; font-weight: 600; color: var(--rt-muted);
    border: 1px solid var(--rt-border); padding: 7px 14px; border-radius: 100px;
    white-space: nowrap; flex-shrink: 0;
    transition: color .2s, border-color .2s;
}
.rt-section__more:hover { color: var(--rt-accent); border-color: rgba(0,198,255,.4); }

/* ═══════════════════ GRID ═══════════════════ */
.rt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.rt-grid--mt { margin-top: 18px; }

/* ═══════════════════ CARD ═══════════════════ */
.rt-card {
    background: var(--rt-surf);
    border: 1px solid var(--rt-border);
    border-radius: var(--rt-r);
    overflow: hidden; cursor: pointer;
    opacity: 0; transform: translateY(18px);
    transition: transform .3s ease, box-shadow .3s ease, border-color .25s;
}
.rt-card.rt-card--in {
    animation: rtCardIn .42s ease forwards;
}
@keyframes rtCardIn { to{opacity:1;transform:translateY(0)} }
.rt-card:hover { transform: translateY(-5px); box-shadow: 0 10px 36px rgba(0,0,0,.55); border-color: rgba(0,198,255,.18); }

.rt-card__img { position:relative; aspect-ratio:4/3; overflow:hidden; background:#111820; }
.rt-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; display:block; }
.rt-card:hover .rt-card__img img { transform:scale(1.07); }

.rt-card__cat {
    position:absolute; top:11px; left:11px;
    background:rgba(0,198,255,.75); backdrop-filter:blur(6px);
    color:#fff; font-size:.65rem; font-weight:800; letter-spacing:.07em;
    padding:3px 9px; border-radius:100px;
}
.rt-card__cat--food { background:rgba(255,107,53,.8); }

.rt-card__stats {
    position:absolute; bottom:9px; right:9px;
    display:flex; gap:6px;
}
.rt-card__stats span {
    display:flex; align-items:center; gap:4px;
    background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
    color:rgba(255,255,255,.85); font-size:.68rem;
    padding:3px 7px; border-radius:100px;
}

.rt-card__body { padding:15px; }
.rt-card__title {
    font-size:.88rem; font-weight:700; color:var(--rt-text);
    line-height:1.4; margin-bottom:5px; letter-spacing:-.01em;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rt-card__desc {
    font-size:.72rem; color:var(--rt-muted); line-height:1.55; margin-bottom:11px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rt-card__author {
    display:flex; align-items:center; gap:7px;
    padding-top:11px; border-top:1px solid var(--rt-border);
}
.rt-card__avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid rgba(255,255,255,.12); }
.rt-card__avatar--text {
    background:linear-gradient(135deg,var(--rt-accent),var(--rt-food));
    display:flex; align-items:center; justify-content:center;
    font-size:.68rem; font-weight:700; color:#fff;
}
.rt-card__author span { font-size:.72rem; color:var(--rt-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ═══════════════════ VALUE CARD (입점 유도) ═══════════════════ */
.rt-value-card {
    position: relative; overflow: hidden;
    border-radius: var(--rt-r); margin: 44px 0;
    background: linear-gradient(135deg, #0c1d2e 0%, #0a1a10 100%);
    border: 1px solid rgba(0,198,255,.22);
}
.rt-value-card--market { background: linear-gradient(135deg, #150f2a 0%, #0c1a1a 100%); border-color: rgba(245,200,66,.22); }

.rt-value-card__glow {
    position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at 0% 50%, rgba(0,198,255,.08) 0%, transparent 60%),
                radial-gradient(ellipse at 100% 50%, rgba(255,107,53,.06) 0%, transparent 60%);
}
.rt-value-card--market .rt-value-card__glow {
    background: radial-gradient(ellipse at 0% 50%, rgba(245,200,66,.08) 0%, transparent 60%);
}

.rt-value-card__content {
    position:relative; z-index:1;
    display:flex; align-items:center; gap:32px; padding:36px 40px;
}
.rt-value-card__left { flex:1; }
.rt-value-card__eyebrow {
    display:inline-block; font-size:.73rem; font-weight:700; letter-spacing:.06em;
    color:var(--rt-accent); margin-bottom:12px;
    background:rgba(0,198,255,.08); border:1px solid rgba(0,198,255,.2);
    padding:4px 12px; border-radius:100px;
}
.rt-value-card--market .rt-value-card__eyebrow { color:var(--rt-gold); background:rgba(245,200,66,.08); border-color:rgba(245,200,66,.22); }

.rt-value-card__title {
    font-size: clamp(1.25rem,2.5vw,1.75rem);
    font-weight:900; color:#fff; line-height:1.25;
    letter-spacing:-.03em; margin-bottom:12px;
}
.rt-value-card__title em {
    font-style:normal;
    background:linear-gradient(90deg,var(--rt-accent),var(--rt-food));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.rt-value-card--market .rt-value-card__title em {
    background:linear-gradient(90deg,var(--rt-gold),#ff9f43);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.rt-value-card__desc { font-size:.8rem; color:var(--rt-muted); line-height:1.6; }

.rt-value-card__right { flex-shrink:0; min-width:220px; }
.rt-value-card__perks { margin-bottom:20px; display:flex; flex-direction:column; gap:9px; }
.rt-value-card__perk { display:flex; align-items:center; gap:9px; font-size:.8rem; color:var(--rt-text); }
.rt-vc-chk {
    width:20px; height:20px; border-radius:50%; flex-shrink:0;
    background:rgba(0,198,255,.15); border:1px solid rgba(0,198,255,.3);
    display:flex; align-items:center; justify-content:center;
    font-size:.65rem; font-weight:800; color:var(--rt-accent);
}
.rt-value-card--market .rt-vc-chk { background:rgba(245,200,66,.12); border-color:rgba(245,200,66,.3); color:var(--rt-gold); }

.rt-value-card__btn {
    display:block; width:100%; text-align:center;
    background:linear-gradient(135deg,var(--rt-accent),#0097c7);
    color:#fff; font-size:.88rem; font-weight:800; letter-spacing:.02em;
    padding:14px 24px; border-radius:100px;
    box-shadow:0 4px 22px rgba(0,198,255,.35);
    transition:transform .2s, box-shadow .2s;
}
.rt-value-card__btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,198,255,.5); }
.rt-value-card--market .rt-value-card__btn { background:linear-gradient(135deg,var(--rt-gold),#d4a017); box-shadow:0 4px 22px rgba(245,200,66,.3); }
.rt-value-card--market .rt-value-card__btn:hover { box-shadow:0 8px 32px rgba(245,200,66,.45); }

/* ═══════════════════ EMPTY ═══════════════════ */
.rt-empty { text-align:center; padding:80px 24px; color:var(--rt-muted); font-size:.9rem; }

/* ═══════════════════ NOBLE WEB SHOWCASE ═══════════════════ */
.rt-powered {
    background:var(--rt-bg2);
    border-top:1px solid var(--rt-border);
    padding:28px 24px 20px;
}
.rt-powered__inner {
    max-width:var(--rt-max); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    flex-wrap:wrap;
}
.rt-powered__left { display:flex; align-items:center; gap:14px; }

/* 이퀄라이저 바 */
.rt-powered__bars { display:flex; align-items:flex-end; gap:3px; height:22px; }
.rt-powered__bars span { display:block; width:3px; background:var(--rt-accent); border-radius:2px; animation:rtBarEq 1.3s ease-in-out infinite; }
.rt-powered__bars span:nth-child(1){height:55%; animation-delay:0s}
.rt-powered__bars span:nth-child(2){height:100%;animation-delay:.15s}
.rt-powered__bars span:nth-child(3){height:40%; animation-delay:.3s}
.rt-powered__bars span:nth-child(4){height:75%; animation-delay:.1s}
.rt-powered__bars span:nth-child(5){height:55%; animation-delay:.22s}
@keyframes rtBarEq { 0%,100%{transform:scaleY(.3);opacity:.5} 50%{transform:scaleY(1);opacity:1} }

.rt-powered__brand strong { display:block; font-size:.75rem; font-weight:800; color:var(--rt-accent); letter-spacing:.12em; text-transform:uppercase; }
.rt-powered__brand em { display:block; font-style:normal; font-size:.65rem; color:var(--rt-muted); margin-top:2px; letter-spacing:.04em; }

/* 메트릭 */
.rt-powered__metrics { display:flex; align-items:center; gap:0; }
.rt-powered__metric { text-align:center; padding:0 22px; }
.rt-powered__val {
    font-family:var(--rt-disp); font-size:1.7rem; color:#fff;
    letter-spacing:.04em; line-height:1;
}
.rt-powered__unit { font-size:.65rem; color:var(--rt-muted); margin-left:2px; font-weight:600; }
.rt-powered__mlabel { display:block; font-size:.65rem; color:var(--rt-muted); margin-top:3px; letter-spacing:.04em; }
.rt-powered__msep { width:1px; height:36px; background:var(--rt-border2); }

.rt-powered__status { display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; color:var(--rt-green); letter-spacing:.1em; }
.rt-powered__dot { width:7px; height:7px; background:var(--rt-green); border-radius:50%; animation:rtPulseGreen 1.6s ease-in-out infinite; }

.rt-powered__proof {
    max-width:var(--rt-max); margin:14px auto 0;
    text-align:center; font-size:.72rem; color:var(--rt-muted); letter-spacing:.02em;
}
.rt-powered__proof strong { color:var(--rt-accent); }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1024px) {
    .rt-grid { grid-template-columns: repeat(2,1fr); gap:16px; }
}

@media (max-width: 768px) {
    .rt-tabs-row { padding: 0 12px; gap: 8px; }
    .rt-tab { padding: 15px 13px; font-size: .78rem; gap: 5px; }
    .rt-ai-filter { display: none; }
    .rt-value-card__content { flex-direction:column; padding:28px 24px; gap:24px; }
    .rt-value-card__right { width:100%; }
    .rt-value-card__btn { padding:13px; }
}

@media (max-width: 640px) {
    .rt-hero { min-height:380px; padding:64px 16px 44px; }
    .rt-grid { grid-template-columns:1fr; gap:14px; }
    .rt-body { padding:24px 16px 60px; }
    .rt-section__head { flex-wrap:wrap; }
    .rt-section__more { order:3; }
    .rt-powered__inner { justify-content:center; flex-direction:column; gap:16px; text-align:center; }
    .rt-powered__metrics { width:100%; justify-content:center; }
    .rt-hero__hot { flex-direction:column; align-items:center; gap:6px; }
}