:root {
      --bg: #f7f8fb;
      --surface: #ffffff;
      --text: #1f2430;
      --muted: #667085;
      --border: #e8ebf2;
      --primary: #ff9900;
      --primary-soft: #fff3df;
      --primary-dark: #c86b00;
      --danger: #e53935;
      --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      --radius: 18px;
      --radius-sm: 12px;
      --container: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { font: inherit; }

    .container {
      width: min(var(--container), calc(100% - 24px));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,0.88);
      border-bottom: 1px solid rgba(232,235,242,0.8);
    }

    .site-header__inner {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      align-items: center;
      min-height: 72px;
    }

    .site-logo {
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: .02em;
      white-space: nowrap;
    }

    .site-search {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 8px 10px 8px 14px;
    }

    .site-search input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 0.95rem;
    }

    .site-search button,
    .cta-button,
    .book-cta,
    .store-link {
      min-height: 44px;
    }

    .site-search button {
      border: 0;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      padding: 0 14px;
      font-weight: 700;
      cursor: pointer;
    }

    .header-links {
      display: flex;
      gap: 10px;
      font-size: 0.9rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .hero {
      padding: 22px 0 10px;
    }

    .hero-card {
      display: grid;
      grid-template-columns: 1.25fr .85fr;
      gap: 22px;
      background: linear-gradient(135deg, #fff8ef 0%, #ffffff 55%, #fff2dc 100%);
      border: 1px solid #ffe1b8;
      border-radius: 26px;
      box-shadow: var(--shadow);
      padding: 24px;
      overflow: hidden;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary-dark);
      font-size: 0.85rem;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .hero h1 {
      font-size: clamp(1.7rem, 3vw, 2.7rem);
      line-height: 1.2;
      margin: 0 0 10px;
    }

    .hero p {
      margin: 0 0 16px;
      color: #495365;
      font-size: 1rem;
    }

    .hero-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      border-radius: 999px;
      font-weight: 800;
      box-shadow: 0 8px 20px rgba(255, 153, 0, 0.25);
    }

    .cta-button--primary {
      background: var(--primary);
      color: #fff;
    }

    .cta-button--secondary {
      background: #fff;
      border: 1px solid #ffd79c;
      color: var(--primary-dark);
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .hero-featured-card {
      align-self: stretch;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(255,255,255,0.8);
      border-radius: 20px;
      padding: 14px;
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 14px;
    }

    .cover {
      aspect-ratio: 3 / 4.25;
      background: linear-gradient(180deg, #f9d38b 0%, #f59e0b 100%);
      border-radius: 14px;
      box-shadow: 0 10px 18px rgba(245, 158, 11, 0.18);
      position: relative;
      overflow: hidden;
    }

    .cover::after {
      content: "COMIC";
      position: absolute;
      inset: auto 8px 8px auto;
      background: rgba(255,255,255,0.92);
      color: #7c5200;
      font-weight: 900;
      font-size: .75rem;
      padding: 4px 8px;
      border-radius: 999px;
    }

    .category-nav {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 14px 0 6px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .category-nav::-webkit-scrollbar { display: none; }
    .category-chip {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--border);
      font-weight: 700;
      color: #384152;
      box-shadow: 0 4px 12px rgba(15,23,42,0.04);
    }

    main { padding: 12px 0 96px; }

    .section {
      margin-top: 20px;
    }

    .section-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .section-title {
      margin: 0;
      font-size: 1.3rem;
      line-height: 1.3;
    }

    .section-link {
      font-size: 0.92rem;
      color: var(--primary-dark);
      font-weight: 800;
    }

    .cards-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .book-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    .book-card--featured {
      border-color: #ffd79f;
      box-shadow: 0 10px 24px rgba(255, 153, 0, 0.12);
    }

    .book-thumb {
      aspect-ratio: 3 / 4.2;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffe1a6, #f59e0b);
      position: relative;
      overflow: hidden;
    }

    .book-thumb--alt { background: linear-gradient(180deg, #cfe5ff, #4f8ef7); }
    .book-thumb--sale { background: linear-gradient(180deg, #ffd1d1, #ff6b57); }
    .book-thumb--media { background: linear-gradient(180deg, #e3d6ff, #8b5cf6); }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 0.76rem;
      font-weight: 800;
      background: #f3f5f9;
      color: #546173;
    }

    .tag--free { background: #eaf8ef; color: #16803d; }
    .tag--new { background: #e9f2ff; color: #225cd1; }
    .tag--sale { background: #fff1ef; color: #cf3b2e; }
    .tag--hot { background: var(--primary-soft); color: var(--primary-dark); }

    .book-title {
      margin: 0;
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.45;
    }

    .book-desc,
    .book-sub {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .book-sub { font-size: 0.82rem; }

    .book-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0 14px;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(255, 153, 0, 0.22);
    }

    .book-cta--featured {
      background: linear-gradient(180deg, #ffad22 0%, #ff8c00 100%);
    }

    .store-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .store-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid #ffd18b;
      background: var(--primary-soft);
      color: var(--primary-dark);
      font-size: .8rem;
      font-weight: 800;
    }

    .store-link--more {
      cursor: pointer;
      background: #fff;
      border-style: dashed;
      border-color: #d8dce5;
      color: #586577;
    }

    .store-link--more.is-expanded {
      background: #faf8f4;
      color: #756854;
      border-color: #ddd6cc;
      box-shadow: 0 1px 4px rgba(0,0,0,.03);
    }

    .store-more[hidden] { display: none !important; }

    .rank-list {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }

    .rank-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #111827;
      color: #fff;
      font-weight: 900;
      font-size: 0.9rem;
    }

    .mini-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .banner-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .banner {
      border-radius: 18px;
      padding: 16px;
      min-height: 118px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: var(--shadow);
    }
    .banner:nth-child(1) { background: linear-gradient(135deg, #ff8a00, #ffb347); }
    .banner:nth-child(2) { background: linear-gradient(135deg, #4f8ef7, #6dc8ff); }
    .banner:nth-child(3) { background: linear-gradient(135deg, #8b5cf6, #c084fc); }

    .tags-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .footer {
      margin-top: 24px;
      padding: 26px 0 34px;
      color: var(--muted);
      font-size: 0.9rem;
      text-align: center;
    }

    @media (max-width: 1024px) {
      .hero-card,
      .cards-row,
      .rank-list,
      .mini-grid,
      .banner-row {
        grid-template-columns: 1fr 1fr;
      }
      .hero-card { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      .site-header__inner {
        grid-template-columns: 1fr;
        padding: 10px 0 12px;
      }
      .header-links { display: none; }
      .hero-card,
      .cards-row,
      .rank-list,
      .mini-grid,
      .banner-row,
      .hero-featured-card {
        grid-template-columns: 1fr;
      }
      .hero-featured-card { grid-template-columns: 88px 1fr; }
      .section-card { padding: 14px; }
    }

    /* ===== V2 additions ===== */
    .utility-bar {
      background: #111827;
      color: #fff;
      font-size: .82rem;
    }
    .utility-bar__inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      min-height: 36px;
    }
    .view-switch {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .view-switch button {
      border: 1px solid rgba(255,255,255,.28);
      background: transparent;
      color: #fff;
      border-radius: 999px;
      min-height: 28px;
      padding: 0 10px;
      cursor: pointer;
      font-size: .78rem;
    }
    .view-switch button[aria-pressed="true"] {
      background: #fff;
      color: #111827;
    }

    .global-store-nav {
      position: sticky;
      top: 72px;
      z-index: 90;
      background: rgba(247,248,251,.94);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
    .global-store-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 10px 0;
      scrollbar-width: none;
    }
    .global-store-tabs::-webkit-scrollbar { display: none; }
    .global-store-tab {
      flex: 0 0 auto;
      min-height: 44px;
      padding: 0 18px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: #fff;
      color: #435064;
      font-weight: 900;
      cursor: pointer;
    }
    .global-store-tab[aria-selected="true"] {
      background: #111827;
      border-color: #111827;
      color: #fff;
      box-shadow: 0 8px 18px rgba(17,24,39,.16);
    }

    .filter-panel {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      margin: 12px 0 2px;
    }
    .genre-filters {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .genre-filters::-webkit-scrollbar { display: none; }
    .genre-filter {
      flex: 0 0 auto;
      border: 1px solid var(--border);
      background: #fff;
      color: #475467;
      border-radius: 999px;
      min-height: 38px;
      padding: 0 14px;
      font-weight: 800;
      cursor: pointer;
    }
    .genre-filter.is-active {
      background: var(--primary-soft);
      border-color: #ffcf85;
      color: var(--primary-dark);
    }
    .result-status {
      color: var(--muted);
      font-size: .85rem;
      white-space: nowrap;
    }

    .release-layout {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .release-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      display: grid;
      grid-template-columns: 104px 1fr;
      gap: 12px;
    }
    .release-card .book-thumb { min-height: 148px; }
    .release-content {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .price-line {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: .82rem;
      font-weight: 800;
    }
    .price-pill {
      border-radius: 999px;
      padding: 4px 8px;
      background: #f4f6f8;
      color: #475467;
    }
    .backlist {
      margin-top: 2px;
      padding-top: 8px;
      border-top: 1px dashed var(--border);
    }
    .backlist-title {
      margin: 0 0 6px;
      font-size: .78rem;
      font-weight: 900;
      color: #475467;
    }
    .backlist-links {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .backlist-links::-webkit-scrollbar { display: none; }
    .backlist-link {
      flex: 0 0 auto;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      background: #f7f8fb;
      border: 1px solid var(--border);
      font-size: .76rem;
      font-weight: 800;
    }

    .media-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 12px;
    }
    .media-services {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .media-service {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      background: #f3efff;
      border: 1px solid #ded4ff;
      color: #6547b8;
      font-size: .76rem;
      font-weight: 900;
    }

    .notice-strip {
      border: 1px solid #ffe1b8;
      background: #fff8ef;
      border-radius: 14px;
      padding: 10px 12px;
      color: #7c5200;
      font-size: .86rem;
      font-weight: 700;
      margin-top: 12px;
    }

    body.preview-mobile .container { width: min(430px, calc(100% - 20px)); }
    body.preview-mobile .site-header__inner { grid-template-columns: 1fr; padding: 10px 0 12px; }
    body.preview-mobile .header-links { display: none; }
    body.preview-mobile .hero-card,
    body.preview-mobile .cards-row,
    body.preview-mobile .rank-list,
    body.preview-mobile .mini-grid,
    body.preview-mobile .banner-row,
    body.preview-mobile .release-layout {
      grid-template-columns: 1fr;
    }
    body.preview-mobile .global-store-nav { top: 128px; }
    body.preview-mobile .release-card { grid-template-columns: 88px 1fr; }

    @media (max-width: 1024px) {
      .release-layout { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 720px) {
      .utility-bar__inner { min-height: 34px; }
      .utility-copy { display: none; }
      .global-store-nav { top: 128px; }
      .filter-panel { grid-template-columns: 1fr; }
      .release-layout { grid-template-columns: 1fr; }
      .release-card { grid-template-columns: 88px 1fr; }
      .media-card { grid-template-columns: 78px 1fr; }
    }

    .campaign-hero { padding: 22px 0 10px; }
    .campaign-carousel-wrap { background:#fff; border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow); padding:20px; overflow:hidden; }
    .campaign-carousel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
    .campaign-carousel-head h1 { margin:0 0 8px; font-size:clamp(1.55rem,3vw,2.35rem); line-height:1.25; }
    .campaign-carousel-head p { margin:0; color:var(--muted); }
    .campaign-carousel-controls { display:none; }
    .carousel-control { width:44px; height:44px; border:1px solid var(--border); border-radius:50%; background:#fff; color:#344054; font-size:1.5rem; cursor:pointer; }
    .campaign-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,38%); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:2px 2px 8px; }
    .campaign-carousel::-webkit-scrollbar { display:none; }
    .campaign-slide { scroll-snap-align:start; min-height:230px; border-radius:20px; padding:18px; color:#fff; display:flex; flex-direction:column; gap:10px; box-shadow:0 12px 26px rgba(15,23,42,.12); }
    .campaign-slide--kindle { background:linear-gradient(135deg,#f59e0b,#ff7a00); }
    .campaign-slide--rakuten { background:linear-gradient(135deg,#bf0000,#e34444); }
    .campaign-slide--dmm { background:linear-gradient(135deg,#2447d8,#5578ff); }
    .campaign-slide__top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
    .campaign-store { font-size:.88rem; font-weight:900; }
    .campaign-slide h2 { margin:0; font-size:1.35rem; line-height:1.35; }
    .campaign-slide p { margin:0; color:rgba(255,255,255,.9); font-size:.92rem; }
    .campaign-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; font-size:.76rem; font-weight:800; }
    .campaign-meta span { padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.25); }
    .campaign-cta { min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#fff; color:#202939; font-weight:900; }
    .campaign-carousel-dots { display:flex; justify-content:center; gap:8px; margin-top:10px; }
    .carousel-dot { width:9px; height:9px; border:0; padding:0; border-radius:50%; background:#d0d5dd; cursor:pointer; }
    .carousel-dot.is-active { width:24px; border-radius:999px; background:var(--primary); }
    @media (max-width:1024px){ .campaign-carousel{grid-auto-columns:minmax(280px,58%);} }
    @media (max-width:720px){ .campaign-carousel-wrap{padding:14px;} .campaign-carousel-head{align-items:flex-start;} .campaign-carousel-controls{display:none;} .campaign-carousel{grid-auto-columns:88%;} .campaign-slide{min-height:220px;} }

    .store-link.is-unavailable {
      background: #f7f8fb;
      border-color: #d8dce5;
      color: #98a2b3;
      pointer-events: none;
      box-shadow: none;
    }


    .campaign-carousel-stage {
      position: relative;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 48px;
      align-items: center;
      gap: 8px;
    }
    .carousel-control--side {
      position: relative;
      z-index: 5;
      width: 46px;
      height: 46px;
      flex: 0 0 auto;
      background: #fff;
      border: 1px solid var(--border);
      box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
    }
    .carousel-control--prev { justify-self: start; }
    .carousel-control--next { justify-self: end; }

    @media (max-width: 720px) {
      .campaign-carousel-stage {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 4px;
      }
      .carousel-control--side {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 48px;
        border-radius: 12px;
        font-size: 1.35rem;
      }
      .campaign-carousel {
        grid-auto-columns: 92%;
      }
    }


    .free-priority-badge {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: #111827;
      color: #fff;
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .02em;
    }


    /* ===== Step 2: section and card differentiation ===== */
    .section-title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .section-symbol {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 48px;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .06em;
    }

    .section--free .section-card {
      border-top: 4px solid #22a35a;
      background: linear-gradient(180deg, #fbfffc 0%, #ffffff 16%);
    }
    .section--free .section-symbol {
      background: #eaf8ef;
      color: #16803d;
    }
    .section--free .section-link {
      color: #16803d;
    }

    .section--sale .section-card {
      border-top: 4px solid #e5483f;
      background: linear-gradient(180deg, #fffafa 0%, #ffffff 16%);
    }
    .section--sale .section-symbol {
      background: #fff0ef;
      color: #c9362f;
    }
    .section--sale .section-link {
      color: #c9362f;
    }

    .section--new .section-card {
      border-top: 4px solid #3678e5;
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 16%);
    }
    .section--new .section-symbol {
      background: #e9f2ff;
      color: #225cd1;
    }
    .section--new .section-link {
      color: #225cd1;
    }

    .card-type--free {
      border-color: #dcefe3;
      box-shadow: inset 0 3px 0 #dff5e7;
    }
    .card-type--free .book-cta {
      background: linear-gradient(180deg, #25ad61 0%, #188c49 100%);
      box-shadow: 0 8px 18px rgba(24, 140, 73, .20);
    }
    .card-type--free .store-link {
      background: #eef9f2;
      border-color: #ccebd8;
      color: #18723f;
    }

    .card-type--sale {
      border-color: #f3d5d2;
      box-shadow: inset 0 3px 0 #ffe0dd;
    }
    .card-type--sale .book-cta {
      background: linear-gradient(180deg, #ef5a50 0%, #d93c34 100%);
      box-shadow: 0 8px 18px rgba(217, 60, 52, .20);
    }
    .card-type--sale .store-link {
      background: #fff4f2;
      border-color: #f4cbc7;
      color: #b8322b;
    }

    .card-type--new {
      border-color: #d8e6fb;
      box-shadow: inset 0 3px 0 #dfeeff;
    }
    .card-type--new .store-link {
      background: #eff5ff;
      border-color: #cdddf8;
      color: #285fb7;
    }
    .card-type--new .backlist {
      background: #f8fbff;
      border: 1px solid #e0ebfb;
      border-radius: 12px;
      padding: 8px;
    }
    .card-type--new .backlist-link {
      background: #fff;
      border-color: #d8e5f8;
      color: #315f9f;
    }

    .notice-strip--free {
      border-color: #cfead9;
      background: #f1fbf5;
      color: #18723f;
    }
    .notice-strip--sale {
      border-color: #f1d0cd;
      background: #fff4f3;
      color: #a9312a;
      margin-bottom: 14px;
    }
    .notice-strip--new {
      border-color: #cfe0f8;
      background: #f3f8ff;
      color: #285b9e;
    }

    @media (max-width: 720px) {
      .section-symbol {
        min-width: 44px;
        padding: 0 8px;
      }
      .section-title-wrap {
        gap: 8px;
      }
    }


    .section--ranking .section-card {
      border-top: 4px solid #111827;
    }
    .section--ranking .section-symbol {
      background: #111827;
      color: #fff;
    }
    .ranking-store-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 2px 0 12px;
      scrollbar-width: none;
    }
    .ranking-store-tabs::-webkit-scrollbar { display: none; }
    .ranking-store-tab {
      flex: 0 0 auto;
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: #fff;
      color: #475467;
      font-weight: 900;
      cursor: pointer;
    }
    .ranking-store-tab[aria-selected="true"] {
      background: #111827;
      border-color: #111827;
      color: #fff;
      box-shadow: 0 7px 16px rgba(17,24,39,.16);
    }
    .ranking-panel[hidden] { display: none !important; }
    .ranking-card .store-links {
      margin-top: auto;
    }