@charset "UTF-8";
/* 운세가 — 홈(SPA)에 삽입되는 서버 렌더링 블록 스타일
   기존 unsega.css 토큰(--primary, --surface …)을 그대로 따른다. */

.home-ssr{
  margin:22px 0 26px;
  padding:18px 16px 20px;
  background:linear-gradient(168deg,rgba(47,37,64,.72),rgba(28,20,40,.72));
  border:1px solid var(--gold-line);
  border-radius:16px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
}
.home-ssr-h{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:clamp(17px,4.6vw,20px);
  font-weight:700;
  line-height:1.42;
  color:var(--primary-lt);
  display:flex;align-items:center;gap:8px;
}
.home-ssr-h::before{content:"";width:3px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--primary-lt),var(--seal));flex-shrink:0}
.home-ssr-h3{
  margin:22px 0 10px;
  font-size:15px;font-weight:700;color:var(--primary-lt);
  letter-spacing:-.01em;
}

.home-ssr-ilju{
  padding:14px;
  background:rgba(20,13,31,.5);
  border:1px solid var(--border);
  border-radius:12px;
}
.home-ssr-lead{margin:0 0 12px;font-size:14px;line-height:1.75;color:var(--text-sub);word-break:keep-all}
.home-ssr-lead strong{color:var(--primary-lt);font-weight:700}
.home-ssr-meta{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.home-ssr-meta li{
  padding:6px 11px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  font-size:12.5px;color:var(--text-dim);
}
.home-ssr-meta b{color:var(--primary-lt);font-weight:700;font-family:var(--font-display)}
.home-ssr-more{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:13.5px;font-weight:700;color:var(--primary-lt);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(240,207,163,.4);
}

/* 띠 12칸 */
.home-ssr-tti{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
@media (min-width:420px){.home-ssr-tti{grid-template-columns:repeat(6,1fr)}}
.home-ssr-tti-i{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:74px;padding:9px 4px;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  text-align:center;transition:border-color .16s,transform .16s;
}
.home-ssr-tti-i:active{transform:scale(.96)}
@media (hover:hover){.home-ssr-tti-i:hover{border-color:var(--gold-line);transform:translateY(-2px)}}
.home-ssr-tti-e{font-size:21px;line-height:1}
.home-ssr-tti-n{font-size:11.5px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.home-ssr-tti-s{font-size:10.5px;color:var(--primary);font-weight:600}

/* 섹션 링크 */
.home-ssr-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.home-ssr-links a{
  display:flex;flex-direction:column;gap:2px;
  min-height:56px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  transition:border-color .16s,background .16s;
}
@media (hover:hover){.home-ssr-links a:hover{border-color:var(--gold-line);background:var(--surface-hover)}}
.home-ssr-links strong{font-size:14.5px;font-weight:700;color:var(--text)}
.home-ssr-links span{font-size:12.5px;color:var(--text-dim);line-height:1.5}

/* 확장된 푸터 내비 */
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin-top:10px}
.footer-nav a{
  font-size:12.5px;color:var(--text-sub);
  min-height:32px;display:inline-flex;align-items:center;
}
@media (hover:hover){.footer-nav a:hover{color:var(--primary-lt)}}

/* noscript 배너 링크 */
.seo-noscript-banner a{color:var(--primary-lt);text-decoration:underline}

/* ── 하단 탭바 (SPA) ──────────────────────────────── */
.app-tabbar{
  position:fixed;left:0;right:0;bottom:0;
  /* 시트(501)·토스트(998)보다 아래. 화면에 고정되는 요소는 탭바뿐이다. */
  z-index:80;
  display:flex;
  max-width:var(--max-w);margin:0 auto;
  background:rgba(14,9,22,.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--gold-line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.app-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--tabbar-h);padding:8px 2px;
  color:var(--text-dim);transition:color .16s;touch-action:manipulation;
}
.app-tab-ic{width:22px;height:22px;display:block}
.app-tab-ic svg{width:100%;height:100%;display:block}
.app-tab-t{font-size:10.5px;font-weight:600;letter-spacing:-.03em;line-height:1.2;white-space:nowrap}
.app-tab.is-on{color:var(--primary-lt)}
.app-tab.is-on .app-tab-ic{filter:drop-shadow(0 0 7px rgba(224,183,132,.45))}
.app-tab:active{color:var(--primary)}
@media (hover:hover){.app-tab:hover{color:var(--text-sub)}}

/* ── 하단 영역 배치 규칙 ───────────────────────────
   '운세 풀이 보기' CTA는 화면 고정이 아니라 본문 맨 아래에 놓인다(.saju-cta-bar).
   따라서 화면에 고정된 것은 탭바뿐이고, 본문은 탭바 높이만큼만 여백을 두면 된다.
   PC(768px~): 상단 메뉴가 있으므로 탭바를 감춘다. */

/* 탭바에 가리지 않도록 본문 하단 여백 확보.
   CTA는 본문 흐름 안에 있으므로 탭바 높이만 고려하면 된다. */
.main-wrap.pb-page-bottom,
.test-wrap.pb-page-bottom{
  padding-bottom:calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom,0px));
}
.footer{
  padding-bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom,0px));
}

/* 시트·다이얼로그가 열리면 탭바를 숨긴다(백드롭이 화면을 덮으므로 CTA 위치는 무관) */
body.sheet-lock .app-tabbar{display:none}

/* PC: 탭바 숨김 — 콘텐츠 페이지(.uc-tabbar)와 동작을 맞춘다 */
@media (min-width:768px){
  .app-tabbar{display:none}
  .main-wrap.pb-page-bottom,
  .test-wrap.pb-page-bottom{padding-bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 16px))}
  .footer{padding-bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px))}
}

/* ── 오늘 1위 띠 하이라이트 ───────────────────────── */
.home-ssr-top{
  display:flex;align-items:center;gap:12px;
  margin:16px 0 6px;padding:14px 15px;
  background:linear-gradient(135deg,rgba(224,183,132,.18),rgba(196,66,63,.10));
  border:1px solid var(--gold-line);border-radius:13px;
  transition:transform .16s,border-color .16s;
}
.home-ssr-top:active{transform:scale(.985)}
@media (hover:hover){.home-ssr-top:hover{border-color:var(--primary)}}
.home-ssr-top-crown{font-size:24px;line-height:1;flex-shrink:0}
.home-ssr-top-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.home-ssr-top-l{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--primary)}
.home-ssr-top-n{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text)}
.home-ssr-top-n b{color:var(--primary-lt)}
.home-ssr-top-d{font-size:12.5px;color:var(--text-sub);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-ssr-top-ar{font-size:19px;color:var(--text-dim);flex-shrink:0}

/* 띠 타일 순위 배지 · 등급별 점수 색 */
.home-ssr-h3-sub{font-size:11.5px;font-weight:500;color:var(--text-dim);margin-left:7px;letter-spacing:0}
.home-ssr-tti-i{position:relative}
.home-ssr-tti-rk{
  position:absolute;top:4px;right:4px;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:800;color:#241a0c;
  background:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.home-ssr-tti-rk.r1{background:#f2cf82}
.home-ssr-tti-rk.r2{background:#cfd3da}
.home-ssr-tti-rk.r3{background:#d9a273}
.home-ssr-tti-s.sg-best{color:#8fdcbd}
.home-ssr-tti-s.sg-good{color:var(--primary-lt)}
.home-ssr-tti-s.sg-mid{color:var(--text-dim)}
.home-ssr-tti-s.sg-low{color:#f0c883}
.home-ssr-tti-s.sg-bad{color:#f0a19d}