/* 머리 검색 한 칸 (2026-10-29) — 단추 모양은 공통 토큰 --rv-btn-* 를 읽는다. 흰 바탕 · 검정 글자 · 포인트 네이비 */
.hs-btn{display:inline-flex;align-items:center;gap:8px;height:var(--rv-btn-h-sm,36px);padding:0 12px;background:var(--rv-btn-bg,#fff);color:var(--rv-btn-ink,#111);border:1px solid var(--rv-btn-line,#D2D2D2);border-radius:var(--rv-btn-r-pill,999px);font:inherit;font-size:12px;letter-spacing:.04em;cursor:pointer;word-break:keep-all;transition:border-color var(--rv-btn-ease,.14s ease),background var(--rv-btn-ease,.14s ease)}
.hs-btn:hover{border-color:var(--rv-btn-line-hover,#1B2438);background:var(--rv-btn-soft,#F3F4F7)}
.hs-btn:focus-visible{outline:0;box-shadow:var(--rv-btn-focus,0 0 0 2px #fff,0 0 0 4px #1B2438)}
.hs-btn svg{flex:none}
.hs-btn kbd{font:inherit;font-size:11px;min-width:18px;height:18px;line-height:16px;text-align:center;border:1px solid var(--rv-btn-line,#D2D2D2);border-radius:5px;color:#666;box-sizing:border-box}
@container mg (max-width:1240px){.hs-btn{width:36px;height:36px;padding:0;justify-content:center;gap:0}.hs-btn .hs-btn-t,.hs-btn kbd{display:none}}
@container mg (max-width:960px){.hs-btn{width:40px;height:40px}}   /* 2026-10-31 합동 검수: PC 머리 단추 높이 36 통일(검색·아바타·구독하기), 휴대폰 40 통일(검색·아바타) */
@container mg (max-width:960px){.hs-btn{position:relative}.hs-btn::after{content:"";position:absolute;inset:-3px;border-radius:inherit}}   /* 2026-11-01 편집장: 보이는 크기 40 은 그대로, 누르는 자리만 44(마이페이지 점검) */

html.hs-open{overflow:hidden}
.hs-layer{position:fixed;inset:0;z-index:400;font-family:'Noto Sans KR',sans-serif;color:#111;word-break:keep-all}
.hs-back{position:absolute;inset:0;background:rgba(17,17,17,.28)}
.hs-box{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;background:#fff;border:1px solid var(--rv-btn-line-hover,#1B2438);border-radius:18px;max-height:min(640px,calc(100vh - 24px));overflow:hidden;box-shadow:0 18px 40px rgba(17,17,17,.16);transition:width .22s ease,right .22s ease}
.hs-form{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;flex:none}
.hs-ic{flex:none;color:#111}
.hs-in{position:relative;flex:1;min-width:0;height:100%;display:block}
.hs-input,.hs-ghost{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:44px;padding:0;margin:0;border:0;background:transparent;white-space:pre;overflow:hidden}
.hs-input{outline:0;color:#111;z-index:1}
.hs-input::placeholder{color:#8A8A8A}
.hs-ghost{color:#A6A6A6;z-index:0;pointer-events:none}
.hs-x{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--rv-btn-r-pill,999px);background:transparent;color:#111;cursor:pointer}
.hs-x:hover{background:var(--rv-btn-soft,#F3F4F7)}
.hs-x:focus-visible{outline:0;box-shadow:var(--rv-btn-focus)}
.hs-list{overflow-y:auto;overscroll-behavior:contain;border-top:1px solid #E6E6E6;padding:6px 0 10px}
.hs-list:empty{display:none}
.hs-g{padding:8px 0 4px}
.hs-h{margin:0;padding:6px 16px 4px;font:500 11px/1.4 'Noto Sans KR',sans-serif;letter-spacing:.14em;color:#6B6B6B}
.hs-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 16px 9px 14px;color:#111;text-decoration:none;border-left:2px solid transparent}
.hs-row:hover,.hs-row.on{background:var(--rv-btn-soft,#F3F4F7);border-left-color:#1B2438;text-decoration:none}
.hs-t{grid-column:1;font-size:14px;line-height:1.45;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-s{grid-column:1;font-size:12px;line-height:1.45;color:#6B6B6B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-sec{grid-column:2;grid-row:1;align-self:center;font-size:11px;color:#6B6B6B;white-space:nowrap}
.hs-more{display:inline-flex;align-items:center;gap:6px;margin:4px 16px 4px;height:30px;padding:0 12px;background:#fff;border:1px solid var(--rv-btn-line,#D2D2D2);border-radius:var(--rv-btn-r-pill,999px);font:inherit;font-size:12px;color:#111;cursor:pointer}
.hs-more:hover{border-color:var(--rv-btn-line-hover,#1B2438)}
.hs-more:focus-visible{outline:0;box-shadow:var(--rv-btn-focus)}
.hs-brand{margin:0 0 2px;border-bottom:1px solid #E6E6E6}
.hs-brand-main .hs-t{font-family:'Noto Serif KR',serif;font-size:16px}
.hs-brand-main .hs-s{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hs-bl{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:2px 16px 12px}
.hs-bl a{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:1px solid var(--rv-btn-line,#D2D2D2);border-radius:var(--rv-btn-r-pill,999px);font-size:12px;color:#111;text-decoration:none}
.hs-bl a:hover{border-color:#1B2438;background:var(--rv-btn-soft,#F3F4F7)}
.hs-chips{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:0;margin:0;padding:14px 16px 8px}
/* 빈 검색창의 원단 바로 찾기: 상자 칩 대신 글자 줄(누르는 높이 44px) · 머리말 한 줄(2026-11-06 아트 디렉터) */
.hs-chips-h{flex-basis:100%;margin:0 0 2px;font-size:11px;letter-spacing:.14em;font-weight:500;color:#6A6A6A}
.hs-chips button{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;border-radius:0;font:inherit;font-size:15px;color:#111;cursor:pointer;text-underline-offset:5px}
.hs-chips button:hover{text-decoration:underline;text-decoration-color:#1B2438}
.hs-chips button:focus-visible{outline:2px solid #1B2438;outline-offset:2px}
.hs-none{margin:0;padding:18px 16px 8px;font-size:13px;color:#6B6B6B;word-break:keep-all}
.hs-alt{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0 16px 18px}
.hs-alt a{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--rv-btn-r-pill,999px);border:1px solid #D9D9D9;font-size:13px;color:#1B2438;text-decoration:none;word-break:keep-all}
.hs-alt a:hover,.hs-alt a:focus-visible{border-color:#1B2438}
@container mg (max-width:700px){
.hs-box{inset:0;width:auto!important;max-height:none;border:0;border-radius:0;box-shadow:none;transition:none}
.hs-form{height:56px;padding:0 6px 0 16px;border-bottom:0}
.hs-input,.hs-ghost{line-height:56px}
.hs-list{flex:1;max-height:none}
.hs-row{padding:12px 16px 12px 14px}
.hs-t{font-size:15px}
.hs-x{width:44px;height:44px}
}
/* PC: 머리 아래에 붙어 내려오는 판(2026-10-31 아트 디렉터) — 머리 글자를 덮지 않고, 위에서 살짝 내려온다 */
.hs-pc .hs-box{animation:hs-drop .18s ease both}
@keyframes hs-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hs-box{transition:none}.hs-pc .hs-box{animation:none}}
/* 회원 기능 바로가기(맨 위 묶음): 같은 줄 모양, 오른쪽 표시만 네이비 */
.hs-g[data-hs-g="go"] .hs-sec{color:#1B2438}