/* hwpxlam.com 공통 디자인 (2026-10-05 디자인팀 점검 반영) — 각 페이지 <style> 뒤에 읽혀 덮어쓴다 */
:root{--bg:#f6f7fb;--card:#fff;--text:#1c1c1e;--sub:#5f6470;--line:#e2e4ea;--accent:#0a66c2;--accent2:#1a4067;
  --sec:#0a66c2;--sec-tint:#e8f1fb}
body.sec-hwpx{--sec:#0a66c2;--sec-tint:#e8f1fb}
body.sec-xlam{--sec:#1a7f4b;--sec-tint:#e8f5ee}
body.sec-claude{--sec:#c2410c;--sec-tint:#fdeee6}

/* 상단 바: 모든 페이지 같은 높이·같은 위치(왼쪽 로고, 콘텐츠 열과 정렬) */
.top{display:block;padding:0 24px;background:var(--accent2);border-bottom:3px solid var(--sec)}
.top .top-in{max-width:1080px;margin:0 auto;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.top a.brandlogo{display:inline-flex;align-items:center;line-height:0;border-radius:6px}
.top a.brandlogo img{display:block;height:36px;width:auto}
.top a.brandlogo:focus-visible{outline:2px solid #fff;outline-offset:3px}
.top .ver{font-size:13px;opacity:.9;color:#fff}
.top .ver a{color:#fff}
.wrap{padding-left:16px;padding-right:16px}
@media (min-width:768px){.wrap{padding-left:24px;padding-right:24px}}
@media (max-width:600px){.top{padding:0 16px}.top .top-in{min-height:56px;padding:8px 0}.top a.brandlogo img{height:30px}.top .ver{font-size:12px}}

/* 페이지 제목 줄: 섹션 아이콘 + 제목 */
.pagehead{display:flex;align-items:center;gap:14px;margin:28px 0 10px}
.pagehead img.secicon{width:44px;height:44px;flex:none;border-radius:11px}
.pagehead h1{margin:0}
@media (max-width:600px){.pagehead{gap:10px;margin-top:20px}.pagehead img.secicon{width:34px;height:34px;border-radius:9px}}

/* 섹션색 적용 */
h2{border-left-color:var(--sec)}
a.dl{background:var(--sec)}
a.dl.off{background:#e9ecf1;color:#5f6470}

/* 홈: 카드·목차 아이콘 */
.hub a .ic img{display:block;width:64px;height:64px;border-radius:14px;margin:0 auto}
.tocrow b img{width:20px;height:20px;border-radius:5px;vertical-align:-4px;margin-right:4px}
h3 img.secicon-s{width:24px;height:24px;border-radius:6px;vertical-align:-5px;margin-right:6px}
.hub a.c-hwpx{border-top:3px solid #0a66c2}
.hub a.c-xlam{border-top:3px solid #1a7f4b}
.hub a.c-claude{border-top:3px solid #e8734a}
@media (max-width:600px){.hub a .ic img{width:48px;height:48px;border-radius:11px}}
span.ic img{display:block;width:40px;height:40px;border-radius:10px}

/* 머리 왼쪽: [로고] | [아이콘] 소속·제목·한 줄 소개 — 클로드 강의 첫 화면과 같은 꼴 (2026-10-05) */
.top .hx-brandrow{display:flex;align-items:center;gap:14px;min-width:0}
.top .top-in:has(.hx-title){min-height:78px;padding:9px 0}
.top .hx-title{display:flex;align-items:center;gap:10px;min-width:0;padding-left:14px;border-left:1px solid rgba(255,255,255,.28);color:#fff}
.top .hx-title .hx-ic{flex:none;width:44px;height:44px;border-radius:11px}
.top .hx-title .hx-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.top .hx-title .hx-org{font-size:11.5px;opacity:.82}
.top .hx-title .hx-h1{margin:0;font-size:19px;font-weight:bold;color:#fff;line-height:1.25}
.top .hx-title .hx-sub{font-size:12.5px;opacity:.92}
.top:has(.hx-title)~main.wrap>p.lead:first-child{margin-top:8px}
@media (max-width:760px){.top .top-in:has(.hx-title) .ver{display:none}}
@media (max-width:600px){.top .hx-brandrow{flex-wrap:wrap;row-gap:8px}.top .hx-title{padding-left:0;border-left:0}.top .hx-title .hx-ic{width:36px;height:36px;border-radius:9px}.top .hx-title .hx-h1{font-size:17px}}