/* =================================================================== */
/* 페이지 특정 CSS (Base64 인코더/디코더용)                             */
/* =================================================================== */

.encoder-decoder-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-spacing-large);
}
.encoder-decoder-layout > .rg_card {
    flex: 1; min-width: 350px; display: flex; flex-direction: column;
}
.rg_card_content { flex-grow: 1; display: flex; flex-direction: column; }
.rg_card_content .rg_form_group { flex-grow: 1; display: flex; flex-direction: column; }
.rg_card_content .rg_form_textarea { flex-grow: 1; }

.textarea-utils { display: flex; justify-content: space-between; align-items: center; margin-top: var(--rg-spacing-small); }
.char-count { font-size: 0.8rem; color: var(--rg-color-text-light); }
.util-buttons { display: flex; gap: 8px; }

/* 파일 업로드 영역 */
.file-upload-zone {
    border: 2px dashed var(--rg-color-border);
    border-radius: var(--rg-border-radius);
    padding: var(--rg-spacing-xlarge);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.file-upload-zone.dragover {
    border-color: var(--rg-color-primary);
    background-color: color-mix(in srgb, var(--rg-color-primary) 5%, transparent);
}
.file-upload-zone .upload-icon {
    font-size: 2.5rem;
    color: var(--rg-color-primary);
    margin-bottom: var(--rg-spacing);
}
.file-upload-zone .upload-text {
    font-weight: 600;
    color: var(--rg-color-text);
}
.file-upload-zone .upload-hint {
    font-size: 0.9rem;
    color: var(--rg-color-text-secondary);
}
#file-input { display: none; }

/* 디코딩 결과 미리보기 */
#decode-preview {
    margin-top: var(--rg-spacing);
    padding-top: var(--rg-spacing);
    border-top: 1px solid var(--rg-color-border);
}
#decode-preview img {
    max-width: 100%;
    border-radius: var(--rg-border-radius);
    border: 1px solid var(--rg-color-border);
}
#decode-preview a {
    font-weight: 600;
    color: var(--rg-color-primary-dark);
}