/* ===== PC 상단 검색창 가상키보드 =====
   클래스는 vk- 로 시작하는 이름만 사용합니다. (기존 CSS 와 이름이 겹치지 않도록)
   색상은 theme_vars.css 의 브랜드 색상 변수를 따라갑니다. */

/* 검색창 안쪽 키보드 아이콘 */
.pc-main-search .vk-toggle {
    position: absolute;
    top: 50%;
    right: 54px;                 /* 검색 버튼 바로 왼쪽 */
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    z-index: 3;
}
.pc-main-search .vk-toggle:hover {
    background: #f0f2f0;
    color: #333;
}
.pc-main-search .vk-toggle.vk-toggle--on {
    background: var(--brand-primary, #00a65a);
    color: var(--brand-btn-text, #fff);
}

/* 키보드 아이콘이 검색어를 가리지 않도록 입력창 오른쪽 여백 확보 */
#hd_wrapper .pc-main-search input[type="text"] { padding-right: 92px; }

/* 키보드 패널 */
.vk-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 420px;
    background: #fff;
    border: 1px solid #d6ded8;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 1000;
    box-sizing: border-box;
    text-align: left;
}
.vk-panel.vk-panel--open { display: block; }

/* 패널 머리말 */
.vk-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #eef0ee;
    background: #f7faf8;
    border-radius: 10px 10px 0 0;
}
.vk-panel__title { font-size: 12px; font-weight: 700; color: #4b5563; }
.vk-panel__close {
    font-size: 12px;
    color: #888;
    cursor: pointer;
    user-select: none;
    padding: 2px 6px;
    border-radius: 4px;
}
.vk-panel__close:hover { background: #eceeec; color: #333; }

/* 자판 영역 */
.vk-panel__body { padding: 12px; }

.vk-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    justify-content: center;
}
.vk-row:last-child { margin-bottom: 0; }
.vk-row--fn { margin-top: 8px; }

/* 글자 키 */
.vk-key {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 15px;
    color: #222;
    background: #f4f6f5;
    border: 1px solid #dfe4e0;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}
.vk-key:hover { background: #fff; border-color: var(--brand-primary, #00a65a); }
.vk-key:active { background: #ededed; }

/* 기능 키 (Shift, 지우기, 전체삭제) */
.vk-key--fn {
    flex: 1.6 1 0;
    font-size: 12px;
    color: #4b5563;
    background: #eceeec;
}
/* Shift 가 눌려 있는 상태 */
.vk-key--on {
    background: var(--brand-primary, #00a65a);
    border-color: var(--brand-primary, #00a65a);
    color: var(--brand-btn-text, #fff);
}
/* 한/영 전환 키 */
.vk-key--lang {
    flex: 1.4 1 0;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    background: #fff;
    border-color: var(--brand-primary, #00a65a);
}
/* 공백 키 */
.vk-key--space { flex: 3 1 0; font-size: 12px; color: #4b5563; }
/* 검색 키 */
.vk-key--search {
    flex: 1.6 1 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-btn-text, #fff);
    background: var(--brand-primary, #00a65a);
    border-color: var(--brand-primary, #00a65a);
}
.vk-key--search:hover {
    background: var(--brand-primary-dk, #008549);
    border-color: var(--brand-primary-dk, #008549);
}