/* Standalone ranking; colors match the existing cream + forest green site. */
.ranking-wrap{max-width:1060px;margin:0 auto; padding:0 16px}
.ranking-intro{background:linear-gradient(125deg,#eaf0e6 0%,#fff4e5 100%);padding:90px 0 40px;border-bottom:1px solid #e5e8de}
.ranking-kicker{font-size:12px;font-weight:900;letter-spacing:.12em;color:#ac714c}
.ranking-intro h1{color:#214542;font-size:clamp(30px,5vw,48px);margin:12px 0 9px;line-height:1.35}
.ranking-intro p{color:#58716c;max-width:680px;line-height:1.9}
.ranking-intro-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:17px}
.ranking-intro-links a{color:#214542;font-weight:800;text-underline-offset:4px;font-size:13px}
.ranking-main{background:#f7f8f2;padding:36px 0 100px;min-height:500px}
.ranking-status{margin:0 0 25px;font-size:13px;color:#526b60}
.ranking-section{margin:0 0 48px}
.ranking-section h2{color:#214542;font-size:clamp(21px,3vw,27px);margin:0 0 16px}
.ranking-section>p{font-size:13px;color:#6a786d;margin:0 0 12px}
.ranking-list{display:grid;grid-template-columns:1fr;gap:10px}
.ranking-top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.rank-row{display:grid;grid-template-columns:44px 104px minmax(0,1fr) auto;gap:13px;align-items:center;padding:14px;border:1px solid #e4e6dd;border-radius:13px;background:#fffaf2;min-width:0}
.rank-number{font-size:22px;font-weight:900;color:#b28b62;text-align:center;font-variant-numeric:tabular-nums}
.rank-photo{display:block;overflow:hidden;border-radius:9px;background:#e3e5da;width:104px;height:79px}
.rank-photo img{display:block;width:100%;height:100%;object-fit:cover}
.rank-content{min-width:0}
.rank-meta{font-size:10px;font-weight:800;color:#8c796b;margin:0 0 5px}
.rank-name{color:#214542;font-size:15px;font-weight:900;text-decoration:none;line-height:1.5}
.rank-name:hover{text-decoration:underline}
.rank-summary{font-size:11px;line-height:1.7;color:#63716a;margin:5px 0 0}
.rank-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rank-bookmark{height:37px;width:37px;padding:8px;border:1px solid #c3d0c4;border-radius:50%;background:#fff;color:#29534f;cursor:pointer;display:grid;place-items:center}
.rank-bookmark-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.rank-bookmark.is-saved{background:#e5f0e5;color:#226053;border-color:#7eaaa2}
.rank-bookmark.is-saved .rank-bookmark-icon{fill:currentColor}
.rank-bookmark:focus-visible{outline:3px solid #bc774c;outline-offset:3px}
.rank-row--top{grid-template-columns:34px 78px minmax(0,1fr);gap:10px}
.rank-row--top .rank-photo{height:74px;width:78px}
.rank-row--top .rank-actions{grid-column:3;justify-content:flex-start}
.rank-row--top .rank-number{font-size:19px}
.rank-row--top:nth-child(1){border-color:#dbb46b;background:#fff6e0}
.rank-row--top:nth-child(2){border-color:#bdc5c2}
.rank-row--top:nth-child(3){border-color:#dbc6aa}
.rank-row--top .rank-summary{display:none}
.ranking-footnote{padding:18px 20px;background:#eef2e8;border-radius:12px;line-height:1.8;font-size:12px;color:#5b6e66}
@media(max-width:760px){.ranking-top-grid{grid-template-columns:1fr}.rank-row--top{grid-template-columns:40px 104px minmax(0,1fr)}.rank-row--top .rank-photo{width:104px}.rank-row{grid-template-columns:30px 75px minmax(0,1fr);gap:9px;padding:10px}.rank-photo{width:75px;height:73px}.rank-actions{grid-column:3;justify-content:flex-start}.rank-name{font-size:13px}.rank-number{font-size:17px}.ranking-main{padding:24px 0 70px}.ranking-intro{padding:80px 0 25px}}
@media(max-width:390px){.rank-row,.rank-row--top{grid-template-columns:28px 65px minmax(0,1fr)}.rank-photo,.rank-row--top .rank-photo{width:65px;height:69px}.rank-summary{display:none}}

/* v10.2: readable mobile ranking cards and meaningful Japanese line breaks. */
@media (max-width: 760px) {
  .ranking-intro h1 {
    font-size: clamp(25px, 6vw, 31px);
    line-height: 1.48;
    letter-spacing: -.035em;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .ranking-intro h1 .ranking-title-line {
    display: block;
  }
  .ranking-intro-links {
    column-gap: 16px;
    row-gap: 10px;
  }
  .ranking-intro-links a {
    line-height: 1.65;
    white-space: normal;
  }
  /* Explicit placement prevents inherited grid/width rules from colliding. */
  .rank-row, .rank-row--top {
    grid-template-columns: 30px minmax(0, 84px) minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 9px;
    align-items: start;
    padding: 13px;
    min-width: 0;
  }
  .rank-row .rank-number, .rank-row--top .rank-number {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .rank-row .rank-photo, .rank-row--top .rank-photo {
    grid-column: 2;
    grid-row: 1;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    min-width: 0;
  }
  .rank-row .rank-photo img, .rank-row--top .rank-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
  }
  .rank-row .rank-content, .rank-row--top .rank-content {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .rank-row .rank-name, .rank-row--top .rank-name {
    display: inline-block;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .rank-row .rank-meta, .rank-row--top .rank-meta {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .rank-row .rank-actions, .rank-row--top .rank-actions {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
  }
  .rank-row--top .rank-photo { width: 100%; }
}
@media (max-width: 390px) {
  .rank-row, .rank-row--top {
    grid-template-columns: 26px minmax(0, 72px) minmax(0, 1fr);
    column-gap: 9px;
    padding: 11px 9px;
  }
  .rank-row .rank-name, .rank-row--top .rank-name { font-size: 12px; }
  .rank-row .rank-number, .rank-row--top .rank-number { font-size: 16px; }
  .rank-row .rank-actions, .rank-row--top .rank-actions { gap: 6px; }
}

/* v10.3: compact, thumb-friendly ranking cards on narrow screens.
   Existing spot/like/bookmark markup and behaviour remain unchanged. */
@media (max-width: 760px) {
  .ranking-top-grid,
  .ranking-list {
    gap: 9px;
  }
  .rank-row,
  .rank-row--top {
    grid-template-columns: 28px 76px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 0;
    min-height: 99px;
    padding: 10px 12px;
    align-items: center;
  }
  .rank-row .rank-number,
  .rank-row--top .rank-number {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-size: 17px;
  }
  .rank-row .rank-photo,
  .rank-row--top .rank-photo {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 76px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .rank-row .rank-content,
  .rank-row--top .rank-content {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    padding-bottom: 34px; /* dedicated space for the buttons, no text collision */
  }
  .rank-row .rank-meta,
  .rank-row--top .rank-meta {
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1.5;
  }
  .rank-row .rank-name,
  .rank-row--top .rank-name {
    font-size: 13px;
    line-height: 1.55;
  }
  .rank-row .rank-summary,
  .rank-row--top .rank-summary {
    display: none; /* detail pages carry the full description */
  }
  .rank-row .rank-actions,
  .rank-row--top .rank-actions {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 7px;
    margin: 0;
  }
  .rank-row .rank-bookmark,
  .rank-row--top .rank-bookmark {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 6px;
  }
  .rank-row .rank-bookmark-icon,
  .rank-row--top .rank-bookmark-icon {
    width: 16px;
    height: 16px;
  }
  .rank-row .rank-like,
  .rank-row--top .rank-like {
    min-height: 32px;
    padding: 3px 9px;
    gap: 5px;
    font-size: 11px;
    line-height: 1;
  }
  .rank-row .rank-like svg,
  .rank-row--top .rank-like svg {
    width: 15px;
    height: 15px;
  }
  .rank-row .rank-like .sanpo-like-count,
  .rank-row--top .rank-like .sanpo-like-count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
}
@media (max-width: 390px) {
  .rank-row,
  .rank-row--top {
    grid-template-columns: 24px 66px minmax(0,1fr);
    column-gap: 8px;
    min-height: 93px;
    padding: 9px;
  }
  .rank-row .rank-photo,
  .rank-row--top .rank-photo {
    width: 66px;
  }
  .rank-row .rank-name,
  .rank-row--top .rank-name { font-size: 12px; }
  .rank-row .rank-number,
  .rank-row--top .rank-number { font-size: 16px; }
  .rank-row .rank-actions,
  .rank-row--top .rank-actions { gap: 6px; }
}