/* roulang page: index */
:root {
            --color-primary: #2C221E;
            --color-terracotta: #9E5A44;
            --color-champagne: #EAD8C3;
            --color-sunset: #C87D75;
            --color-sandstone: #F9F7F4;
            --color-cardwarm: #F2EFEB;
            --color-basalt: #1B1513;
            --color-ink: #1E1B18;
            --color-warmgray: #4A443F;
            --color-muted: #8C827A;
            --radius-box: 1rem;
            --radius-card: 0.75rem;
            --shadow-soft: 0 12px 32px -8px rgba(44, 34, 30, 0.08);
            --shadow-hover: 0 20px 40px -12px rgba(44, 34, 30, 0.16);
            --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

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

        body {
            background-color: var(--color-sandstone);
            color: var(--color-warmgray);
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.8;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, h5, h6 {
            color: var(--color-ink);
            line-height: 1.35;
            letter-spacing: -0.01em;
        }

        .hero-title {
            letter-spacing: 0.02em;
            line-height: 1.25;
        }

        .custom-card {
            background: #FFFFFF;
            border: 1px solid rgba(234, 216, 195, 0.6);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-soft);
            transition: var(--transition-smooth);
        }
        .custom-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: var(--color-terracotta);
        }

        .btn-primary {
            background-color: var(--color-terracotta);
            color: #FFFFFF;
            border-radius: 9999px;
            font-weight: 500;
            padding: 0.75rem 1.85rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: var(--transition-smooth);
            box-shadow: 0 4px 14px rgba(158, 90, 68, 0.25);
        }
        .btn-primary:hover {
            background-color: #874A37;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(158, 90, 68, 0.35);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--color-primary);
            border: 1px solid var(--color-terracotta);
            border-radius: 9999px;
            font-weight: 500;
            padding: 0.75rem 1.85rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: var(--transition-smooth);
        }
        .btn-outline:hover {
            background-color: rgba(234, 216, 195, 0.3);
            border-color: var(--color-primary);
            transform: translateY(-2px);
        }

        .badge-sunset {
            background-color: rgba(200, 125, 117, 0.15);
            color: #A34E45;
            border: 1px solid rgba(200, 125, 117, 0.3);
        }

        .badge-champagne {
            background-color: rgba(234, 216, 195, 0.4);
            color: #7A533D;
            border: 1px solid rgba(234, 216, 195, 0.8);
        }

        /* Accordion transition */
        details summary::-webkit-details-marker {
            display: none;
        }
        details summary {
            list-style: none;
        }
        details[open] summary svg {
            transform: rotate(180deg);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #F2EFEB;
        }
        ::-webkit-scrollbar-thumb {
            background: #C4B5A5;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #9E5A44;
        }

/* roulang page: category2 */
:root {
      --color-primary: #2C221E;
      --color-terracotta: #9E5A44;
      --color-champagne: #EAD8C3;
      --color-sunset: #C87D75;
      --color-sandstone: #F9F7F4;
      --color-cardwarm: #F2EFEB;
      --color-basalt: #1B1513;
      --color-ink: #1E1B18;
      --color-warmgray: #4A443F;
      --color-muted: #8C827A;
      --radius-box: 1rem;
      --radius-card: 0.75rem;
      --shadow-soft: 0 12px 32px -8px rgba(44, 34, 30, 0.08);
      --shadow-hover: 0 20px 40px -12px rgba(44, 34, 30, 0.16);
      --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    body {
      background-color: var(--color-sandstone);
      color: var(--color-warmgray);
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.8;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    .custom-card {
      background: #FFFFFF;
      border: 1px solid rgba(234, 216, 195, 0.6);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-soft);
      transition: var(--transition-smooth);
    }
    .custom-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: var(--color-terracotta);
    }
    .btn-primary {
      background-color: var(--color-terracotta);
      color: #FFFFFF;
      border-radius: 9999px;
      font-weight: 500;
      padding: 0.75rem 1.85rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: var(--transition-smooth);
      box-shadow: 0 4px 14px rgba(158, 90, 68, 0.25);
    }
    .btn-primary:hover {
      background-color: #874A37;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(158, 90, 68, 0.35);
    }
    .btn-outline {
      background-color: transparent;
      color: var(--color-primary);
      border: 1px solid var(--color-terracotta);
      border-radius: 9999px;
      font-weight: 500;
      padding: 0.75rem 1.85rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: var(--transition-smooth);
    }
    .btn-outline:hover {
      background-color: rgba(234, 216, 195, 0.3);
      border-color: var(--color-primary);
      transform: translateY(-2px);
    }
    .badge-sunset {
      background-color: rgba(200, 125, 117, 0.15);
      color: #A34E45;
      border: 1px solid rgba(200, 125, 117, 0.3);
    }
    .badge-champagne {
      background-color: rgba(234, 216, 195, 0.4);
      color: #7A533D;
      border: 1px solid rgba(234, 216, 195, 0.8);
    }
    .filter-chip-active {
      background-color: var(--color-terracotta);
      color: #FFFFFF;
      border-color: var(--color-terracotta);
    }
    .filter-chip {
      background-color: #FFFFFF;
      color: var(--color-warmgray);
      border: 1px solid rgba(234, 216, 195, 0.8);
      transition: var(--transition-smooth);
    }
    .filter-chip:hover {
      border-color: var(--color-terracotta);
      color: var(--color-terracotta);
    }
    .horizontal-scroll-container {
      scrollbar-width: thin;
      scrollbar-color: var(--color-terracotta) var(--color-cardwarm);
    }
    .horizontal-scroll-container::-webkit-scrollbar {
      height: 6px;
    }
    .horizontal-scroll-container::-webkit-scrollbar-track {
      background: var(--color-cardwarm);
      border-radius: 9999px;
    }
    .horizontal-scroll-container::-webkit-scrollbar-thumb {
      background: var(--color-terracotta);
      border-radius: 9999px;
    }

/* roulang page: category1 */
:root {
            --color-primary: #2C221E;
            --color-terracotta: #9E5A44;
            --color-champagne: #EAD8C3;
            --color-sunset: #C87D75;
            --color-sandstone: #F9F7F4;
            --color-cardwarm: #F2EFEB;
            --color-basalt: #1B1513;
            --color-ink: #1E1B18;
            --color-warmgray: #4A443F;
            --color-muted: #8C827A;
            --radius-box: 1rem;
            --radius-card: 0.75rem;
            --shadow-soft: 0 12px 32px -8px rgba(44, 34, 30, 0.08);
            --shadow-hover: 0 20px 40px -12px rgba(44, 34, 30, 0.16);
            --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        body {
            background-color: var(--color-sandstone);
            color: var(--color-warmgray);
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.8;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        .custom-card {
            background: #FFFFFF;
            border: 1px solid rgba(234, 216, 195, 0.6);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-soft);
            transition: var(--transition-smooth);
        }
        .custom-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: var(--color-terracotta);
        }
        .btn-primary {
            background-color: var(--color-terracotta);
            color: #FFFFFF;
            border-radius: 9999px;
            font-weight: 500;
            padding: 0.75rem 1.85rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: var(--transition-smooth);
            box-shadow: 0 4px 14px rgba(158, 90, 68, 0.25);
        }
        .btn-primary:hover {
            background-color: #874A37;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(158, 90, 68, 0.35);
        }
        .btn-outline {
            background-color: transparent;
            color: var(--color-primary);
            border: 1px solid var(--color-terracotta);
            border-radius: 9999px;
            font-weight: 500;
            padding: 0.75rem 1.85rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: var(--transition-smooth);
        }
        .btn-outline:hover {
            background-color: rgba(234, 216, 195, 0.3);
            border-color: var(--color-primary);
            transform: translateY(-2px);
        }
        .badge-sunset {
            background-color: rgba(200, 125, 117, 0.15);
            color: #A34E45;
            border: 1px solid rgba(200, 125, 117, 0.3);
        }
        .badge-champagne {
            background-color: rgba(234, 216, 195, 0.4);
            color: #7A533D;
            border: 1px solid rgba(234, 216, 195, 0.8);
        }
        .filter-chip {
            transition: var(--transition-smooth);
        }
        .filter-chip.active {
            background-color: var(--color-terracotta);
            color: #FFFFFF;
            border-color: var(--color-terracotta);
        }
        details summary::-webkit-details-marker {
            display: none;
        }