/*
 * FloS 주제별 탑3 특별판 v48 — 후보 영역 강한 분리형
 * 2026-10-08 ChatGPT + 이상준 선생님
 *
 * 구조/기능/DB는 건드리지 않고 시각 위계만 강화한다.
 * - 탑3 = 버건디 #8B3150 + 흰 글자
 * - 탑3 후보 = 노랑
 * - 후보마다 서로 다른 강한 색 영역
 * - 추천/비추 의견쓰기 버튼 = 크고 중앙 정렬
 */

body:has(.sp-head) .sp-head{
  position:relative;
  overflow:hidden;
  margin-bottom:16px;
  padding:24px 26px 21px;
  border:1.5px solid #eadde3;
  border-radius:22px;
  background:
    radial-gradient(82% 110% at 10% 0%,rgba(255,226,236,.72) 0%,rgba(255,226,236,0) 66%),
    linear-gradient(120deg,#fff8fa 0%,#fffdf9 58%,#f5fbf8 100%);
  box-shadow:0 5px 0 rgba(119,72,88,.06),0 17px 34px rgba(100,70,80,.09);
}
body:has(.sp-head) .sp-head .trail{justify-content:flex-start;margin-bottom:8px;text-align:left}
body:has(.sp-head) .sp-head .sp-kind{
  margin:2px 0 8px;
  padding:4px 11px;
  border:0;
  border-radius:999px;
  background:#8B3150;
  color:#fff;
  box-shadow:0 3px 0 #6B243F,0 7px 14px rgba(107,36,63,.15);
  font-family:var(--font-sans);
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.03em;
}
body:has(.sp-head) .sp-head .topic-title{max-width:70%;margin:0 0 8px;text-align:left;font-size:clamp(25px,3.2vw,34px);letter-spacing:-.035em}
body:has(.sp-head) .sp-head .topic-sum{max-width:68%;margin:0 0 11px;text-align:left;font-size:13.5px;line-height:1.65}
body:has(.sp-head) .sp-head .topic-stats{justify-content:flex-start;gap:7px}
body:has(.sp-head) .sp-head .topic-stats span{padding:4px 10px;border:1px solid #eadde3;border-radius:999px;background:rgba(255,255,255,.80);box-shadow:0 2px 6px rgba(75,58,65,.04)}
body:has(.sp-head) .sp-head .who{max-width:68%;margin:9px 0 0;text-align:left;line-height:1.55}

body:has(.sp-head) .sp-note{
  position:relative;
  margin:0 0 18px;
  padding:15px 18px 15px 20px;
  border:1.5px solid #d9c6e0;
  border-left:5px solid #8B3150;
  border-radius:16px;
  background:linear-gradient(110deg,#fbf6ff 0%,#fffafd 55%,#fff 100%);
  box-shadow:0 4px 0 rgba(107,36,63,.06),0 11px 22px rgba(91,65,79,.07);
}
body:has(.sp-head) .sp-note h2{margin:0 0 6px;color:#7A2E4D;font-size:16px;letter-spacing:-.01em}
body:has(.sp-head) .sp-note p{margin:0;font-size:13.5px;line-height:1.72}

body:has(.sp-head) .section-label{
  align-items:center;
  margin:28px 0 14px;
  padding:12px 15px;
  border:2px solid transparent;
  border-radius:14px;
  box-shadow:0 5px 0 rgba(50,42,45,.08),0 13px 24px rgba(66,49,56,.08);
}
body:has(.sp-head) .section-label h2{margin:0;font-family:var(--font-serif);font-size:20px;font-weight:700;letter-spacing:-.02em}
body:has(.sp-head) .section-label .note{max-width:72%;font-size:11.5px;line-height:1.5;text-align:right}
body:has(.sp-head) .section-label:not(#works):not(#opinions){
  border-color:#6B243F;
  background:#8B3150;
  color:#fff;
  box-shadow:0 5px 0 #6B243F,0 14px 27px rgba(139,49,80,.17);
}
body:has(.sp-head) .section-label:not(#works):not(#opinions) h2{color:#fff!important}
body:has(.sp-head) .section-label:not(#works):not(#opinions) .note{color:rgba(255,255,255,.96);font-weight:700}
body:has(.sp-head) #works{
  border-color:#C99B18;
  background:#F6D64A;
  color:#332500;
  box-shadow:0 5px 0 #C99B18,0 14px 27px rgba(185,139,19,.16);
}
body:has(.sp-head) #works h2{color:#2f2400!important}
body:has(.sp-head) #works .note{color:#4d3b06;font-weight:700}
body:has(.sp-head) #opinions{
  border-color:#175FC4;
  background:#2578E8;
  color:#fff;
  box-shadow:0 5px 0 #175FC4,0 14px 27px rgba(37,120,232,.15);
}
body:has(.sp-head) #opinions h2{color:#fff!important}
body:has(.sp-head) #opinions .note,
body:has(.sp-head) #opinions .note a{color:#fff;font-weight:700}

body:has(.sp-head) .sp-cards{margin:0 0 12px;gap:38px}
body:has(.sp-head) .sp-card{
  --sp-line:#dfc052;
  --sp-deep:#b98d16;
  --sp-pale:#fff9df;
  --sp-inner:#fffdf5;
  --sp-zone:#fff4bd;
  --sp-shadow:rgba(182,139,19,.18);
  overflow:hidden;
  gap:0;
  padding:0;
  border:3px solid var(--sp-line);
  border-radius:20px;
  background:var(--sp-zone);
  box-shadow:0 8px 0 var(--sp-deep),0 20px 34px var(--sp-shadow);
}
body:has(.sp-head) .sp-card.is-picked{
  --sp-line:#A55370;
  --sp-deep:#7A2E4D;
  --sp-pale:#fbecf1;
  --sp-inner:#fff7fa;
  --sp-zone:#fff7fa;
  --sp-shadow:rgba(122,46,77,.15);
  border-width:2px;
  box-shadow:0 5px 0 var(--sp-deep),0 15px 28px var(--sp-shadow);
}
body:has(.sp-head) .sp-card.sp-tone-1{--sp-line:#1565C0;--sp-deep:#0D47A1;--sp-pale:#EAF3FF;--sp-inner:#F8FBFF;--sp-zone:#DCEBFF;--sp-shadow:rgba(13,71,161,.22)}
body:has(.sp-head) .sp-card.sp-tone-2{--sp-line:#D85A00;--sp-deep:#A84300;--sp-pale:#FFF0E1;--sp-inner:#FFF9F4;--sp-zone:#FFE1C2;--sp-shadow:rgba(168,67,0,.22)}
body:has(.sp-head) .sp-card.sp-tone-3{--sp-line:#0B8F5A;--sp-deep:#066B43;--sp-pale:#E7FFF4;--sp-inner:#F7FFFB;--sp-zone:#D2F6E6;--sp-shadow:rgba(6,107,67,.22)}
body:has(.sp-head) .sp-card.sp-tone-4{--sp-line:#6D3CC7;--sp-deep:#4B2496;--sp-pale:#F1EAFF;--sp-inner:#FBF8FF;--sp-zone:#E3D6FF;--sp-shadow:rgba(75,36,150,.22)}
body:has(.sp-head) .sp-card.sp-tone-5{--sp-line:#007D8F;--sp-deep:#005C69;--sp-pale:#E5FBFF;--sp-inner:#F7FEFF;--sp-zone:#CFF3F8;--sp-shadow:rgba(0,92,105,.22)}
body:has(.sp-head) .sp-card.sp-tone-6{--sp-line:#B12469;--sp-deep:#82194D;--sp-pale:#FFEAF3;--sp-inner:#FFF8FB;--sp-zone:#FFD7E8;--sp-shadow:rgba(130,25,77,.22)}

body:has(.sp-head) .sp-card-head{
  align-items:center;
  gap:9px;
  min-height:56px;
  padding:13px 15px;
  border-bottom:2px solid rgba(255,255,255,.72);
  background:var(--sp-line);
}
body:has(.sp-head) .sp-card.is-picked .sp-card-head{
  border-bottom:1.5px solid color-mix(in srgb,var(--sp-line) 40%,#fff);
  background:linear-gradient(110deg,var(--sp-pale) 0%,#fff 62%,var(--sp-inner) 100%);
}
body:has(.sp-head) .sp-badge{
  min-width:52px;
  padding:4px 10px;
  text-align:center;
  border:2px solid rgba(255,255,255,.9);
  border-radius:999px;
  background:#fff;
  color:var(--sp-deep);
  box-shadow:0 2px 0 rgba(0,0,0,.12);
  font-family:var(--font-sans);
  font-size:10.5px;
  font-weight:900;
}
body:has(.sp-head) .sp-card.is-picked .sp-badge{border:0;background:#8B3150;color:#fff;box-shadow:0 2px 0 #6B243F}
body:has(.sp-head) .sp-card:not(.is-picked) .sp-work,
body:has(.sp-head) .sp-card:not(.is-picked) .sp-by{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
body:has(.sp-head) .sp-work{font-size:20px;letter-spacing:-.025em}
body:has(.sp-head) .sp-card.is-picked .sp-work{color:#2c2528}
body:has(.sp-head) .sp-by{margin-left:7px;font-size:12px}
body:has(.sp-head) .sp-card.is-picked .sp-by{color:#71676b}

body:has(.sp-head) .row-preview.sp-poem{
  margin:15px 16px 10px;
  overflow:hidden;
  border:2px solid color-mix(in srgb,var(--sp-line) 38%,#fff);
  border-radius:13px;
  background:#fff;
  box-shadow:0 4px 13px rgba(53,45,46,.08);
}
body:has(.sp-head) .sp-poem .row-body{max-height:9.8em;padding:12px 14px;font-size:14.5px;line-height:1.68}
body:has(.sp-head) .sp-poem .row-track{right:5px;top:7px;bottom:7px}

body:has(.sp-head) .sp-card-foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin:0;
  padding:5px 16px 18px;
  text-align:center;
}
body:has(.sp-head) .sp-count{color:var(--sp-deep);font-size:12.5px;font-weight:900}
body:has(.sp-head) .sp-card.is-picked .sp-count{color:#7A2E4D}
body:has(.sp-head) .sp-card-foot .btn.solid{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(94%,720px);
  min-height:50px;
  padding:13px 24px;
  border:2px solid #6B243F;
  border-radius:999px;
  background:#8B3150;
  color:#fff;
  box-shadow:0 5px 0 #6B243F,0 11px 20px rgba(107,36,63,.20);
  font-size:14px;
  font-weight:900;
  line-height:1.35;
  text-align:center;
  white-space:normal;
}
body:has(.sp-head) .sp-card-foot .btn.solid:hover{background:#7A2E4D;transform:translateY(-1px)}

body:has(.sp-head) .sp-work-boards{
  margin:0;
  padding:15px 15px 17px;
  gap:13px;
  border-top:3px solid var(--sp-line);
  background:var(--sp-pale);
}
body:has(.sp-head) .sp-work-boards > .board{
  overflow:hidden;
  border:2px solid color-mix(in srgb,var(--sp-line) 48%,#fff);
  border-radius:13px;
  background:#fff;
  box-shadow:0 4px 0 rgba(67,56,58,.07),0 9px 17px rgba(67,56,58,.055);
}
body:has(.sp-head) .sp-work-boards .board-head{
  padding:10px 11px;
  border-bottom:1px solid rgba(70,58,61,.10);
  background:color-mix(in srgb,var(--sp-pale) 72%,#fff);
}
body:has(.sp-head) .sp-work-boards .board-head h2{
  color:var(--sp-deep);
  font-size:12.5px;
  font-weight:900;
  letter-spacing:0;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
body:has(.sp-head) .sp-work-boards .board-empty{min-height:58px;padding:17px 9px;background:rgba(255,255,255,.75)}

body:has(.sp-head) #opinions + .boards{
  padding:13px;
  gap:12px;
  border:2px solid #8eb7ee;
  border-radius:17px;
  background:linear-gradient(180deg,#f3f8ff,#edf5ff);
  box-shadow:0 5px 0 #6b9bd8,0 14px 25px rgba(47,112,197,.10);
}
body:has(.sp-head) #opinions + .boards > .board{overflow:hidden;border:1.5px solid #b8d1f3;border-radius:12px;background:#fff}

@media (max-width:759px){
  body:has(.sp-head) .sp-head{padding:17px 13px 15px;border-radius:15px}
  body:has(.sp-head) .sp-head .trail{padding-right:90px}
  body:has(.sp-head) .sp-head .sp-kind{font-size:9.5px;padding:3px 8px}
  body:has(.sp-head) .sp-head .topic-title{max-width:68%;font-size:21px}
  body:has(.sp-head) .sp-head .topic-sum{max-width:72%;font-size:11.5px;line-height:1.55}
  body:has(.sp-head) .sp-head .topic-stats{max-width:72%}
  body:has(.sp-head) .sp-head .topic-stats span{padding:3px 7px;font-size:10.5px}
  body:has(.sp-head) .sp-head .who{max-width:76%;font-size:10px}
  body:has(.sp-head) .sp-note{padding:12px 12px 12px 14px;border-radius:12px}
  body:has(.sp-head) .sp-note h2{font-size:14px}
  body:has(.sp-head) .sp-note p{font-size:12px;line-height:1.62}
  body:has(.sp-head) .section-label{margin:22px 0 11px;padding:9px 10px;border-radius:11px}
  body:has(.sp-head) .section-label h2{font-size:16px}
  body:has(.sp-head) .section-label .note{max-width:100%;font-size:9.5px;text-align:left}
  body:has(.sp-head) .sp-cards{gap:31px}
  body:has(.sp-head) .sp-card{border-width:3px;border-radius:15px;box-shadow:0 6px 0 var(--sp-deep),0 14px 24px var(--sp-shadow)}
  body:has(.sp-head) .sp-card.is-picked{border-width:2px}
  body:has(.sp-head) .sp-card-head{min-height:48px;padding:10px 10px}
  body:has(.sp-head) .sp-badge{min-width:44px;padding:3px 7px;font-size:9px}
  body:has(.sp-head) .sp-work{font-size:16px}
  body:has(.sp-head) .sp-by{display:block;margin:2px 0 0;font-size:10.5px}
  body:has(.sp-head) .row-preview.sp-poem{margin:10px 10px 7px}
  body:has(.sp-head) .sp-poem .row-body{padding:9px 10px;font-size:12.5px;line-height:1.6}
  body:has(.sp-head) .sp-card-foot{padding:4px 10px 15px;gap:9px}
  body:has(.sp-head) .sp-count{font-size:10.5px}
  body:has(.sp-head) .sp-card-foot .btn.solid{width:97%;min-height:49px;padding:11px 12px;font-size:12px;line-height:1.4}
  body:has(.sp-head) .sp-work-boards{padding:11px 9px 12px;gap:9px;border-top-width:3px}
  body:has(.sp-head) .sp-work-boards .board-head{padding:8px 8px}
  body:has(.sp-head) .sp-work-boards .board-head h2{font-size:10.5px;line-height:1.35}
  body:has(.sp-head) .sp-work-boards .board-empty{min-height:44px;padding:12px 6px;font-size:10px}
  body:has(.sp-head) #opinions + .boards{padding:8px;gap:8px;border-radius:13px}
}