html { scroll-behavior: smooth; }
        body { font-family: 'Kanit', sans-serif; background-color: #fafaf9; caret-color: #1f6e25; }
        html[lang="zh-Hans"] body { font-family: "Noto Sans SC", "Kanit", sans-serif; }
        html[lang="ko"] body { font-family: "Noto Sans KR", "Kanit", sans-serif; }
        html[lang="ja"] body { font-family: "Noto Sans JP", "Kanit", sans-serif; }
        ::selection { background: #b3e4b8; color: #164f1a; }
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: #f5f5f4; }
        ::-webkit-scrollbar-thumb { background: #1f6e25; border-radius: 999px; border: 2px solid #f5f5f4; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .topic-menu { scrollbar-width: thin; scrollbar-color: #d6d3d1 transparent; }
        .topic-menu::-webkit-scrollbar { width: 8px; }
        .topic-menu::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
            outline: 2px solid #1f6e25;
            outline-offset: 3px;
        }
        .herb-card { box-shadow: 0 14px 28px -18px rgba(15, 56, 30, 0.45); }
        .herb-card-img { transition: transform 0.5s ease; }
        .herb-card:hover .herb-card-img { transform: scale(1.06); }
        .tab-btn.active { border-bottom: 3px solid #30a037; color: #164f1a; font-weight: 600; }
        #home h1 { letter-spacing: -0.03em; text-wrap: balance; }
        .nav-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(15, 56, 30, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
        .nav-scrim.open { opacity: 1; pointer-events: auto; }
        .nav-drawer { position: fixed; top: 0; right: 0; z-index: 60; height: 100dvh; width: min(22rem, 88vw); background: #fff; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: -12px 0 32px -18px rgba(15, 56, 30, 0.45); }
        .nav-drawer.open { transform: translateX(0); }
        .skel { background: linear-gradient(90deg, #f5f5f4 25%, #e7e5e4 50%, #f5f5f4 75%); background-size: 200% 100%; animation: skel 1.1s ease-in-out infinite; }
        @keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
        @media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
        @media (min-width: 1024px) {
            .nav-scrim, .nav-drawer { display: none; }
        }