/* 로가허브 샘플 띠 — 랜딩 30종 모두 왼쪽 아래에 붙는다. 왼쪽 칸 = 전시장(30종 목록)으로, 오른쪽 칸 = 이 디자인으로 주문.
   랜딩 디자인을 덮지 않게 작고 중립적으로. */
.rh-ribbon { position: fixed; left: 12px; bottom: 12px; z-index: 9999; display: inline-flex; align-items: stretch; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 4px 16px rgba(0,0,0,.18); backdrop-filter: blur(6px); font: 500 12.5px/1 "IBM Plex Sans KR", system-ui, sans-serif; overflow: hidden; }
.rh-ribbon a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; color: #161B26; text-decoration: none; }
.rh-ribbon .rh-back { padding-left: 10px; border-right: 1px solid #D5D9E0; }
.rh-ribbon .rh-back svg { flex: none; }
.rh-ribbon b { font-weight: 700; letter-spacing: .02em; }
.rh-ribbon .rh-order { color: #C81E63; }
.rh-ribbon a:hover { background: #161B26; color: #fff; }
.rh-ribbon a:focus-visible { outline: 2px solid #C81E63; outline-offset: -2px; }
@media (max-width: 520px) { .rh-ribbon .rh-no { display: none; } }
@media print { .rh-ribbon { display: none; } }

/* 맨 위·맨 아래 띠 — 문서 흐름 안(고정 아님)이라 랜딩 머리말을 덮지 않는다 */
.rh-bar { position: relative; z-index: 9998; display: flex; align-items: center; gap: 14px; padding: 0 clamp(12px, 3vw, 28px); min-height: 40px; background: #161B26; color: #E6E8EC; font: 500 13px/1.3 "IBM Plex Sans KR", system-ui, sans-serif; }
.rh-bar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 0; }
.rh-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rh-bar b { font-weight: 700; letter-spacing: .02em; }
.rh-bar .rh-what { color: #A9B0BC; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-bar .rh-order { color: #FF8FBF; }
.rh-bar a:focus-visible { outline: 2px solid #FF8FBF; outline-offset: 2px; }
@media (max-width: 560px) { .rh-bar .rh-what { display: none; } .rh-bar { justify-content: space-between; } }
@media print { .rh-bar { display: none; } }