/* 토큰이 든 주소·토큰 칸 가리기 (static/js/secret-field.js) — 대시보드 전체 공용.
 * 가려진 동안은 불투명한 덮개가 칸을 덮고, 칸도 type=password 라 글자가 그려지지 않는다.
 * 모서리는 그 칸과 맞춰야 해서 --secret-radius 로 받는다(기본 9px = 대시보드 입력칸).
 */
.secret {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
}
.secret > .secret-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
/* 보일 때는 오른쪽 눈 버튼 자리를 비운다 */
.secret.is-open > .secret-input { padding-right: 38px; }

.secret-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid var(--db-border, #e4e4e7);
    border-radius: var(--secret-radius, 9px);
    background: var(--db-surface-2, #fafaf9);
    color: var(--db-text-sub, #52525b);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.dark .secret-cover { background: var(--db-surface-3, #2d2d2d); }
.secret-cover:hover { border-color: var(--db-border-strong, #c9c9cf); color: var(--db-text, #1f1f22); }
.secret-cover:focus-visible { outline: 2px solid var(--db-focus, #1f1f22); outline-offset: 2px; }
.secret-cover:disabled { cursor: progress; opacity: .7; }
.secret-cover svg { flex-shrink: 0; }
.secret-cover-text { overflow: hidden; text-overflow: ellipsis; }
.secret-cover[hidden] { display: none; }

.secret-hide {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--db-text-mute, #6b6b74);
    cursor: pointer;
    transform: translateY(-50%);
}
.secret-hide:hover { background: var(--db-surface-3, #f4f4f5); color: var(--db-text, #1f1f22); }
.secret-hide:focus-visible { outline: 2px solid var(--db-focus, #1f1f22); outline-offset: 1px; }
.secret-hide[hidden] { display: none; }