:root {
    --hh-health-ink: #171a18;
    --hh-health-green: #214d43;
    --hh-health-green-bright: #4f8b7d;
    --hh-health-muted: #636a66;
    --hh-health-line: #dfe4e1;
    --hh-health-paper: #f6f4ef;
}

.hh-health-page,
.hh-health-page *,
.hh-health-detail,
.hh-health-detail * { box-sizing: border-box; }
.hh-health-page,
.hh-health-detail { color: var(--hh-health-ink); background: #fff; }
.hh-health-page a,
.hh-health-detail a { color: inherit; text-decoration: none; }

.hh-health-intro { padding: 92px 0 78px; }
.hh-health-intro__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 54px; }
.hh-health-intro__inner > div > p,
.hh-health-list-head p,
.hh-health-principle__inner > div > p,
.hh-health-detail__product p { margin: 0 0 16px; color: var(--hh-health-green-bright); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.hh-health-intro h1 { margin: 0; font-size: clamp(43px, 4.3vw, 66px); font-weight: 650; line-height: 1.1; letter-spacing: -.055em; }
.hh-health-intro__inner > p { width: min(430px, 42%); margin: 0 0 8px; color: #505753; font-size: 17px; font-weight: 430; line-height: 1.75; word-break: keep-all; }

.hh-health-feature { padding-bottom: 110px; }
.hh-health-feature__card { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr); min-height: 510px; overflow: hidden; border: 1px solid var(--hh-health-line); border-radius: 26px; background: #fff; transition: transform .22s ease, box-shadow .22s ease; }
.hh-health-feature__card:hover { transform: translateY(-3px); box-shadow: 0 24px 52px rgba(22,39,33,.09); }
.hh-health-visual { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-width: 0; overflow: hidden; isolation: isolate; }
.hh-health-visual small { position: absolute; top: 27px; left: 30px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.hh-health-visual > strong { position: relative; z-index: 2; font-size: clamp(48px, 5.7vw, 86px); font-weight: 690; line-height: .88; letter-spacing: -.07em; }
.hh-health-visual > i:not(.hh-health-visual__play) { position: absolute; right: -7%; bottom: -18%; z-index: 1; width: 65%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: .26; }
.hh-health-visual > i:not(.hh-health-visual__play)::before { content: ''; position: absolute; top: 16%; left: 16%; width: 68%; height: 68%; border: 1px solid currentColor; border-radius: 50%; }
.hh-health-visual--sleep { padding: 46px; color: #f2eef9; background: linear-gradient(145deg, #2d283a, #75649a); }
.hh-health-visual--curcumin { padding: 46px; color: #4b391c; background: linear-gradient(145deg, #e7d199, #f5e7bf); }
.hh-health-visual--blood { padding: 46px; color: #123f35; background: linear-gradient(145deg, #c7dfd5, #e4efe9); }
.hh-health-feature__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 56px 52px; }
.hh-health-meta { display: inline-flex; align-items: center; gap: 8px; }
.hh-health-meta b,
.hh-health-meta em { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 650; }
.hh-health-meta b { background: var(--hh-health-green); color: #fff; }
.hh-health-meta em { background: #eff3f1; color: #48514c; }
.hh-health-feature__copy > small { margin-top: 19px; color: #7b827e; font-size: 12px; }
.hh-health-feature__copy h2 { margin: 15px 0 0; font-size: clamp(30px, 3vw, 42px); font-weight: 630; line-height: 1.3; letter-spacing: -.045em; word-break: keep-all; }
.hh-health-feature__copy p { margin: 19px 0 0; color: var(--hh-health-muted); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.hh-health-feature__copy > strong { display: inline-flex; align-items: center; gap: 10px; margin-top: 38px; padding-bottom: 7px; border-bottom: 1px solid #7f8782; font-size: 13px; font-weight: 620; }
.hh-health-feature__copy > strong i { font-style: normal; transition: transform .2s ease; }
.hh-health-feature__card:hover .hh-health-feature__copy > strong i { transform: translateX(4px); }

.hh-health-catalog { padding: 95px 0 120px; background: var(--hh-health-paper); }
.hh-health-filter-panel { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; padding: 24px 28px; border: 1px solid #dbdfdc; border-radius: 18px; background: #fff; }
.hh-health-filter-group { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 16px; }
.hh-health-filter-group > strong { font-size: 13px; font-weight: 620; }
.hh-health-filter-group nav { display: flex; flex-wrap: wrap; gap: 7px; }
.hh-health-filter-group a { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; height: 36px; padding: 0 14px; border: 1px solid #dfe3e0; border-radius: 999px; background: #fff; color: #5d655f; font-size: 12px; font-weight: 520; }
.hh-health-filter-group a:hover { border-color: #99a49e; }
.hh-health-filter-group a.is-active { border-color: var(--hh-health-green); background: var(--hh-health-green); color: #fff; font-weight: 620; }
.hh-health-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 76px 0 30px; }
.hh-health-list-head p { margin-bottom: 10px; }
.hh-health-list-head h2 { margin: 0; font-size: 32px; font-weight: 640; letter-spacing: -.045em; }
.hh-health-list-head > span { color: #717874; font-size: 13px; }
.hh-health-list-head > span strong { color: var(--hh-health-green); font-size: 15px; }
.hh-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hh-health-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #dfe3e0; border-radius: 20px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.hh-health-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(25,39,34,.08); }
.hh-health-card > .hh-health-visual { aspect-ratio: 4 / 3; padding: 27px; }
.hh-health-card .hh-health-visual small { top: 23px; left: 25px; }
.hh-health-card .hh-health-visual > strong { font-size: clamp(38px, 4.3vw, 61px); }
.hh-health-visual__play { position: absolute; right: 24px; bottom: 24px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 47px; height: 47px; border: 1px solid currentColor; border-radius: 50%; background: rgba(255,255,255,.13); }
.hh-health-visual__play svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hh-health-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 25px 25px 28px; }
.hh-health-card__body > strong { margin-top: 16px; font-size: 21px; font-weight: 620; line-height: 1.42; letter-spacing: -.035em; word-break: keep-all; }
.hh-health-card__body p { display: -webkit-box; margin: 12px 0 0; overflow: hidden; color: #656c68; font-size: 13px; line-height: 1.65; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hh-health-card__body > small { margin-top: auto; padding-top: 24px; color: #8a918d; font-size: 11px; }
.hh-health-empty { padding: 72px 20px; border: 1px dashed #cbd1cd; border-radius: 18px; background: rgba(255,255,255,.58); text-align: center; }
.hh-health-empty strong { font-size: 20px; font-weight: 620; }
.hh-health-empty p { margin: 10px 0 22px; color: #717874; font-size: 14px; }
.hh-health-empty a { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--hh-health-green); color: #fff; font-size: 13px; font-weight: 600; }

.hh-health-principle { padding: 112px 0; background: #fff; }
.hh-health-principle__inner { display: grid; grid-template-columns: .88fr 1.12fr; gap: 80px; align-items: center; }
.hh-health-principle__inner h2 { margin: 0; font-size: 38px; font-weight: 630; line-height: 1.3; letter-spacing: -.045em; }
.hh-health-principle__list { border-top: 1px solid var(--hh-health-line); }
.hh-health-principle__list span { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 18px; min-height: 78px; border-bottom: 1px solid var(--hh-health-line); }
.hh-health-principle__list b { color: var(--hh-health-green-bright); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.hh-health-principle__list strong { font-size: 16px; font-weight: 530; }

/* detail */
.hh-health-detail__narrow { width: min(760px, calc(100% - 40px)); margin-right: auto; margin-left: auto; }
.hh-health-detail__header { padding: 80px 0 72px; text-align: center; }
.hh-health-detail__back { display: inline-block; margin-bottom: 42px; color: #5f6762; font-size: 13px; font-weight: 560; }
.hh-health-detail__header .hh-health-meta { justify-content: center; }
.hh-health-detail__header h1 { margin: 24px 0 0; font-size: clamp(39px, 4.2vw, 60px); font-weight: 640; line-height: 1.18; letter-spacing: -.055em; word-break: keep-all; }
.hh-health-detail__header p { margin: 24px auto 0; color: #5f6762; font-size: 17px; line-height: 1.75; word-break: keep-all; }
.hh-health-detail__byline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 28px; color: #818884; font-size: 12px; }
.hh-health-detail__byline span + span::before { content: ''; display: inline-block; width: 1px; height: 11px; margin: 0 12px; background: #d6dad7; vertical-align: -1px; }
.hh-health-detail__hero { min-height: 570px; border-radius: 26px; }
.hh-health-detail__hero > strong { font-size: clamp(72px, 10vw, 150px); }
.hh-health-detail__article { padding: 92px 0 110px; }
.hh-health-detail__article section + section { margin-top: 66px; }
.hh-health-detail__article h2 { margin: 0 0 25px; font-size: 27px; font-weight: 630; line-height: 1.4; letter-spacing: -.035em; }
.hh-health-detail__article p { margin: 0; color: #3f4642; font-size: 17px; font-weight: 420; line-height: 2; word-break: keep-all; }
.hh-health-detail__article p + p { margin-top: 22px; }
.hh-health-detail__article aside { margin-top: 74px; padding: 26px 28px; border-left: 3px solid var(--hh-health-green); background: #f4f7f5; }
.hh-health-detail__article aside strong { font-size: 15px; font-weight: 630; }
.hh-health-detail__article aside p { margin-top: 8px; color: #65706a; font-size: 13px; line-height: 1.7; }
.hh-health-detail__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: #111; }
.hh-health-detail__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hh-health-detail__video-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 390px; padding: 40px; border: 1px solid #dce2de; border-radius: 20px; background: #f3f6f4; text-align: center; }
.hh-health-detail__video-empty span { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: var(--hh-health-green); color: #fff; }
.hh-health-detail__video-empty svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hh-health-detail__video-empty strong { margin-top: 22px; font-size: 22px; font-weight: 620; }
.hh-health-detail__video-empty p { margin-top: 8px; color: #737b76; font-size: 13px; }
.hh-health-detail__product { padding: 84px 0; background: #1f2925; color: #fff; }
.hh-health-detail__product .hh-shell { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hh-health-detail__product p { color: #77ad9f; }
.hh-health-detail__product h2 { margin: 0; font-size: 36px; font-weight: 620; line-height: 1.35; letter-spacing: -.04em; }
.hh-health-detail__product a { display: inline-flex; align-items: center; gap: 13px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: 14px; font-weight: 560; }
.hh-health-detail__product a b { font-size: 16px; }
.hh-health-related { padding: 100px 0 120px; }
.hh-health-related .hh-health-list-head { margin-top: 0; }
.hh-health-list-head > a { color: var(--hh-health-green); font-size: 13px; font-weight: 600; }
.hh-health-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hh-health-line); }
.hh-health-related__grid a { display: flex; flex-direction: column; min-height: 210px; padding: 27px 28px; border-bottom: 1px solid var(--hh-health-line); }
.hh-health-related__grid a + a { border-left: 1px solid var(--hh-health-line); }
.hh-health-related__grid span { color: var(--hh-health-green-bright); font-size: 11px; font-weight: 650; }
.hh-health-related__grid strong { margin-top: 18px; font-size: 20px; font-weight: 600; line-height: 1.45; }
.hh-health-related__grid small { margin-top: auto; color: #858c88; font-size: 11px; }

@media (max-width: 920px) {
    .hh-health-feature__card { grid-template-columns: 1fr; }
    .hh-health-feature__card > .hh-health-visual { min-height: 460px; }
    .hh-health-filter-panel { grid-template-columns: 1fr; }
    .hh-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hh-health-principle__inner { grid-template-columns: 1fr; gap: 48px; }
    .hh-health-detail__hero { min-height: 470px; }
}

@media (max-width: 680px) {
    .hh-health-page,
    .hh-health-detail { padding-bottom: 76px; }
    .hh-health-intro { padding: 48px 0 46px; }
    .hh-health-intro__inner { align-items: flex-start; flex-direction: column; gap: 24px; }
    .hh-health-intro__inner > div > p,
    .hh-health-list-head p,
    .hh-health-principle__inner > div > p,
    .hh-health-detail__product p { margin-bottom: 10px; font-size: 10px; }
    .hh-health-intro h1 { font-size: 36px; line-height: 1.15; }
    .hh-health-intro__inner > p { width: 100%; font-size: 15px; line-height: 1.68; }
    .hh-health-feature { padding-bottom: 72px; }
    .hh-health-feature__card { border-radius: 19px; }
    .hh-health-feature__card > .hh-health-visual { min-height: 330px; padding: 28px; }
    .hh-health-visual small { top: 22px; left: 23px; font-size: 9px; }
    .hh-health-feature__copy { padding: 32px 25px 36px; }
    .hh-health-feature__copy h2 { font-size: 27px; }
    .hh-health-feature__copy p { margin-top: 14px; font-size: 14px; }
    .hh-health-feature__copy > strong { margin-top: 28px; }
    .hh-health-catalog { padding: 66px 0 78px; }
    .hh-health-filter-panel { gap: 18px; padding: 20px; }
    .hh-health-filter-group { grid-template-columns: 1fr; gap: 10px; }
    .hh-health-filter-group nav { flex-wrap: nowrap; margin-right: -12px; padding-right: 12px; overflow-x: auto; scrollbar-width: none; }
    .hh-health-filter-group nav::-webkit-scrollbar { display: none; }
    .hh-health-filter-group a { flex: 0 0 auto; }
    .hh-health-list-head { margin: 58px 0 23px; }
    .hh-health-list-head h2 { font-size: 27px; }
    .hh-health-grid { grid-template-columns: 1fr; gap: 16px; }
    .hh-health-card { border-radius: 17px; }
    .hh-health-card > .hh-health-visual { aspect-ratio: 4 / 2.9; }
    .hh-health-card__body { padding: 23px 22px 25px; }
    .hh-health-card__body > strong { font-size: 20px; }
    .hh-health-principle { padding: 76px 0; }
    .hh-health-principle__inner { gap: 36px; }
    .hh-health-principle__inner h2 { font-size: 31px; }
    .hh-health-principle__list span { grid-template-columns: 34px 1fr; gap: 12px; min-height: 70px; }
    .hh-health-principle__list strong { font-size: 14px; }

    .hh-health-detail__header { padding: 48px 0 48px; }
    .hh-health-detail__back { margin-bottom: 30px; }
    .hh-health-detail__header h1 { margin-top: 19px; font-size: 35px; }
    .hh-health-detail__header p { margin-top: 18px; font-size: 15px; }
    .hh-health-detail__hero { min-height: 330px; padding: 28px; border-radius: 18px; }
    .hh-health-detail__article { padding: 66px 0 78px; }
    .hh-health-detail__article section + section { margin-top: 48px; }
    .hh-health-detail__article h2 { margin-bottom: 19px; font-size: 23px; }
    .hh-health-detail__article p { font-size: 16px; line-height: 1.9; }
    .hh-health-detail__article aside { margin-top: 54px; padding: 22px 20px; }
    .hh-health-detail__video-empty { min-height: 300px; }
    .hh-health-detail__product { padding: 66px 0; }
    .hh-health-detail__product .hh-shell { align-items: flex-start; flex-direction: column; gap: 28px; }
    .hh-health-detail__product h2 { font-size: 29px; }
    .hh-health-related { padding: 74px 0 88px; }
    .hh-health-related__grid { grid-template-columns: 1fr; }
    .hh-health-related__grid a { min-height: 170px; padding: 23px 20px; }
    .hh-health-related__grid a + a { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hh-health-page *,
    .hh-health-detail * { scroll-behavior: auto !important; transition: none !important; }
}