@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* === healthanddose.com — 헬스앤도즈 · 복용량·횟수 계량 안내 (2026-10-22 신설) ===
   은유: 계량컵·눈금자. 미색(#FBF6EC) + 호박색 약병(#B8621B) + 먹갈색(#2B1D12), 숫자는 Bebas Neue, 곳곳에 눈금. */
.skin-hdose {
    --ds-bg: #fbf6ec;
    --ds-paper: #fffdf8;
    --ds-amber: #b8621b;
    --ds-amber-l: #f3dcc2;
    --ds-amber-d: #8a4610;
    --ds-ink: #2b1d12;
    --ds-sub: #6e5b4a;
    --ds-line: #e6d8c4;
    --ds-num: 'Bebas Neue', 'Pretendard Variable', Pretendard, sans-serif;
    --ds-ticks: repeating-linear-gradient(90deg, var(--ds-ink) 0 1px, transparent 1px 10px);
    background: var(--ds-bg);
    color: var(--ds-ink);
}
.skin-hdose a { text-decoration: none; color: inherit; }

.skin-hdose .main-header { background: var(--ds-ink); border-bottom: 0; padding: 14px 0 22px; position: relative; }
.skin-hdose .main-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
    background: repeating-linear-gradient(90deg, var(--ds-amber-l) 0 1px, transparent 1px 10px) bottom / 100% 6px no-repeat,
                repeating-linear-gradient(90deg, var(--ds-amber-l) 0 2px, transparent 2px 50px) bottom / 100% 12px no-repeat; }
.skin-hdose .containerHeader { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
.skin-hdose .main-header .brand-logo,
.skin-hdose .main-header .brand-logo a { font-size: 1.45rem; margin: 0; color: #fff; letter-spacing: -0.5px; font-weight: 800; display: flex; align-items: center; }
.skin-hdose .main-header .brand-logo a::before {
    content: ''; flex: 0 0 auto; width: 20px; height: 26px; margin-right: 10px; border: 2px solid var(--ds-amber-l); border-top: 0; border-radius: 0 0 5px 5px;
    background: linear-gradient(transparent 45%, var(--ds-amber) 45%);
}
.skin-hdose .main-header nav { width: auto; border-top: 0; padding-top: 0; }
.skin-hdose .main-header nav ul { gap: 2px; margin: 0; justify-content: flex-end; }
.skin-hdose header nav ul li a { color: #eadbc8; font-weight: 600; font-size: .93rem; padding: 8px 12px; text-transform: none; border-radius: 0; }
.skin-hdose header nav ul li a:hover { color: #fff; box-shadow: inset 0 -3px 0 var(--ds-amber); }
.skin-hdose .menu-toggle { background: var(--ds-amber); color: #fff; border-radius: 4px; }
.skin-hdose .close-menu { background: var(--ds-amber); color: #fff; }
.skin-hdose .mobile-menu-overlay { background: var(--ds-paper); }
.skin-hdose .mobile-menu-header .logo { color: var(--ds-ink); }
.skin-hdose .mobile-menu a { text-transform: none; }

.skin-hdose .ds-ruler { height: 16px; margin-top: 22px; background:
    repeating-linear-gradient(90deg, var(--ds-amber) 0 2px, transparent 2px 60px) top / 100% 16px no-repeat,
    repeating-linear-gradient(90deg, var(--ds-amber) 0 1px, transparent 1px 12px) top / 100% 8px no-repeat; }

/* 첫 화면 — 계량컵 + 소개 */
.skin-hdose .ds-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin: 40px 0 0; }
.skin-hdose .ds-beaker { position: relative; display: flex; flex-direction: column; background: var(--ds-paper); border: 3px solid var(--ds-ink); border-top: 0; border-radius: 0 0 28px 28px; padding: 26px 0 0; overflow: hidden; }
.skin-hdose .ds-beaker-lip { position: absolute; top: 0; left: -3px; right: -3px; height: 3px; background: var(--ds-ink); }
.skin-hdose .ds-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(184, 98, 27, .22), rgba(184, 98, 27, .38)); border-top: 2px solid var(--ds-amber); pointer-events: none; }
.skin-hdose .ds-level { position: relative; z-index: 1; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 22px 14px 0; border-top: 1px dashed var(--ds-line); }
.skin-hdose .ds-level:first-of-type { border-top: 0; }
.skin-hdose .ds-level::before { content: ''; position: absolute; left: 0; top: -1px; width: 38px; height: 2px; background: var(--ds-ink); }
.skin-hdose .ds-level:hover .ds-level-text strong { color: var(--ds-amber); }
.skin-hdose .ds-ml { font-family: var(--ds-num); font-size: 2.3rem; line-height: 1; color: var(--ds-ink); text-align: right; }
.skin-hdose .ds-ml small { font-size: .9rem; margin-left: 2px; color: var(--ds-sub); }
.skin-hdose .ds-level-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skin-hdose .ds-level-text strong { font-size: 1.05rem; }
.skin-hdose .ds-level-text em { font-style: normal; font-size: .86rem; color: var(--ds-sub); }
.skin-hdose .ds-kicker { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--ds-amber-d); border-bottom: 2px solid var(--ds-amber); padding-bottom: 4px; margin-bottom: 18px; }
.skin-hdose .ds-hero h2 { font-size: 2.6rem; line-height: 1.28; letter-spacing: -1.5px; margin: 0 0 16px; font-weight: 800; }
.skin-hdose .ds-hero-text p { margin: 0; font-size: 1.04rem; line-height: 1.75; color: var(--ds-sub); }

/* 본문 2단 — 계량 기록 목록 + 옆 상자 */
.skin-hdose .ds-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; margin: 48px 0 44px; align-items: start; }
.skin-hdose .ds-main { min-width: 0; }
.skin-hdose .ds-h { display: flex; align-items: baseline; gap: 12px; font-size: 1.3rem; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 3px solid var(--ds-ink); }
.skin-hdose .ds-h span { font-family: var(--ds-num); font-size: 1.05rem; letter-spacing: 2px; color: #fff; background: var(--ds-amber); padding: 2px 8px 0; }
.skin-hdose .ds-empty { padding: 30px; text-align: center; color: var(--ds-sub); border-bottom: 1px solid var(--ds-line); }
.skin-hdose .ds-rows { display: flex; flex-direction: column; }
.skin-hdose .ds-row { min-width: 0; border-bottom: 1px solid var(--ds-line); }
.skin-hdose .ds-row a { display: grid; grid-template-columns: 64px minmax(0, 1fr) 180px; gap: 20px; align-items: center; padding: 20px 0; }
.skin-hdose .ds-row a:hover h3 { color: var(--ds-amber-d); }
.skin-hdose .ds-row-no { position: relative; align-self: stretch; font-family: var(--ds-num); font-size: 2.6rem; line-height: 1; color: var(--ds-amber); padding-top: 4px;
    background: repeating-linear-gradient(0deg, var(--ds-line) 0 1px, transparent 1px 8px) right top / 10px 100% no-repeat; }
.skin-hdose .ds-row-text { min-width: 0; }
.skin-hdose .ds-row-meta { display: flex; gap: 10px; align-items: center; font-size: .8rem; margin-bottom: 6px; }
.skin-hdose .ds-row-meta b { color: var(--ds-amber-d); }
.skin-hdose .ds-row-text h3 { font-size: 1.12rem; line-height: 1.45; margin: 0 0 6px; }
.skin-hdose .ds-row-text p { font-size: .88rem; line-height: 1.6; margin: 0; color: var(--ds-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skin-hdose .ds-row-thumb { height: 118px; border-radius: 4px; background-size: cover; background-position: center; background-color: var(--ds-amber-l); }
.skin-hdose time { font-size: .8rem; color: #9c8b79; }

.skin-hdose .ds-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 20px; }
.skin-hdose .ds-side h2 { font-size: 1rem; margin: 0 0 10px; }
.skin-hdose .ds-rules { background: var(--ds-ink); color: #f1e6d8; padding: 20px 20px 14px; border-radius: 4px; }
.skin-hdose .ds-rules h2 { color: #fff; }
.skin-hdose .ds-rules ul, .skin-hdose .ds-official ul { list-style: none; margin: 0; padding: 0; }
.skin-hdose .ds-rules li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .88rem; line-height: 1.5; }
.skin-hdose .ds-rules b { font-family: var(--ds-num); font-size: 1.3rem; font-weight: 400; color: #f0a35e; line-height: 1.1; }
.skin-hdose .ds-official { background: var(--ds-paper); border: 1px solid var(--ds-line); padding: 18px 20px 10px; border-radius: 4px; }
.skin-hdose .ds-official li + li { border-top: 1px dashed var(--ds-line); }
.skin-hdose .ds-official a { display: flex; flex-direction: column; padding: 9px 0; }
.skin-hdose .ds-official strong { font-size: .92rem; }
.skin-hdose .ds-official span { font-size: .8rem; color: var(--ds-sub); }
.skin-hdose .ds-official a:hover strong { color: var(--ds-amber-d); }

.skin-hdose .ds-cat-head { display: flex; align-items: center; gap: 24px; margin: 36px 0 0; padding: 26px 30px; background: var(--ds-paper); border-left: 6px solid var(--ds-amber); }
.skin-hdose .ds-cat-head .ds-ml { font-size: 3.2rem; color: var(--ds-amber); }
.skin-hdose .ds-cat-head h1 { margin: 0 0 4px; font-size: 1.85rem; }
.skin-hdose .ds-cat-head p { margin: 0; color: var(--ds-sub); }

/* 글 화면 */
.skin-hdose .ds-post { background: var(--ds-paper); max-width: 820px; margin: 36px auto; padding: 44px 50px; box-sizing: border-box; border-top: 6px solid var(--ds-amber); }
.skin-hdose .ds-post .post-header, .skin-hdose .ds-post .post-header h1 { text-align: left; }
.skin-hdose .ds-post-meta { display: flex; gap: 12px; align-items: center; font-size: .86rem; margin-bottom: 12px; }
.skin-hdose .ds-post-meta a { color: #fff; background: var(--ds-amber); padding: 3px 10px; font-weight: 700; }
.skin-hdose .ds-post .post-header h1 { font-size: 2rem; line-height: 1.38; letter-spacing: -1px; margin: 0; }
.skin-hdose .ds-post .post-header .ds-ruler { margin: 20px 0 26px; }
.skin-hdose .ds-post .post-thumb-full { border-radius: 4px; margin: 0 0 34px; }
.skin-hdose .ds-post .post-body { font-size: 1.05rem; line-height: 1.86; color: #33251a; }
.skin-hdose .ds-post .post-body h2 { font-size: 1.32rem; margin-top: 2.1em; padding-bottom: 8px; border-bottom: 2px solid var(--ds-ink); position: relative; }
.skin-hdose .ds-post .post-body h2::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 120px; height: 8px; background: repeating-linear-gradient(90deg, var(--ds-amber) 0 1px, transparent 1px 10px); }
.skin-hdose .ds-post .post-body h3 { font-size: 1.12rem; color: var(--ds-amber-d); }
.skin-hdose .ds-post .post-body a { color: #9a4a0c; text-decoration: underline; }
.skin-hdose .ds-post .post-body strong { background: linear-gradient(transparent 62%, var(--ds-amber-l) 62%); }
.skin-hdose .ds-notice { margin: 34px 0 0; padding: 14px 16px; border: 1px solid var(--ds-amber); background: #fbefe0; color: #5a3410; font-size: .9rem; line-height: 1.6; }
.skin-hdose .ds-related { max-width: 820px; margin: 0 auto 44px; }

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

@media (max-width: 960px) {
    .skin-hdose .ds-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .skin-hdose .ds-hero-text { order: -1; }
    .skin-hdose .ds-body { grid-template-columns: minmax(0, 1fr); }
    .skin-hdose .ds-side { position: static; }
}
@media (max-width: 768px) {
    .skin-hdose .main-header { padding: 10px 0 18px; }
    .skin-hdose .main-header .brand-logo, .skin-hdose .main-header .brand-logo a { font-size: 1.2rem; }
    .skin-hdose .ds-hero { margin: 24px 0 0; }
    .skin-hdose .ds-hero h2 { font-size: 1.8rem; letter-spacing: -1px; }
    .skin-hdose .ds-hero-text p { font-size: .95rem; }
    .skin-hdose .ds-level { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 12px 14px 12px 0; }
    .skin-hdose .ds-ml { font-size: 1.8rem; }
    .skin-hdose .ds-body { margin: 32px 0 30px; gap: 26px; }
    .skin-hdose .ds-row a { grid-template-columns: 40px minmax(0, 1fr) 84px; gap: 12px; padding: 16px 0; }
    .skin-hdose .ds-row-no { font-size: 1.7rem; background-size: 6px 100%; }
    .skin-hdose .ds-row-text h3 { font-size: 1rem; }
    .skin-hdose .ds-row-text p { display: none; }
    .skin-hdose .ds-row-thumb { height: 72px; }
    .skin-hdose .ds-cat-head { margin: 18px 0 0; padding: 20px 18px; gap: 16px; }
    .skin-hdose .ds-cat-head .ds-ml { font-size: 2.3rem; }
    .skin-hdose .ds-cat-head h1 { font-size: 1.45rem; }
    .skin-hdose .ds-post { padding: 26px 18px; margin: 16px 0; }
    .skin-hdose .ds-post .post-header h1 { font-size: 1.45rem; }
    .skin-hdose .ds-post .post-thumb-full { margin: 0 0 22px; }
}