:root{--brand-deep:#1a4067}
.hx-brandrow{display:flex;align-items:center;gap:8px;min-width:0}
.hx-home{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.14);text-decoration:none;font-size:18px;flex:none}
.hx-home:hover{background:rgba(255,255,255,.26)}
.topbar a.brand{color:#fff;text-decoration:none}
.hx-foot{text-align:center;padding:20px;color:#5f6470;font-size:13px;border-top:1px solid #e2e4ea;background:#f6f7fb}
.hx-foot a{color:#0a66c2;text-decoration:none}
.hx-foot a:hover{text-decoration:underline}
.hx-foot .sitelinks{margin-bottom:6px}
.lecture-wrap ~ .hx-foot{margin-left:300px}
.vid-wait{display:inline-block;margin:6px 0;padding:6px 12px;border-radius:8px;background:#fff8e6;border:1px solid #f1dfae;color:#5f4b00;font-size:13px}
@media (max-width:900px){.lecture-wrap ~ .hx-foot{margin-left:0}}
/* keep the footer clear of the fixed bottom controls bar on lecture pages */
body:has(#controls) .hx-foot{margin-bottom:56px}
@media (max-width:640px){body:has(#controls) .hx-foot{margin-bottom:104px}}
/* 2026-10-05 사이트 디자인 통일 (디자인팀 점검): 네이비 상단 바 64/56px + 주황 3px 줄, 클로드 아이콘, 글자·버튼 주황은 #c2410c */
:root{--brand:#1a4067;--brand-deep:#1a4067;--accent:#c2410c}
.topbar{height:64px;border-bottom:3px solid #e8734a}
.topbar .hx-home.hx-logo{background:none!important;width:198px;height:46px}
.topbar .hx-home.hx-logo img{content:url(/img/brand/header_claude_com.svg?v=20261009);width:198px;height:46px;border-radius:0}
@media (max-width:900px){.topbar .hx-home.hx-logo{width:36px;height:36px}.topbar .hx-home.hx-logo img{content:url(/img/brand/icon_claude_180.png?v=20261007);width:36px;height:36px;border-radius:9px}}
@media (max-width:600px){.topbar{height:56px}}
/* 첫 화면: 소개 글을 왼쪽 위 배너 옆에 (2026-10-05) */
.hx-brandrow{gap:14px}
.topbar:has(.hx-title){height:auto;min-height:78px;padding-top:9px;padding-bottom:9px}
.topbar .hx-title{display:flex;flex-direction:column;justify-content:center;line-height:1.3;white-space:normal;min-width:0;padding-left:14px;border-left:1px solid rgba(255,255,255,.28)}
.hx-title .hx-org{font-size:11.5px;font-weight:normal;opacity:.82}
.hx-title .hx-h1{margin:0;font-size:19px;font-weight:bold;color:#fff;line-height:1.25}
.hx-title .hx-sub{font-size:12.5px;font-weight:normal;opacity:.92}
.topbar:has(.hx-title)~main [id]{scroll-margin-top:96px}
.topbar:has(.hx-title)~main.wrap{padding-top:26px}
@media (max-width:600px){.topbar:has(.hx-title){height:auto;flex-wrap:wrap;row-gap:8px}.topbar:has(.hx-title) .tb-right{width:100%}.topbar:has(.hx-title) .tb-search{flex:1}.hx-title .hx-h1{font-size:17px}}