*,
*::before,
*::after{ box-sizing:border-box; }

:root{
  --bg:#ffffff;
  --panel:rgba(255,255,255,.92);

  /* (THEME) 로고 색상에 맞춰 자동으로 바뀌는 포인트 컬러 */
  --accent:#1E3A8A;
  --accent2:#60A5FA;
  --accentRGB: 30 58 138;

  /* 기존 변수명 호환(기능 유지) */
  --gold: var(--accent);
  --gold2: var(--accent2);

  /* NOTE: do not override global --muted (theme-driven) */

  /* logo shadow presets */
  --logo-shadow-min: drop-shadow(0 10px 22px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgb(var(--accentRGB) / .10));
  --logo-shadow-presence: drop-shadow(0 14px 34px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgb(var(--accentRGB) / .18));
  --logo-shadow: var(--logo-shadow-min);
  --logo-shadow-boost: var(--logo-shadow-presence);
}

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,system-ui;
  color:var(--text);
}

body[data-logo-shadow="presence"]{ --logo-shadow: var(--logo-shadow-presence); }

.notice-bar{
  position:sticky;
  top:0;
  z-index:1600;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#000;
  font-weight:900;
  font-size:13px;
  padding:10px 12px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.notice-bar a{ color:#000; text-decoration:none; }

/* loader removed */

.header{ text-align:center; padding:18px 0 8px; }
.header .logoLink{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.header .logoImg{
  width:min(132px, 38vw);
  height:auto;
  display:block;
  padding:10px;
  border-radius:18px;
  background:radial-gradient(120px 60px at 50% 40%, rgb(var(--accentRGB) / .16), transparent 70%);
  filter: drop-shadow(0 0 10px rgb(var(--accentRGB) / .25)) drop-shadow(0 0 24px rgb(var(--accentRGB) / .12));
  animation: logoFloat 3.2s ease-in-out infinite;
}
@keyframes logoFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-4px) scale(1.012); } }
@keyframes logoGlow{ 0%,100%{ filter: var(--logo-shadow); opacity:1; } 50%{ filter: var(--logo-shadow-boost); opacity:1; } }
.header .sub{ font-size:12px; color:#9a9a9a; margin-top:6px; }

.section-wrap{ max-width:1100px; margin:0 auto; padding:10px 14px 4px; }
.section{
  background:rgba(18,18,18,.85);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:14px;
  margin-bottom:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.section .title{ font-weight:900; font-size:14px; color:var(--gold2); margin-bottom:8px; }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:900; color:#000; background:linear-gradient(135deg,var(--gold),var(--gold2)); margin-right:6px; }
.section .text{ color:var(--muted); font-size:13px; line-height:1.55; }

/* two-col grid items (v13.1 layout v3) */
.two-col .section{ margin-bottom:0; height:100%; }
.section-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.section-header .title{ margin-bottom:0; }
.btn-mini{ padding:8px 10px !important; font-size:12px; border-radius:12px; }
.mini-note{ color:#9a9a9a; font-size:12px; font-weight:800; padding:0 2px; }

.two-col{ display:grid; gap:14px; }
@media(min-width:980px){ .two-col{ grid-template-columns: 1fr 1fr; align-items:stretch; } }
.col{ min-width:0; }

.insight-row{ display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
select.insight-select{
  background:rgba(0,0,0,.35);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  outline:none;
}
.insight-btn{ background:linear-gradient(135deg,var(--gold),var(--gold2)); border:none; color:#111; padding:10px 12px; border-radius:12px; font-weight:900; cursor:pointer; }

.section input{
  padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35); color:var(--text); font-weight:800; outline:none;
}

.seg-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.seg{ flex:1; min-width:140px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.25); color:var(--text); font-weight:900; cursor:pointer; }
.seg.active{ background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#111; border-color:transparent; }

.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.cta-row a{ flex:1; min-width:160px; }
.analyze-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:15px 16px;
  border-radius:18px;
  font-weight:900;
  text-decoration:none;
  text-align:left;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  overflow:hidden;
  user-select:none;
}
.analyze-btn .label{ display:block; line-height:1.05; }
.analyze-btn .sub{ display:block; margin-top:6px; font-size:11px; font-weight:900; opacity:.9; }
.analyze-btn .icon{ display:inline-flex; align-items:center; justify-content:center; }
.analyze-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(120deg, rgba(255,255,255,.18), transparent 35%, rgba(255,255,255,.10));
  transform: translateX(-40%) skewX(-12deg);
  opacity:.65;
  transition: transform .55s ease;
}
.analyze-btn:hover{ transform: translateY(-2px); box-shadow:0 18px 44px rgba(0,0,0,.45); }
.analyze-btn:hover::before{ transform: translateX(40%) skewX(-12deg); }

.analyze-btn.primary{
  color:#0b0b0b;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 16px 40px rgb(var(--accentRGB) / .18);
}
.analyze-btn.primary:hover{ filter:brightness(1.03); }

.analyze-btn.secondary{
  color:var(--text);
  background:linear-gradient(135deg,#2d7dff,#6bdcff);
  box-shadow:0 16px 40px rgba(80,160,255,.16);
}
.analyze-btn.secondary:hover{ filter:brightness(1.03); }
.analyze-btn .sub{ display:block; margin-top:4px; font-size:11px; font-weight:900; opacity:.9; }

.log{ display:grid; gap:8px; }
.log-item{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.28);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.log-date{ font-weight:900; color:#60A5FA; font-size:12px; white-space:nowrap; }
.log-text{ color:#cfcfcf; font-size:13px; line-height:1.45; flex:1; }

.faq details{ border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.28); border-radius:14px; padding:10px 12px; }
.faq details + details{ margin-top:10px; }
.faq summary{ cursor:pointer; font-weight:900; color:var(--text); list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq .a{ margin-top:8px; color:#cfcfcf; font-size:13px; line-height:1.55; }

.vendor-header{
  max-width:1100px;
  margin:14px auto 10px;
  padding:16px 14px;
  text-align:center;
  border-radius:18px;
  background:rgba(18,18,18,.85);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}
.vendor-header::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:radial-gradient(700px 240px at 50% 0%, rgb(var(--accentRGB) / .20), transparent 60%);
  pointer-events:none;
}
.vendor-header h2{ position:relative; margin:0; font-size:18px; font-weight:900; color:var(--gold2); letter-spacing:.2px; }
.vendor-header p{ position:relative; margin:6px 0 0; font-size:13px; color:#a7a7a7; }
.pill-row{ position:relative; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  color:#0b0b0b;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border:1px solid rgba(255,255,255,.12);
}
.pill:hover{ filter:brightness(1.03); }
.pill.ghost{
  background:rgba(255,255,255,.08);
  color:#e8e8e8;
  border:1px solid rgba(15,23,42,.12);
}

.vendor-tools{
  position:sticky;
  top:10px;
  z-index:80;
  max-width:1100px;
  margin:0 auto 10px;
  padding:10px 14px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,12,14,.72);
  backdrop-filter: blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.vendor-tools::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(600px 140px at 40% 0%, rgb(var(--accentRGB) / .10), transparent 60%);
  opacity:.9;
}
.vendor-tools > *{ position:relative; }
@media (max-width:640px){
  .vendor-tools{ top:0; margin:0 auto 8px; border-radius:0; border-left:none; border-right:none; }
  .v-controls{ gap:8px; align-items:stretch; }
  .v-control{ min-width: calc(50% - 4px); flex:1; }
  .v-input{ padding:12px 12px; font-size:14px; }
  .v-toggle{ width:100%; justify-content:space-between; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18); }
}
.v-input{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.28); color:var(--text); outline:none; font-weight:800; }
.v-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.v-chip{ padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); color:var(--text); font-weight:900; cursor:pointer; transition: transform .14s ease, filter .14s ease, border-color .14s ease; }
.v-chip:hover{ transform: translateY(-1px); filter:brightness(1.03); border-color:var(--muted-2); }
.v-chip.active{ background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#111; border-color:transparent; }

/* ===== 새 컨트롤(배찌 제거 버전) ===== */
.v-controls{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; align-items:flex-end; }
.v-control{ display:flex; flex-direction:column; gap:6px; min-width:120px; }
.v-control label{ font-size:12px; color:var(--muted); font-weight:800; letter-spacing:-.2px; }
.v-select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  color:var(--text);
  outline:none;
  font-weight:900;
}
.v-select:focus{
  border-color:rgba(255,215,112,.55);
  box-shadow:0 0 0 3px rgba(255,215,112,.12);
}
.v-toggle{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  cursor:pointer;
  user-select:none;
}
.v-toggle input{ display:none; }
.v-switch{
  width:46px;
  height:26px;
  border-radius:999px;
  background:rgba(15,23,42,.12);
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: background .15s ease;
}
.v-switch::after{
  content:"";
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.86);
  position:absolute;
  top:2px;
  left:2px;
  transition: transform .15s ease;
}
.v-toggle input:checked + .v-switch{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
}
.v-toggle input:checked + .v-switch::after{
  transform: translateX(20px);
}
.v-toggle-text{ font-weight:900; font-size:12px; color:var(--text); }
.v-small{ margin-top:8px; font-size:12px; color:#a7a7a7; }
#evAutoHint{ display:none; }

.vendor-grid{ position:relative; display:grid; gap:14px; padding:0 14px 10px; max-width:1100px; margin:0 auto; }

/* ===== 섹션(보증/인증) ===== */
.vendor-sections{ display:flex; flex-direction:column; gap:18px; }
.vendor-section{ position:relative; }
.vendor-section-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 6px 8px;
}
.vsh-left{ display:flex; align-items:baseline; gap:10px; }
.vsh-title{
  font-size:16px; font-weight:1000; letter-spacing:-.2px;
}
.vsh-meta{ font-size:12px; color:var(--muted); font-weight:700; }
.vsh-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:1000;
  color:#0b0b0b;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.vendor-section[data-section="verified"] .vsh-chip{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  background:linear-gradient(135deg,#2d7dff,#6bdcff);
}

/* (UI) 카드: 메인 화면에서는 이미지 전용 */
.card.card--imageOnly{ padding:0; }
.card.card--imageOnly .img-box{ border-radius:18px; }
.card.card--imageOnly .img-title{
  position:absolute;
  left:10px; right:10px; bottom:10px;
  padding:8px 10px;
  border-radius:14px;
  font-size:12px;
  font-weight:900;
  color:var(--text);
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.card.card--imageOnly:hover .img-title,
.card.card--imageOnly:focus-within .img-title{
  opacity:1;
  transform: translateY(0);
}
@media (hover:none){
  .card.card--imageOnly .img-title{ display:none; }
}

.vendor-grid::before{
  content:"";
  position:absolute;
  inset:-18px;
  background:
    radial-gradient(900px 320px at 50% 0%, rgb(var(--accentRGB) / .12), transparent 60%),
    radial-gradient(700px 320px at 10% 20%, rgba(90,160,255,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
.vendor-grid > .card{ position:relative; z-index:1; }
@media(max-width:767px){ .vendor-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:768px) and (max-width:1023px){ .vendor-grid{ grid-template-columns:repeat(3, 1fr); } }
@media(min-width:1024px){ .vendor-grid{ grid-template-columns:repeat(4, 1fr); } }

.card{
  background:rgba(18,18,18,.85);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  overflow:hidden;
  cursor:pointer;
  backdrop-filter: blur(10px);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(30,58,138,.22);
  box-shadow:0 16px 46px rgba(0,0,0,.62);
  filter:brightness(1.02);
}
.tag-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}
.tag-badge.rec{
  color:#0b0b0b;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
}
.tag-badge.new{
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.30);
  background:linear-gradient(135deg,#2d7dff,#6bdcff);
}
.tag-badge.ad{
  color:var(--text);
  background:rgba(255,255,255,.10);
}
.img-box{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 5;
  background:#000;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.img-box::before{
  content:"";
  position:absolute;
  inset:-18px;
  background-image:var(--bgimg);
  background-size:cover;
  background-position:center;
  filter:blur(20px);
  opacity:.42;
}
.img-box::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.62));
}
.img-box picture, .img-box img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
}
.img-box img{ object-fit:contain; }

.content{ padding:10px 10px 12px; }
.site{ font-size:15px; font-weight:900; }
.desc{ margin-top:6px; font-size:12px; color:#bdbdbd; line-height:1.35; min-height:32px; }
.code{ margin-top:8px; font-size:12px; color:var(--gold2); font-weight:900; }

.popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:18px;
}
.popup-box{
  background:rgba(17,17,17,.95);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:22px;
  width:100%;
  max-width:380px;
  text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
}
.popup-box h2{ color:var(--gold2); margin:0 0 10px; font-weight:900; }
.btn{
  width:100%;
  padding:12px;
  margin-top:10px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  display:block;
  user-select:none;
}
.go{ background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#0b0b0b; }
.copy{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); color:var(--text); border:1px solid rgb(var(--accentRGB) / .22); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.more{ background:linear-gradient(180deg, rgb(var(--accentRGB) / .16), rgba(255,255,255,.04)); color:var(--text); border:1px solid rgb(var(--accentRGB) / .26); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.telegram a{ display:block; margin-top:10px; color:#45b3ff; text-decoration:none; font-weight:900; }

.reason-box{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.08);
  text-align:left;
}
.reason-title{ font-weight:900; color:#60A5FA; font-size:12px; margin:0 0 8px; }
.reason-line{ font-size:12px; color:#ddd; line-height:1.5; }
.reason-line + .reason-line{ margin-top:4px; }

/* 하단 랜딩 링크 아주 작게 */
.landing-seo {
  max-width:1100px;
  margin:36px auto 20px;
  padding:0 14px;
}
.landing-seo h3{ font-size:10px; color:#777; margin:0 0 6px; font-weight:700; }
.landing-seo .links{ display:flex; flex-wrap:wrap; gap:6px; }
.landing-seo a{
  font-size:10px;
  color:#9a9a9a;
  text-decoration:none;
  padding:5px 7px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.landing-seo a:hover{ color:#60A5FA; border-color:#60A5FA; }

/* 플로팅 CTA */
.fab{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:1700;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fab a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 12px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.fab a.secondary{
  background:rgba(255,255,255,.08);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .header .logoImg{ animation:none !important; }
  .analyze-btn::before{ display:none !important; }
  .card, .analyze-btn, .v-chip{ transition:none !important; }
}

/* ===== 카드 액션(공유) ===== */
.card-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}
.mini-share{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  transition:transform .14s ease, filter .14s ease, border-color .14s ease;
}
.mini-share:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color:var(--muted-2);
}

/* ===== 공유 팝업 ===== */
.share-sub{ margin:6px 0 12px; color:#a7a7a7; font-size:12px; }
.share-preview{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  padding:12px;
}
#shareCanvas{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}
.share-row{
  display:flex;
  gap:10px;
  margin-top:12px;
  align-items:center;
}
.share-row input{
  flex:1;
}
.share-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.btn.share{
  background:linear-gradient(135deg, rgb(var(--accentRGB) / .95), rgba(255,204,82,.95));
  color:#111;
  border:1px solid rgba(0,0,0,.1);
}

/* ===== 로컬 인사이트(가짜 방문자 대신) ===== */
.insights-wrap{ max-width:1100px; margin:18px auto 36px; padding:0 14px; }
.insights-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:12px 0 10px; }
.insights-head .h{ font-size:16px; font-weight:900; letter-spacing:-.2px; }
.insights-head .sub{ color:var(--muted); font-size:12px; line-height:1.4; }
.insights-grid{ display:grid; gap:14px; }
@media(max-width:767px){ .insights-grid{ grid-template-columns:1fr; } }
@media(min-width:768px) and (max-width:1023px){ .insights-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .insights-grid{ grid-template-columns:1.1fr .9fr .9fr; } }

.stat-card{ cursor:default; }
.stat-card:hover{ transform:none; border-color:var(--muted-2); box-shadow:0 10px 30px rgba(0,0,0,.55); filter:none; }
.stat-top{ padding:14px 14px 8px; }
.stat-title{ font-weight:900; font-size:14px; display:flex; align-items:center; gap:8px; }
.stat-meta{ color:var(--muted); font-size:12px; margin-top:4px; line-height:1.35; }
.stat-list{ padding:8px 14px 14px; display:grid; gap:10px; }
.stat-item{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.stat-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.stat-rank{ width:18px; text-align:center; color:#60A5FA; font-weight:900; font-size:12px; flex:0 0 auto; }
.stat-link{ background:transparent; border:0; padding:0; color:var(--text); font-size:13px; font-weight:800; cursor:pointer; text-align:left; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-link:hover{ text-decoration:underline; }
.stat-count{ color:var(--muted); font-size:12px; font-weight:800; flex:0 0 auto; }
.stat-actions{ padding:0 14px 14px; display:flex; gap:10px; flex-wrap:wrap; }
.small-btn{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgb(var(--accentRGB) / .22);
  background:linear-gradient(180deg, rgb(var(--accentRGB) / .12), rgba(255,255,255,.04));
  color:var(--text);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.small-btn:hover{ filter:brightness(1.08); border-color:var(--muted-2); }
.small-btn:active{ transform: translateY(1px); }
.note-mini{ color:var(--muted); font-size:12px; padding:0 14px 14px; line-height:1.35; }

/* ==== UI patch v3 (2026-02-05): glass notice bar, benefit chips, mobile compact controls ==== */

/* glass notice bar (less distracting) */
.notice-bar{
  position:sticky;
  top:10px;
  z-index:1600;
  width:min(980px, calc(100% - 18px));
  margin:10px auto 0;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(18,18,22,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color:var(--text);
  font-weight:900;
  font-size:13px;
  text-align:center;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transition: opacity .2s ease, background .2s ease, border-color .2s ease, padding .2s ease, transform .2s ease;
}
.notice-bar a{
  color:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
}
.notice-bar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,0));
  pointer-events:none;
  opacity:.55;
}
.notice-bar.is-scrolled{
  opacity:.62;
  background:rgba(18,18,22,.36);
  border-color:var(--muted-2);
  padding:7px 12px;
  transform: translateY(-1px);
}
@media (max-width:560px){
  .notice-bar{ top:8px; margin:8px auto 0; font-size:12px; }
  .notice-bar.is-scrolled{ padding:6px 10px; }
}

/* benefit keyword chips */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 6px;
}
.chip-row:empty{ display:none; }
.kchip{
  font-size:11px;
  font-weight:900;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--text);
  letter-spacing:.15px;
}

/* ===== tool card (bonus-checklist) ===== */
.tool-card-grid{
  margin-top:12px;
}
.tool-card-link{
  position:relative;
  display:block;
  text-decoration:none;
  color:var(--text);
  padding:14px 14px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  box-shadow: 0 12px 34px rgba(0,0,0,.48);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}
.tool-card-link::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 180px at 35% 0%, rgb(var(--accentRGB) / .18), transparent 60%),
              radial-gradient(520px 220px at 85% 10%, rgba(90,160,255,.14), transparent 62%);
  pointer-events:none;
  opacity:.9;
}
.tool-card-link:hover{
  transform: translateY(-3px);
  border-color: rgba(30,58,138,.20);
  box-shadow: 0 18px 52px rgba(0,0,0,.62);
  filter: brightness(1.02);
}
.tool-card-head{
  position:relative;
  display:flex;
  gap:12px;
  align-items:center;
}
.tool-card-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text);
  flex:0 0 auto;
}
.tool-card-title{
  font-weight:900;
  font-size:15px;
  letter-spacing:-.2px;
}
.tool-card-desc{
  margin-top:3px;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  line-height:1.35;
}
.tool-card-foot{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-end;
  margin-top:8px;
}
.tool-card-cta{
  font-weight:900;
  color: rgba(30,58,138,.98);
  font-size:12px;
}
.tool-card-note{
  font-size:11px;
  color:var(--muted);
  font-weight:800;
}

/* mobile compact filter/sort: one-line summary + dropdown */
@media (max-width:560px){
  .v-compact{ display:block; margin-top:10px; }
  .v-compact summary{
    list-style:none;
    cursor:pointer;
    user-select:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    background: rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .v-compact summary::-webkit-details-marker{ display:none; }
  .v-compact .sum{
    font-weight:900;
    font-size:12px;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .v-compact .caret{
    opacity:.8;
    font-size:14px;
    transition: transform .18s ease;
  }
  .v-compact[open] summary{
    border-color: rgb(var(--accentRGB) / 0.22);
    background: rgba(255,255,255,0.08);
  }
  .v-compact[open] .caret{ transform: rotate(180deg); }
  .v-compact .v-controls{
    margin-top:10px;
    padding:10px 8px 0;
  }
}
@media (min-width:561px){
  .v-compact{ display:none !important; }
}

/* ==== UI patch v4 (2026-02-07): premium midnight + two-card hero ==== */
:root{
  --radius-xl:26px;
  --radius-lg:22px;
  --glass: rgba(12,14,22,.60);
  --glass2: rgba(10,12,18,.52);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(15,23,42,.12);
  --shadow-lg: 0 28px 96px rgba(0,0,0,.66);
  --shadow-md: 0 16px 52px rgba(0,0,0,.52);
}

body{
  position:relative;
  background:
    radial-gradient(1200px 620px at 50% -10%, rgb(var(--accentRGB) / .18), transparent 58%),
    radial-gradient(900px 540px at 15% 25%, rgba(120,170,255,.10), transparent 55%),
    radial-gradient(900px 640px at 85% 35%, rgba(80,140,255,.08), transparent 55%),
    linear-gradient(180deg, #05060b 0%, #060612 60%, #040408 100%);
}
/* subtle grain + vignette */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body::after{
  content:"";
  position:fixed;
  inset:-1px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(0,0,0,0), rgba(0,0,0,.35) 58%, rgba(0,0,0,.78) 100%);
}
/* make sure main content stays above overlays */

/* header becomes premium glass container */
.header{
  width:min(1100px, calc(100% - 28px));
  margin:14px auto 12px;
  padding:16px 14px 12px;
  border-radius: var(--radius-xl);
  background: var(--glass);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow:hidden;
}
.header::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(700px 280px at 50% 0%, rgb(var(--accentRGB) / .22), transparent 60%),
    radial-gradient(520px 260px at 20% 20%, rgba(120,170,255,.10), transparent 60%);
  opacity:.85;
  pointer-events:none;
}
.header .logoLink{ position:relative; }
.header .logoImg{
  width:min(120px, 34vw);
  padding:12px 14px;
  border-radius:20px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  filter: drop-shadow(0 0 26px rgb(var(--accentRGB) / .14));
}

/* sections: unified premium panels */
.section,
.vendor-header,
.vendor-tools,
.faq-box{
  background: var(--glass);
  border:1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.section{ padding:18px; }
@media (max-width:560px){
  .section{ padding:16px 14px; }
}

/* analyzer hero: two-card layout like mockup */
#analyzerSection{
  border-color: rgb(var(--accentRGB) / .20);
  background:
    radial-gradient(900px 360px at 50% 0%, rgb(var(--accentRGB) / .16), transparent 60%),
    var(--glass);
}
#analyzerSection .cta-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:14px;
}
@media (max-width:760px){
  #analyzerSection .cta-row{ grid-template-columns:1fr; }
}
.analyze-btn{
  position:relative;
  justify-content:flex-start;
  gap:14px;
  padding:18px 18px;
  min-height:92px;
  text-align:left;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.analyze-btn::before{
  opacity:.30;
}
.analyze-btn::after{
  content:"→";
  position:absolute;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  font-weight:1000;
  opacity:.85;
}
.analyze-btn .icon{
  width:48px;
  height:48px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.analyze-btn.primary{
  color:var(--text);
  background: linear-gradient(180deg, rgb(var(--accentRGB) / .24), rgba(255,255,255,.04));
  border-color: rgb(var(--accentRGB) / .28);
  box-shadow: 0 22px 70px rgb(var(--accentRGB) / .10);
}
.analyze-btn.secondary{
  color:var(--text);
  background: rgba(255,255,255,.05);
  border-color:var(--muted-2);
  box-shadow: 0 22px 70px rgba(0,0,0,.52);
}
.analyze-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.03) saturate(1.03);
}

/* buttons: match premium palette */
.insight-btn,
.small-btn,
.btn.copy,
.btn.more{
  border-color: rgb(var(--accentRGB) / .22) !important;
}
.insight-btn{
  background: linear-gradient(135deg, rgb(var(--accentRGB) / .92), rgb(var(--accentRGB) / .62));
  color:#07131a;
  box-shadow: 0 16px 44px rgb(var(--accentRGB) / .12);
}
.insight-btn:hover{ filter: brightness(1.03) saturate(1.05); }
.btn.go{
  background: linear-gradient(135deg, rgb(var(--accentRGB) / .95), rgb(var(--accentRGB) / .70));
  color:#07131a;
}

/* cards: slightly more premium */
.card{
  background: var(--glass);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.card:hover{
  border-color: rgb(var(--accentRGB) / .20);
  box-shadow: var(--shadow-lg);
}
.card.card--imageOnly .img-box{ border-radius: var(--radius-lg); }
.img-box::after{ background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.66)); }

/* vendor section headers: less intrusive */
.vendor-section-head{
  padding:8px 4px 6px;
  opacity:.92;
}
.vsh-title{ font-size:15px; }
.vsh-chip{
  background: rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgb(var(--accentRGB) / .18);
  box-shadow:none;
}
.vendor-section[data-section="verified"] .vsh-chip{
  background: rgba(45,125,255,.18);
  border-color: rgba(107,220,255,.35);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* notice bar: more subtle, premium line */
.notice-bar{
  background: rgba(12,14,22,.46);
  border-color:var(--muted-2);
  box-shadow: 0 16px 46px rgba(0,0,0,.34);
}
.notice-bar::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid rgb(var(--accentRGB) / .22);
  opacity:.35;
  pointer-events:none;
}
.notice-bar.is-scrolled{
  opacity:.55;
  background: rgba(12,14,22,.34);
}

/* vendor tools: keep sticky but match new glass */
.vendor-tools{
  background: rgba(12,14,22,.62);
  border-color:var(--muted-2);
}
.vendor-tools::before{ opacity:.75; }

/* ===== v13.1 polish (premium & less-blue) ===== */

/* 1) remove all "TODAY/MAIN/CHECK..." badges in section titles */
.title .badge{ display:none !important; }

/* 2) header/logo: 카드박스 제거 + 로고만 또렷하게 */
.header{
  width:auto !important;
  margin:12px auto 6px !important;
  padding:14px 0 4px !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
}
.header::before{ content:none !important; display:none !important; }
.header .logoLink{ display:inline-flex !important; align-items:center; justify-content:center; }

.header .sub{
  color:var(--muted) !important;
  margin-top:6px !important;
  font-weight:800;
}

.header .logoImg{
  width:min(156px, 46vw) !important;

  /* 카드박스 느낌 제거 */
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  /* 2단계 그림자 프리셋(미니멀/존재감) */
  filter: var(--logo-shadow) !important;
  will-change: transform, filter;
  transform-origin: 50% 50%;

  /* 로고 플로팅 + 은은한 글로우 */
  animation:
    logoFloat 6.8s ease-in-out infinite,
    logoGlow 3.6s ease-in-out infinite !important;
}
/* 3) buttons: reduce heavy blue fills, keep premium glass + subtle accent */
.insight-btn{
  background: rgba(255,255,255,.07) !important;
  color:var(--text) !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45) !important;
}
.insight-btn:hover{
  background: rgba(255,255,255,.09) !important;
  border-color: rgb(var(--accentRGB) / .22) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.55), 0 0 0 1px rgb(var(--accentRGB) / .10) inset !important;
  filter:none !important;
}
.small-btn,
.btn.copy,
.btn.more{
  background: rgba(255,255,255,.06) !important;
  color:var(--text) !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.38) !important;
}
.small-btn:hover,
.btn.copy:hover,
.btn.more:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgb(var(--accentRGB) / .20) !important;
}
.btn.go{
  background: rgba(255,255,255,.07) !important;
  color:var(--text) !important;
  border:1px solid rgb(var(--accentRGB) / .18) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45) !important;
}
.btn.go:hover{
  background: rgba(255,255,255,.09) !important;
  border-color: rgb(var(--accentRGB) / .26) !important;
}

/* optional: make active segment less "painted" */
.seg.active{
  background: linear-gradient(180deg, rgb(var(--accentRGB) / .20), rgba(255,255,255,.06)) !important;
  color:var(--text) !important;
  border-color: rgb(var(--accentRGB) / .18) !important;
}

/* 4) thumbnail premium tone: slightly lower saturation, higher contrast */
.card.card--imageOnly .img-box img{
  filter: contrast(1.09) saturate(.90) brightness(.99);
  transform: translateZ(0);
}
.card.card--imageOnly:hover .img-box img{
  filter: contrast(1.11) saturate(.94) brightness(1.01);
}
.img-box::after{
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.74)) !important;
}

/* ===== Popup CTA 3-tier (v13.1 final) ===== */
.popup-cta{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.popup-aux{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.popup-aux #favBtn.is-on{ color: var(--gold); text-shadow:0 10px 24px rgba(0,0,0,.35); }
.popup-aux .btn{ flex:1; }

/* make hierarchy clearer without breaking existing classes */
.btn.primary{
  background: rgba(255,255,255,.08) !important;
  border:1px solid rgb(var(--accentRGB) / .22) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.48) !important;
}
.btn.secondary{
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(15,23,42,.12) !important;
}
.btn.tertiary{
  background: rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.btn.ghost{
  background: rgba(0,0,0,.18) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
.btn.primary:hover,
.btn.secondary:hover,
.btn.tertiary:hover,
.btn.ghost:hover{
  filter: brightness(1.06);
}

/* ===== quick memo (fills right column after guide/log removal) ===== */
.memo-area{
  width:100%;
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color:#eaeaea;
  outline:none;
  min-height:112px;
  resize:vertical;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.memo-area:focus{
  border-color: rgba(var(--accentRGB), .38);
  box-shadow:
    0 0 0 2px rgba(var(--accentRGB), .12),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.memo-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.insight-btn.secondary{
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.12);
  color:#e6e6e6;
  box-shadow:none;
}

/* ===== Risk Calc (v13.1) ===== */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}
.chip{
  border-radius:999px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color:var(--muted-2);
}
.chip:active{
  transform: translateY(0px) scale(.99);
}

/* ===== Floating Action Buttons (UI 통일) ===== */
.fab{
  right:16px;
  bottom:16px;
  gap:10px;
}
.fab a{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(15,23,42,.12);
  color:var(--text);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fab a:not(.secondary){
  background: linear-gradient(180deg, rgb(var(--accentRGB) / .14), rgba(255,255,255,.04));
  border-color: rgb(var(--accentRGB) / .22);
}
.fab a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color:var(--muted-2);
}
.fab a:not(.secondary):hover{
  border-color: rgb(var(--accentRGB) / .32);
}
.fab a:active{
  transform: translateY(0px) scale(.99);
}

/* v13.1 combo: insight + memo */
.section-divider{height:1px; background:rgba(255,255,255,.08); margin:12px 0;}
.combo-subtitle{font-weight:900; font-size:13px; color:var(--gold2); margin-bottom:6px;}
.combo-memo .memo-area{min-height:110px;}
/* ===== Session Plan (Checklist fill) ===== */
.session-plan{
  margin-top:12px;
  padding:14px 14px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background: rgba(255,255,255,.03);
}
.session-plan-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.session-plan-title{
  font-weight:900;
  letter-spacing:.2px;
  color: var(--gold2);
}
.session-plan-sub{
  font-size:12px;
  color:var(--muted-2);
  font-weight:800;
}
.session-plan-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.session-plan-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
@media (max-width:520px){
  .session-plan-grid{ grid-template-columns:1fr; }
}
.session-plan-field label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}
.session-plan-field input{
  width:100%;
}
.session-plan-summary{
  margin-top:10px;
  font-weight:900;
  color:#60A5FA;
  line-height:1.45;
  font-size:13px;
}

/* === Odds one-line summary card (margin / fair odds / normalized probs) === */
.odds-summary-card{
  margin-top:12px;
  padding:14px 14px 12px;
  border-radius:18px;
  border:1px solid var(--panel-border);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 86%, transparent),
    color-mix(in srgb, var(--panel-2) 86%, transparent)
  );
  box-shadow: var(--shadow-sm);
}
.odds-summary-row{
  display:grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width: 920px){
  .odds-summary-row{ grid-template-columns: 1fr; }
}
.odds-metric{
  padding:10px 10px 8px;
  border-radius:14px;
  border:1px solid var(--panel-border);
  background: color-mix(in srgb, var(--panel-2) 92%, transparent);
}
.odds-metric-title{
  font-size:12px;
  color: var(--muted);
  letter-spacing:.2px;
  font-weight:900;
}
.odds-metric-value{
  margin-top:6px;
  font-size:30px;
  line-height:1.1;
  font-weight:1000;
  color: var(--text);
  text-shadow: none;
}
.odds-metric-sub{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
}
.odds-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.odds-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), .22);
  background: rgba(var(--accent-rgb), .05);
  font-size:13px;
  font-weight:900;
  color:var(--text);
}
.odds-pill .k{ color:var(--muted); font-weight:800; }
.odds-pill .v{ color:var(--text); font-weight:950; text-shadow: none; }
.odds-pill.home, .odds-pill.draw, .odds-pill.away{ border-color: rgba(var(--accent-rgb), .22); }

.odds-summary-cta{display:flex;justify-content:flex-start;}
.odds-summary-note{
  margin-top:8px;
  font-size:12px;
  color: var(--muted);
  line-height:1.35;
}

/* === Insight/Memo premium tabs === */
.im-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.im-tabs{
  display:flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.im-tab{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color:#bdbdbd;
  background: transparent;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.im-tab:hover{ transform: translateY(-1px); }
.im-tab.active{
  color:#121212;
  background: linear-gradient(180deg, rgba(30,58,138,.96), rgba(30,58,138,.72));
  box-shadow: 0 12px 26px rgba(30,58,138,.10);
}
.im-panels{
  margin-top:10px;
  min-height: 250px;
}
.im-panel{ display:none; }
.im-panel.active{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.im-panel .memo-area{ min-height: 150px; }
.im-note{
  margin-top:2px;
  color:#9a9a9a;
  font-size:12px;
}
/* === Memo extras to avoid empty space === */
.memo-extras{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.memo-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.memo-chip{
  appearance:none;
  border:1px solid rgba(30,58,138,.22);
  background: rgba(0,0,0,.18);
  color:var(--text);
  padding:7px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.memo-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(30,58,138,.34);
  background: rgba(0,0,0,.26);
}
.memo-extra-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.memo-history{
  display:grid;
  gap:8px;
}
.memo-history-title{
  font-weight:900;
  font-size:12px;
  color:var(--text-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.memo-history-item{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.memo-history-item:hover{
  transform: translateY(-1px);
  border-color: rgba(30,58,138,.22);
  background: rgba(0,0,0,.22);
}
.memo-history-meta{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted-2);
  margin-bottom:6px;
}
.memo-history-text{
  font-size:12px;
  color:var(--text-2);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}