/* 이 파일은 `scripts/split-css.mjs` 가 `css/toolbox.css` 에서 뽑아 만든다 — 손으로 고치지 마라.
   고칠 곳은 `css/toolbox.css` 다 (TASK-KL-128). 이 벌: 눌러야/골라야 나타나는 것 — 화면이 그려진 뒤에 온다 */
.kp { width: 100%; max-width: 640px; margin: 0 auto; }
.kp-box {
    display: flex; flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.kp-inline .kp-box {
    box-shadow: 0 1px 0 var(--border);
}

.kp-box:focus-within {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.kp-input-wrap {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 0 var(--space-md);
    border-bottom: 1px solid var(--border);
}
.kp-input-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-tertiary); }

.kp-box input.kp-input {
    flex: 1 1 auto; min-width: 0; width: auto;
    background: none; border: none; outline: none;
    box-shadow: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-md);

    padding: 12px 0;
    letter-spacing: 0.01em;
}

.kp-box input.kp-input:focus {
    background: none;
    border: none;
    box-shadow: none;
}
.kp-input::placeholder { color: var(--text-tertiary); }
.kp-kbd {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 7px;
    letter-spacing: 0.04em;
}

@media (hover: none) { .kp-kbd { display: none; } }

.kp-close {
    flex-shrink: 0;
    width: 40px; height: 40px;
    margin-right: -6px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    color: var(--text-tertiary);
    border-radius: var(--radius-md);
    transition: color var(--transition), background var(--transition);
}
.kp-close svg { width: 18px; height: 18px; }
.kp-close:hover, .kp-close:focus-visible { color: var(--text-primary); background: var(--bg-hover); }

.kp-list { overflow-y: auto; overscroll-behavior: contain; }

.kp-inline .kp-list {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px var(--brand-shadow, rgba(0, 0, 0, 0.28));

    max-height: min(var(--kp-space, 46vh), 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kp-inline.kp-collapsed .kp-list,
.kp-inline.kp-collapsed .kp-live { display: none; }
.kp-overlay .kp-list { max-height: min(60vh, 520px); }

.kp-section {
    padding: var(--space-sm) var(--space-md) 4px;
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kp-row {
    display: flex; align-items: center; gap: var(--space-md);

    position: relative;

    padding: 11px var(--space-md);
    min-height: 44px;
    cursor: pointer;
    border-left: 2px solid transparent;
}

.kp-row.is-active {
    background: var(--accent-subtle);
    border-left-color: var(--accent);
}
.kp-icon {
    width: 18px; height: 18px; flex: 0 0 auto;
    color: var(--text-tertiary);
}
.kp-icon svg { width: 100%; height: 100%; }
.kp-row.is-active .kp-icon { color: var(--accent); }
.kp-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.kp-row-title {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kp-row-desc {
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
}

.kp-mark {
    background: none;
    color: var(--accent);
    font-weight: 700;
}

.kp-row-answer .kp-icon { color: var(--accent); }
.kp-answer-value {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kp-row-answer.is-active .kp-answer-value { color: var(--accent); }

.kp-row-badge {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
}

.kp-empty { padding: var(--space-lg) var(--space-md); text-align: center; }
.kp-empty p { font-size: var(--font-size-xs); color: var(--text-secondary); margin-bottom: var(--space-sm); }
.kp-ask { display: block; margin: 0 auto var(--space-sm); padding: 7px 14px; font: inherit;
    font-size: var(--font-size-xs); color: var(--accent); background: none;
    border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.kp-ask:hover { border-color: var(--accent); }
.kp-ask[disabled] { color: var(--text-tertiary); cursor: default; }
.kp-ask-hit { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-bottom: var(--space-sm);
    padding: 10px 12px; text-align: left; font: inherit; cursor: pointer;
    background: var(--bg-secondary); border: 1px solid var(--accent); border-radius: var(--radius-sm); }
.kp-ask-hit b { font-size: var(--font-size-sm); color: var(--text-primary); }
.kp-ask-hit span { font-size: var(--font-size-2xs); color: var(--text-tertiary); }
.kp-ask-none { font-size: var(--font-size-2xs); color: var(--text-tertiary); margin-bottom: var(--space-sm); }
.kp-empty-link { font-size: var(--font-size-2xs); color: var(--accent); text-decoration: none; }
.kp-empty-link:hover { text-decoration: underline; }

.kp-browse {
    display: flex; flex-wrap: wrap; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md) var(--space-md);
}
.kp-browse-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 14px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-size-2xs);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.kp-browse-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.kp-browse-n { font-family: var(--font-mono); color: var(--text-tertiary); }

.kp-browse-chip--index {
    background: none;
    border-style: dashed;
    text-decoration: none;
    color: var(--text-tertiary);
}
.kp-browse-chip--index:hover { border-style: solid; color: var(--text-primary); }

.kp-browse-tools .kp-browse-chip { border-color: var(--accent-dim); color: var(--text-primary); }
.kp-browse-tools .kp-browse-chip:hover { border-color: var(--accent); }

.kp-more {
    display: block; width: 100%;
    background: none; border: none;
    border-top: 1px solid var(--border);
    padding: 10px var(--space-md);
    color: var(--accent);
    font-family: inherit;
    font-size: var(--font-size-2xs);
    cursor: pointer;
    text-align: center;
}
.kp-more:hover { background: var(--bg-hover); }

.kp-back {
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    background: none; border: none;
    border-bottom: 1px solid var(--border);
    padding: 10px var(--space-md);
    color: var(--text-tertiary);
    font-family: inherit;
    font-size: var(--font-size-2xs);
    cursor: pointer;
    text-align: left;
}
.kp-back:hover { color: var(--accent); }

.kp-row-child {
    padding-left: calc(var(--space-md) + 22px);
}
.kp-row-child .kp-row-title { font-weight: 400; color: var(--text-secondary); }
.kp-row-child .kp-icon { opacity: 0.55; }

.kp-row-child::before {
    content: '';
    position: absolute;
    left: calc(var(--space-md) + 8px);
    top: 0; bottom: 0;
    border-left: 1px solid var(--border);
}

.kp-live {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.kp-scrim {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;

    padding: 12vh var(--space-md) var(--space-md);
}
.kp-overlay { max-width: 640px; }
.kp-overlay .kp-box {
    background: var(--glass-strong);
    backdrop-filter: var(--glass-blur);
    border-color: var(--border-hover);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
    .kp-overlay { animation: kp-rise 140ms ease-out; }
    @keyframes kp-rise {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: none; }
    }
}

@media (max-width: 640px) {
    .kp-scrim { padding: 0; }
    .kp-overlay { max-width: none; width: 100%; height: 100%; }
    .kp-overlay .kp-box { height: 100%; border: none; border-radius: 0; }
    .kp-overlay .kp-list { max-height: none; flex: 1 1 auto; }
}
.landing-dev-links {
    margin-top: var(--space-md);
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
}
.landing-dev-link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
}
.landing-dev-link-btn:hover {
    color: var(--accent);
    text-decoration: underline;
}