@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');
/* === healthandpill.com — 헬스앤필 · 영양제·알약 생활 안내 (2026-10-22 신설) ===
   은유: 요일별 알약 정리함. 크림 바탕(#FFF8EF) + 라벤더(#7C6CF0)·귤색(#FF8A3D)·민트(#2EC4A6)·분홍(#F2679A) 캡슐, 둥근 모서리. */
.skin-hpill {
    --pl-cream: #fff8ef;
    --pl-ink: #2a2440;
    --pl-sub: #6c6684;
    --pl-line: #efe4d6;
    --pl-c0: #7c6cf0; --pl-c0l: #ece9ff;
    --pl-c1: #ff8a3d; --pl-c1l: #ffeadb;
    --pl-c2: #2ec4a6; --pl-c2l: #dcf6f0;
    --pl-c3: #f2679a; --pl-c3l: #ffe3ee;
    --pl-round: 'Fredoka', 'Pretendard Variable', Pretendard, sans-serif;
    background: var(--pl-cream);
    color: var(--pl-ink);
}
.skin-hpill a { text-decoration: none; color: inherit; }
.skin-hpill .pl-t0 { --c: var(--pl-c0); --cl: var(--pl-c0l); }
.skin-hpill .pl-t1 { --c: var(--pl-c1); --cl: var(--pl-c1l); }
.skin-hpill .pl-t2 { --c: var(--pl-c2); --cl: var(--pl-c2l); }
.skin-hpill .pl-t3 { --c: var(--pl-c3); --cl: var(--pl-c3l); }

.skin-hpill .main-header { background: transparent; border-bottom: 0; padding: 16px 0 0; }
.skin-hpill .containerHeader { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; background: #fff; border-radius: 999px; padding: 8px 10px 8px 22px; box-shadow: 0 6px 20px rgba(42, 36, 64, .07); }
.skin-hpill .main-header .brand-logo,
.skin-hpill .main-header .brand-logo a { font-size: 1.4rem; margin: 0; color: var(--pl-ink); letter-spacing: -0.5px; font-weight: 800; display: flex; align-items: center; }
.skin-hpill .main-header .brand-logo a::before {
    content: ''; display: inline-block; flex: 0 0 auto; width: 34px; height: 16px; margin-right: 10px; border-radius: 999px; transform: rotate(-30deg);
    background: linear-gradient(90deg, var(--pl-c0) 50%, var(--pl-c1) 50%);
}
.skin-hpill .main-header nav { width: auto; border-top: 0; padding-top: 0; }
.skin-hpill .main-header nav ul { gap: 4px; margin: 0; justify-content: flex-end; }
.skin-hpill header nav ul li a { color: var(--pl-ink); font-weight: 600; font-size: .93rem; padding: 8px 14px; text-transform: none; border-radius: 999px; }
.skin-hpill header nav ul li a:hover { background: var(--pl-c0l); color: var(--pl-c0); }
.skin-hpill .menu-toggle { background: var(--pl-c0); color: #fff; border-radius: 999px; }
.skin-hpill .close-menu { background: var(--pl-c0); color: #fff; border-radius: 999px; }
.skin-hpill .mobile-menu-overlay { background: var(--pl-cream); }
.skin-hpill .mobile-menu-header .logo { color: var(--pl-ink); }
.skin-hpill .mobile-menu a { text-transform: none; }

/* 첫 화면 — 가운데 소개 + 요일 정리함 */
.skin-hpill .pl-hero { text-align: center; margin: 44px 0 0; }
.skin-hpill .pl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--pl-c0); background: #fff; padding: 6px 14px; border-radius: 999px; }
.skin-hpill .pl-eyebrow i { width: 18px; height: 9px; border-radius: 999px; background: linear-gradient(90deg, var(--pl-c2) 50%, var(--pl-c3) 50%); }
.skin-hpill .pl-hero h2 { font-size: 2.7rem; line-height: 1.28; letter-spacing: -1.5px; margin: 18px 0 14px; font-weight: 800; }
.skin-hpill .pl-hero h2 em { font-style: normal; color: var(--pl-c1); position: relative; }
.skin-hpill .pl-hero > p { max-width: 36em; margin: 0 auto; color: var(--pl-sub); font-size: 1.04rem; line-height: 1.7; }
.skin-hpill .pl-case { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 34px auto 0; padding: 12px; background: #fff; border-radius: 28px; box-shadow: 0 12px 30px rgba(42, 36, 64, .08); }
.skin-hpill .pl-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px 16px; border-radius: 20px; background: var(--cl); min-width: 0; overflow: hidden; }
.skin-hpill .pl-lid { align-self: stretch; font-family: var(--pl-round); font-weight: 700; font-size: 1.05rem; color: #fff; background: var(--c); padding: 8px 0; border-radius: 0 0 14px 14px; margin: 0 -6px; }
.skin-hpill .pl-dose { display: inline-block; width: 40px; height: 18px; border-radius: 999px; background: linear-gradient(90deg, var(--c) 50%, #fff 50%); box-shadow: inset 0 0 0 2px var(--c); transform: rotate(-24deg); margin: 8px 0 2px; }
.skin-hpill .pl-cell-text { font-size: .84rem; line-height: 1.45; font-weight: 600; word-break: keep-all; }

/* 분야 — 캡슐 버튼 */
.skin-hpill .pl-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; }
.skin-hpill .pl-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; border-radius: 999px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 2px var(--c); }
.skin-hpill .pl-cap span { flex: 1; padding: 14px 6px 14px 20px; font-weight: 700; font-size: .98rem; }
.skin-hpill .pl-cap b { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; padding: 0 16px; background: var(--c); color: #fff; font-size: .78rem; font-weight: 700; }
.skin-hpill .pl-cap:hover span { background: var(--cl); }

/* 목록 — 색띠 카드 3열 */
.skin-hpill .pl-list { margin: 42px 0 40px; }
.skin-hpill .pl-h { font-size: 1.35rem; margin: 0 0 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.skin-hpill .pl-h::before { content: ''; width: 28px; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--pl-c1) 50%, var(--pl-c0) 50%); }
.skin-hpill .pl-empty { background: #fff; border-radius: 24px; padding: 30px; text-align: center; color: var(--pl-sub); }
.skin-hpill .pl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.skin-hpill .pl-card { min-width: 0; }
.skin-hpill .pl-card a { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 6px 18px rgba(42, 36, 64, .06); transition: transform .15s; }
.skin-hpill .pl-card a:hover { transform: translateY(-4px); }
.skin-hpill .pl-card-band { position: relative; background: var(--cl); padding: 16px 16px 0; }
.skin-hpill .pl-chip { display: inline-block; font-size: .76rem; font-weight: 700; color: #fff; background: var(--c); padding: 4px 12px; border-radius: 999px; }
.skin-hpill .pl-card-thumb { height: 150px; margin-top: 12px; border-radius: 18px 18px 0 0; background-size: cover; background-position: center; background-color: #fff; }
.skin-hpill .pl-card-info { padding: 16px 18px 18px; min-width: 0; }
.skin-hpill .pl-card-info h3 { font-size: 1.04rem; line-height: 1.45; margin: 0 0 6px; }
.skin-hpill .pl-card-info p { font-size: .86rem; color: var(--pl-sub); margin: 0 0 10px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skin-hpill time { font-size: .8rem; color: #9a93ad; font-family: var(--pl-round); }

.skin-hpill .pl-official { margin: 0 0 48px; }
.skin-hpill .pl-official-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.skin-hpill .pl-official-row a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: #fff; border-radius: 20px; border: 2px dashed var(--pl-line); }
.skin-hpill .pl-official-row a:hover { border-color: var(--pl-c2); }
.skin-hpill .pl-official-row strong { font-size: .98rem; }
.skin-hpill .pl-official-row span { font-size: .84rem; color: var(--pl-sub); }

.skin-hpill .pl-cat-head { text-align: center; margin: 36px 0 0; padding: 32px 24px; background: var(--cl); border-radius: 32px; }
.skin-hpill .pl-cat-head .pl-dose { width: 56px; height: 24px; }
.skin-hpill .pl-cat-head h1 { margin: 12px 0 6px; font-size: 1.9rem; }
.skin-hpill .pl-cat-head p { margin: 0; color: var(--pl-sub); }

/* 글 화면 */
.skin-hpill .pl-post { background: #fff; border-radius: 32px; max-width: 800px; margin: 32px auto; padding: 44px 52px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(42, 36, 64, .06); }
.skin-hpill .pl-post .post-header, .skin-hpill .pl-post .post-header h1, .skin-hpill .pl-post .post-meta { text-align: center; }
.skin-hpill .pl-post .post-header h1 { font-size: 2rem; line-height: 1.4; letter-spacing: -1px; margin: 14px 0 8px; }
.skin-hpill .pl-post .post-thumb-full { border-radius: 24px; margin: 8px 0 34px; }
.skin-hpill .pl-post .post-body { font-size: 1.05rem; line-height: 1.88; color: #2f2a44; }
.skin-hpill .pl-post .post-body h2 { font-size: 1.32rem; margin-top: 2.1em; padding: 10px 18px; border-radius: 999px; background: var(--cl); }
.skin-hpill .pl-post .post-body h3 { font-size: 1.12rem; color: var(--c); }
.skin-hpill .pl-post .post-body a { color: #5a49e0; text-decoration: underline; }
.skin-hpill .pl-post .post-body strong { background: linear-gradient(transparent 62%, var(--cl) 62%); }
.skin-hpill .pl-notice { margin: 34px 0 0; padding: 16px 20px; border-radius: 20px; background: var(--pl-cream); color: #5c4c3a; font-size: .9rem; line-height: 1.6; }
.skin-hpill .pl-related { max-width: 800px; margin: 0 auto 44px; }
.skin-hpill .pl-related .pl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

@media (max-width: 960px) {
    .skin-hpill .pl-case { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .skin-hpill .pl-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skin-hpill .pl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .skin-hpill .main-header { padding: 10px 0 0; }
    .skin-hpill .containerHeader { padding: 6px 6px 6px 16px; }
    .skin-hpill .main-header .brand-logo, .skin-hpill .main-header .brand-logo a { font-size: 1.2rem; }
    .skin-hpill .main-header .brand-logo a::before { width: 26px; height: 13px; }
    .skin-hpill .pl-hero { margin: 26px 0 0; }
    .skin-hpill .pl-hero h2 { font-size: 1.8rem; letter-spacing: -1px; }
    .skin-hpill .pl-hero > p { font-size: .95rem; }
    .skin-hpill .pl-case { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px; border-radius: 20px; }
    .skin-hpill .pl-cell { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0 12px 0 0; border-radius: 12px; text-align: left; }
    .skin-hpill .pl-lid { flex: 0 0 44px; font-size: .9rem; padding: 9px 0; margin: 0; border-radius: 12px 0 0 12px; text-align: center; }
    .skin-hpill .pl-dose { flex: 0 0 26px; width: 26px; height: 12px; margin: 0; }
    .skin-hpill .pl-cell-text { display: block; min-width: 0; margin: 0; font-size: .85rem; }
    .skin-hpill .pl-caps { gap: 8px; }
    .skin-hpill .pl-cap span { padding: 12px 4px 12px 14px; font-size: .9rem; }
    .skin-hpill .pl-cap b { display: none; }
    .skin-hpill .pl-cards, .skin-hpill .pl-related .pl-cards { grid-template-columns: minmax(0, 1fr); }
    .skin-hpill .pl-official-row { grid-template-columns: minmax(0, 1fr); }
    .skin-hpill .pl-cat-head { margin: 18px 0 0; padding: 24px 18px; border-radius: 24px; }
    .skin-hpill .pl-cat-head h1 { font-size: 1.5rem; }
    .skin-hpill .pl-post { padding: 26px 18px; margin: 16px 0; border-radius: 24px; }
    .skin-hpill .pl-post .post-header h1 { font-size: 1.45rem; }
    .skin-hpill .pl-post .post-thumb-full { margin: 4px 0 22px; border-radius: 16px; }
}