/* v1.94 주제별 탑3 금테 (그림: 제미나이, 2026-11-02 두 번째 판)
   서평단 모집 게시판처럼, 금테를 각 카드·막대의 색 테두리 바로 안쪽에 틈 없이 붙인다.
   - 원탑 책 카드(·빈자리)  : 세 줄 금테 + 소용돌이 모서리  topics-gold2-frame-1.webp
   - 탑3 책 카드(·빈자리)   : 두 줄 금테 + 잎 모서리       topics-gold2-frame-2.webp
   - 원탑·탑3 제목 막대     : 한 줄 금테                   topics-gold2-frame-3.webp
   금테는 <span class="gold-line">을 칸 안쪽(테두리 안쪽 면)에 깔아 9-slice로 늘린다. 모서리는 칸의 둥근 모서리에 맞춰 잘라 낸다 */
body:not(#gold-a) .gold-one,
body:not(#gold-a) .gold-top3{position:relative}
body:not(#gold-a) .gold-head{--gold-rad:14px}
body:not(#gold-a) .rank-block.gold-one,
body:not(#gold-a) .rank-block.gold-top3{--gold-rad:18px}
body:not(#gold-a) .gold-line{
  position:absolute;inset:0;z-index:6;pointer-events:none;box-sizing:border-box;
  border-style:solid;border-color:transparent;
  border-image-repeat:stretch;border-image-width:1;
  clip-path:inset(0 round var(--gold-rad,12px));
}
/* v1.96 책 카드(원탑·탑3, 빈자리 포함) — 한 줄 금테
   v2.00 서평단 모집 게시판 금테(requests/index.php .req-row::after, v1.84·v1.85)를 그대로 옮겨 쓴다 —
   색 테두리 바로 안쪽에 틈 없이 붙는 3.25px 고리(휴대폰 2.73px), 금속 띠 + 하얀 광택 점 열둘 + 바깥 가는 하이라이트 + 은은한 금빛 번짐.
   모서리는 칸 안쪽 둥글기(--gold-rad)를 그대로 따라 휜다 (v1.94의 제미나이 그림 금테·v1.99의 고리는 걷어냄) */
body:not(#gold-a) .rank-block.gold-one > .gold-line,
body:not(#gold-a) .rank-empty.gold-one > .gold-line,
body:not(#gold-a) .rank-block.gold-top3 > .gold-line,
body:not(#gold-a) .rank-empty.gold-top3 > .gold-line{
  border:0;border-image:none;clip-path:none;
  border-radius:var(--gold-rad,18px);padding:3.25px;
  background-origin:border-box;background-clip:border-box;
  background:
    radial-gradient(circle at 5% 0%,#fff 0,rgba(255,255,255,.85) 2px,rgba(255,255,255,0) 11px),
    radial-gradient(circle at 24% 0%,rgba(255,255,255,.95) 0,rgba(255,255,255,.6) 2px,rgba(255,255,255,0) 9px),
    radial-gradient(circle at 47% 0%,#fff 0,rgba(255,255,255,.8) 2px,rgba(255,255,255,0) 12px),
    radial-gradient(circle at 73% 0%,rgba(255,255,255,.95) 0,rgba(255,255,255,.6) 2px,rgba(255,255,255,0) 9px),
    radial-gradient(circle at 95% 0%,#fff 0,rgba(255,255,255,.85) 2px,rgba(255,255,255,0) 11px),
    radial-gradient(circle at 0% 38%,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 2px,rgba(255,255,255,0) 10px),
    radial-gradient(circle at 100% 62%,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 2px,rgba(255,255,255,0) 10px),
    radial-gradient(circle at 6% 100%,#fff 0,rgba(255,255,255,.85) 2px,rgba(255,255,255,0) 11px),
    radial-gradient(circle at 31% 100%,rgba(255,255,255,.95) 0,rgba(255,255,255,.6) 2px,rgba(255,255,255,0) 9px),
    radial-gradient(circle at 55% 100%,#fff 0,rgba(255,255,255,.8) 2px,rgba(255,255,255,0) 12px),
    radial-gradient(circle at 80% 100%,rgba(255,255,255,.95) 0,rgba(255,255,255,.6) 2px,rgba(255,255,255,0) 9px),
    radial-gradient(circle at 96% 100%,#fff 0,rgba(255,255,255,.85) 2px,rgba(255,255,255,0) 11px),
    linear-gradient(105deg,#7a520c 0%,#f6d878 7%,#fffbe3 13%,#e3ac38 22%,#8a5e0e 31%,#f0cf6a 40%,#fff3b8 47%,#d79d2b 57%,#7f560c 66%,#f8dd84 75%,#fffce8 81%,#dea830 90%,#8f6410 100%);
  background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  box-shadow:inset 0 0 0 .7px rgba(255,248,214,.8);
  filter:drop-shadow(0 0 1.6px rgba(255,214,110,.75));
}
body:not(#gold-a) .rank-empty.gold-one,
body:not(#gold-a) .rank-empty.gold-top3{--gold-rad:19px}
/* v1.96 제목 막대(원탑·탑3·탑3 후보)에는 안쪽 금테를 두르지 않는다 — 칸 전체 금테(.gold-area)는 그대로 */
body:not(#gold-a) .gold-head > .gold-line{display:none}
@media (max-width:759px){
  body:not(#gold-a) .rank-block.gold-one > .gold-line,
  body:not(#gold-a) .rank-empty.gold-one > .gold-line,
  body:not(#gold-a) .rank-block.gold-top3 > .gold-line,
  body:not(#gold-a) .rank-empty.gold-top3 > .gold-line{padding:2.73px}
}

/* ── v1.95 칸 전체 금테 — 원탑 칸(세 줄)·탑3 칸(두 줄)·탑3 후보 칸(한 줄) ──────────────
   칸을 상자로 감싸면 형제 선택자(.section-label + .rank-block 등)가 깨지므로,
   칸의 줄마다 조각(<span class="gold-area">)을 그려 잇는다. 첫 줄(.gold-head)은 위 모서리+옆선,
   가운데 줄은 옆선만, 마지막 줄(.gold-last)은 옆선+아래 모서리.
   조각은 칸 바깥 여백(--g)에 그려지고, 줄의 테두리 두께(--gbw)만큼 보정해 위아래·좌우가 한 줄로 맞는다 */
body:not(#gold-a){--gold-gap:16px}
body:not(#gold-a) .gold-one{--g:18px;--aw:30px;--aimg:url("/assets/img/topics-gold2-frame-1.webp?v=20261102-g2");--as:150}
body:not(#gold-a) .gold-top3{--g:16px;--aw:27px;--aimg:url("/assets/img/topics-gold2-frame-2.webp?v=20261102-g2");--as:135}
body:not(#gold-a) .gold-cand{--g:12px;--aw:11px;--aimg:url("/assets/img/topics-gold2-frame-3.webp?v=20261102-g2");--as:44}
body:not(#gold-a) .gold-one,
body:not(#gold-a) .gold-top3,
body:not(#gold-a) .gold-cand{
  --gbw:2px;position:relative;overflow:visible!important;
  width:auto!important;max-width:none!important;margin-left:var(--g)!important;margin-right:var(--g)!important;
  margin-top:0!important;margin-bottom:var(--gold-gap)!important;
}
body:not(#gold-a) .rank-empty.gold-one,
body:not(#gold-a) .rank-empty.gold-top3{--gbw:1px}
body:not(#gold-a) .write-row.gold-cand,
body:not(#gold-a) .more-row.gold-cand{--gbw:0px}
body:not(#gold-a) .gold-head{margin-top:calc(var(--g) + 38px)!important}
body:not(#gold-a) .gold-last{margin-bottom:calc(var(--g) + 38px)!important}
body:not(#gold-a) .gold-area{
  position:absolute;z-index:7;pointer-events:none;box-sizing:border-box;
  left:calc(-1 * (var(--g) + var(--gbw)));right:calc(-1 * (var(--g) + var(--gbw)));
  top:calc(-1 * var(--gbw));bottom:calc(-1 * (var(--gold-gap) + var(--gbw)));
  border-style:solid;border-color:transparent;border-width:0 var(--aw);
  border-image-source:var(--aimg);border-image-slice:var(--as);border-image-repeat:stretch;border-image-width:1;
}
body:not(#gold-a) .gold-head > .gold-area{top:calc(-1 * (var(--g) + var(--gbw)));border-top-width:var(--aw)}
body:not(#gold-a) .gold-last > .gold-area{bottom:calc(-1 * (var(--g) + var(--gbw)));border-bottom-width:var(--aw)}
@media (max-width:759px){
  body:not(#gold-a){--gold-gap:14px}
  body:not(#gold-a) .gold-one{--g:14px;--aw:24px}
  body:not(#gold-a) .gold-top3{--g:12px;--aw:22px}
  body:not(#gold-a) .gold-cand{--g:10px;--aw:9px}
  body:not(#gold-a) .gold-head{margin-top:calc(var(--g) + 30px)!important}
  body:not(#gold-a) .gold-last{margin-bottom:calc(var(--g) + 30px)!important}
}

/* v2.01 모서리 맞춤 — 카드 안쪽 조각(머리 띠·아래 게시판 바탕)이 네모 모서리로 둥근 테두리 밖에 삐져나와
   금테와 어긋나 보였다. 서평단 카드처럼 안쪽 조각을 카드 안쪽 곡선(바깥 둥글기 − 테두리 두께)에 맞춰 둥글게 자르고,
   금 고리도 같은 곡선을 탄다. 카드 바깥 둥글기: PC 20px, 759px 이하 15px (테두리 2px) → 안쪽 18px / 13px.
   빈 자리 카드는 늘 20px·테두리 1px → 19px */
body:not(#gold-a) .rank-block.gold-one,
body:not(#gold-a) .rank-block.gold-top3{--gold-rad:18px}
body:not(#gold-a) .rank-block.gold-one > :first-child,
body:not(#gold-a) .rank-block.gold-top3 > :first-child{border-top-left-radius:var(--gold-rad)!important;border-top-right-radius:var(--gold-rad)!important}
body:not(#gold-a) .rank-block.gold-one > :not(.gold-line):not(.gold-area):has(+ .gold-line),
body:not(#gold-a) .rank-block.gold-top3 > :not(.gold-line):not(.gold-area):has(+ .gold-line){border-bottom-left-radius:var(--gold-rad)!important;border-bottom-right-radius:var(--gold-rad)!important}
@media (max-width:759px){
  body:not(#gold-a) .rank-block.gold-one,
  body:not(#gold-a) .rank-block.gold-top3{--gold-rad:13px}
}