@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;800&display=swap');
/* === healthandvita.com — 헬스앤비타 · 비타민·활력 영양 노트 (2026-10-22 신설) ===
   은유: 귤 단면·비타민 컬러칩. 귤색(#FF6A13) · 잎초록(#1E9E57) · 레몬(#FFD43B) · 베리(#D6336C), 흰 바탕, 큰 원과 둥근 사진. */
.skin-hvita {
    --vt-orange: #ff6a13;
    --vt-orange-d: #d94f00;
    --vt-leaf: #1e9e57;
    --vt-lemon: #ffd43b;
    --vt-berry: #d6336c;
    --vt-ink: #1d1a17;
    --vt-sub: #6b6259;
    --vt-soft: #fff4ea;
    --vt-pop: 'Poppins', 'Pretendard Variable', Pretendard, sans-serif;
    background: #fff;
    color: var(--vt-ink);
}
.skin-hvita a { text-decoration: none; color: inherit; }
.skin-hvita .vt-t0 { --c: var(--vt-orange); --cl: #ffe9da; }
.skin-hvita .vt-t1 { --c: var(--vt-leaf); --cl: #def4e7; }
.skin-hvita .vt-t2 { --c: var(--vt-berry); --cl: #fde3ec; }
.skin-hvita .vt-t3 { --c: #c99700; --cl: #fff5cc; }

.skin-hvita .main-header { background: #fff; border-bottom: 0; padding: 14px 0; }
.skin-hvita .containerHeader { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
.skin-hvita .main-header .brand-logo,
.skin-hvita .main-header .brand-logo a { font-size: 1.5rem; margin: 0; color: var(--vt-ink); letter-spacing: -0.8px; font-weight: 900; display: flex; align-items: center; }
.skin-hvita .main-header .brand-logo a::before {
    content: ''; flex: 0 0 auto; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0 18%, transparent 19%), repeating-conic-gradient(var(--vt-orange) 0 26deg, #ffb36b 26deg 30deg);
    box-shadow: 0 0 0 3px #ffd2a8;
}
.skin-hvita .main-header nav { width: auto; border-top: 0; padding-top: 0; }
.skin-hvita .main-header nav ul { gap: 4px; margin: 0; justify-content: flex-end; }
.skin-hvita header nav ul li a { color: var(--vt-ink); font-weight: 700; font-size: .93rem; padding: 8px 14px; text-transform: none; border-radius: 999px; }
.skin-hvita header nav ul li a:hover { background: var(--vt-orange); color: #fff; }
.skin-hvita .menu-toggle { background: var(--vt-orange); color: #fff; border-radius: 50%; }
.skin-hvita .close-menu { background: var(--vt-orange); color: #fff; border-radius: 999px; }
.skin-hvita .mobile-menu-overlay { background: #fff; }
.skin-hvita .mobile-menu-header .logo { color: var(--vt-ink); }
.skin-hvita .mobile-menu a { text-transform: none; }

/* 첫 화면 — 귤색 판 + 단면 원 */
.skin-hvita .vt-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 20px; margin: 10px 0 0; padding: 56px 0 56px 56px; background: var(--vt-orange); border-radius: 40px; color: #fff; overflow: hidden; }
.skin-hvita .vt-kicker { display: inline-block; font-size: .85rem; font-weight: 800; background: var(--vt-lemon); color: var(--vt-ink); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.skin-hvita .vt-hero h2 { font-size: 2.8rem; line-height: 1.22; letter-spacing: -1.8px; margin: 0 0 16px; font-weight: 900; color: #fff; }
.skin-hvita .vt-hero-text p { margin: 0; max-width: 28em; font-size: 1.05rem; line-height: 1.7; color: #fff3e8; }
.skin-hvita .vt-slice { justify-self: end; width: 380px; height: 380px; margin-right: -90px; border-radius: 50%; position: relative;
    background: radial-gradient(circle, transparent 0 86%, #fff 86% 90%, #ffb36b 90% 100%),
                repeating-conic-gradient(#ffa64d 0 33deg, #fff2e0 33deg 36deg);
    box-shadow: 0 0 0 14px rgba(255, 255, 255, .18); }
.skin-hvita .vt-slice-core { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff2e0; }

/* 분야 — 영양소 칩 */
.skin-hvita .vt-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; }
.skin-hvita .vt-chip { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 999px; background: var(--cl); min-width: 0; transition: transform .15s; }
.skin-hvita .vt-chip:hover { transform: translateY(-3px); }
.skin-hvita .vt-chip-dot { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--c); color: #fff; font-family: var(--vt-pop); font-weight: 800; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; }
.skin-hvita .vt-chip-text { display: flex; flex-direction: column; min-width: 0; }
.skin-hvita .vt-chip-text strong { font-size: 1.02rem; }
.skin-hvita .vt-chip-text em { font-style: normal; font-size: .82rem; color: var(--vt-sub); }

/* 목록 — 큰 글 하나 + 원형 사진 목록 */
.skin-hvita .vt-list { margin: 48px 0 40px; }
.skin-hvita .vt-h { font-size: 1.6rem; font-weight: 900; letter-spacing: -1px; margin: 0 0 20px; }
.skin-hvita .vt-h::after { content: ''; display: block; width: 48px; height: 6px; border-radius: 3px; margin-top: 10px; background: linear-gradient(90deg, var(--vt-orange) 0 33%, var(--vt-leaf) 33% 66%, var(--vt-lemon) 66%); }
.skin-hvita .vt-empty { background: var(--vt-soft); border-radius: 24px; padding: 30px; text-align: center; color: var(--vt-sub); }
.skin-hvita .vt-pill { display: inline-block; font-size: .78rem; font-weight: 800; color: #fff; background: var(--c); padding: 4px 12px; border-radius: 999px; }
.skin-hvita .vt-lead a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; background: var(--cl); border-radius: 32px; overflow: hidden; }
.skin-hvita .vt-lead-thumb { min-height: 320px; background-size: cover; background-position: center; }
.skin-hvita .vt-lead-info { padding: 36px 36px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.skin-hvita .vt-lead-info h3 { font-size: 1.6rem; line-height: 1.38; letter-spacing: -0.8px; margin: 14px 0 10px; }
.skin-hvita .vt-lead-info p { font-size: .95rem; line-height: 1.7; color: var(--vt-sub); margin: 0 0 14px; }
.skin-hvita .vt-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-top: 30px; }
.skin-hvita .vt-item { min-width: 0; }
.skin-hvita .vt-item a { display: flex; gap: 16px; align-items: center; }
.skin-hvita .vt-item-thumb { flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--cl); box-shadow: 0 0 0 5px var(--cl); }
.skin-hvita .vt-item-info { min-width: 0; }
.skin-hvita .vt-item-cat { font-size: .78rem; font-weight: 800; color: var(--c); }
.skin-hvita .vt-item-info h3 { font-size: 1rem; line-height: 1.45; margin: 4px 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skin-hvita .vt-item a:hover h3 { color: var(--vt-orange-d); }
.skin-hvita time { font-size: .8rem; color: #a0958a; font-family: var(--vt-pop); }

.skin-hvita .vt-official { margin: 0 0 48px; }
.skin-hvita .vt-official .vt-h { font-size: 1.3rem; }
.skin-hvita .vt-official-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.skin-hvita .vt-official-row a { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: 24px; background: #f6faf4; border: 2px solid #def4e7; }
.skin-hvita .vt-official-row a:hover { border-color: var(--vt-leaf); }
.skin-hvita .vt-official-row strong { font-size: .98rem; }
.skin-hvita .vt-official-row span { font-size: .84rem; color: var(--vt-sub); }

.skin-hvita .vt-cat-head { display: flex; align-items: center; gap: 22px; margin: 14px 0 0; padding: 32px 36px; background: var(--cl); border-radius: 36px; }
.skin-hvita .vt-cat-head .vt-chip-dot { width: 76px; height: 76px; font-size: 2.3rem; }
.skin-hvita .vt-cat-head h1 { margin: 0 0 6px; font-size: 1.95rem; letter-spacing: -1px; }
.skin-hvita .vt-cat-head p { margin: 0; color: var(--vt-sub); }

/* 글 화면 */
.skin-hvita .vt-post-top { max-width: 860px; margin: 14px auto 0; padding: 40px 48px 120px; background: var(--cl); border-radius: 36px; text-align: center; }
.skin-hvita .vt-post-top h1 { font-size: 2.1rem; line-height: 1.36; letter-spacing: -1.2px; margin: 16px 0 10px; }
.skin-hvita .vt-post { max-width: 780px; margin: -96px auto 36px; padding: 0 0 10px; box-sizing: border-box; }
.skin-hvita .vt-post .post-thumb-full { border-radius: 28px; margin: 0 0 36px; box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
.skin-hvita .vt-post .post-body { font-size: 1.06rem; line-height: 1.88; color: #2b2622; }
.skin-hvita .vt-post .post-body h2 { font-size: 1.38rem; letter-spacing: -0.6px; margin-top: 2.1em; display: flex; align-items: center; gap: 10px; }
.skin-hvita .vt-post .post-body h2::before { content: ''; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--vt-orange); box-shadow: 8px 0 0 -2px var(--vt-lemon); }
.skin-hvita .vt-post .post-body h3 { font-size: 1.14rem; color: var(--vt-leaf); }
.skin-hvita .vt-post .post-body a { color: var(--vt-orange-d); text-decoration: underline; }
.skin-hvita .vt-post .post-body strong { background: linear-gradient(transparent 62%, #ffe9a6 62%); }
.skin-hvita .vt-notice { margin: 34px 0 0; padding: 16px 20px; border-radius: 20px; background: #f6faf4; color: #2f5a3e; font-size: .9rem; line-height: 1.6; }
.skin-hvita .vt-related { max-width: 780px; margin: 0 auto 44px; }
.skin-hvita .vt-related .vt-items { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

.skin-hvita footer { background: var(--vt-ink); color: #cfc6bc; border-top: 6px solid var(--vt-orange); }
.skin-hvita h1, .skin-hvita h2, .skin-hvita h3, .skin-hvita p, .skin-hvita li { word-break: keep-all; overflow-wrap: break-word; }
.skin-hvita .post-body { width: 100%; min-width: 0; box-sizing: border-box; }
.skin-hvita .post-body table { display: block; max-width: 100%; overflow-x: auto; }
.skin-hvita .post-body img { max-width: 100%; height: auto; }

@media (max-width: 960px) {
    .skin-hvita .vt-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skin-hvita .vt-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skin-hvita .vt-slice { width: 300px; height: 300px; }
}
@media (max-width: 768px) {
    .skin-hvita .main-header { padding: 10px 0; }
    .skin-hvita .main-header .brand-logo, .skin-hvita .main-header .brand-logo a { font-size: 1.25rem; }
    .skin-hvita .main-header .brand-logo a::before { width: 26px; height: 26px; }
    .skin-hvita .vt-hero { grid-template-columns: minmax(0, 1fr); padding: 30px 22px 0; border-radius: 28px; gap: 0; }
    .skin-hvita .vt-hero h2 { font-size: 1.85rem; letter-spacing: -1px; }
    .skin-hvita .vt-hero-text p { font-size: .95rem; }
    .skin-hvita .vt-slice { justify-self: center; width: 240px; height: 240px; margin: 24px 0 -110px; }
    .skin-hvita .vt-chips { gap: 8px; margin-top: 16px; }
    .skin-hvita .vt-chip { padding: 10px 12px; gap: 10px; }
    .skin-hvita .vt-chip-dot { width: 38px; height: 38px; font-size: 1.2rem; }
    .skin-hvita .vt-chip-text strong { font-size: .92rem; }
    .skin-hvita .vt-chip-text em { display: none; }
    .skin-hvita .vt-list { margin: 34px 0 30px; }
    .skin-hvita .vt-h { font-size: 1.35rem; }
    .skin-hvita .vt-lead a { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
    .skin-hvita .vt-lead-thumb { min-height: 200px; }
    .skin-hvita .vt-lead-info { padding: 22px 20px 24px; }
    .skin-hvita .vt-lead-info h3 { font-size: 1.25rem; }
    .skin-hvita .vt-items, .skin-hvita .vt-related .vt-items { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 24px; }
    .skin-hvita .vt-item-thumb { width: 82px; height: 82px; }
    .skin-hvita .vt-official-row { grid-template-columns: minmax(0, 1fr); }
    .skin-hvita .vt-cat-head { padding: 22px 18px; gap: 14px; border-radius: 26px; }
    .skin-hvita .vt-cat-head .vt-chip-dot { width: 56px; height: 56px; font-size: 1.7rem; }
    .skin-hvita .vt-cat-head h1 { font-size: 1.45rem; }
    .skin-hvita .vt-post-top { padding: 26px 18px 90px; border-radius: 0 0 28px 28px; margin: 0; }
    .skin-hvita .vt-post-top h1 { font-size: 1.45rem; }
    .skin-hvita .vt-post { margin: -70px auto 24px; }
    .skin-hvita .vt-post .post-thumb-full { border-radius: 18px; margin: 0 0 24px; }
}