/* =================================================================== */
/* 페이지 특정 CSS (QR 코드 생성기용)                                   */
/* =================================================================== */


.main-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-spacing-large);
    align-items: flex-start;
}
.input-card { flex: 1; min-width: 400px; }
.preview-card {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--rg-spacing-xlarge) var(--rg-spacing-large);
    position: sticky;
    top: var(--rg-spacing);
}

.tab-pane .rg_form_input,
.tab-pane .rg_form_textarea,
.tab-pane .rg_form_select {
    margin-bottom: 10px;
}

.rg_radio_group { display: flex; flex-wrap: wrap; gap: 8px; }
.rg_radio_group input[type="radio"] { position: absolute; opacity: 0; }
.rg_radio_group label { padding: 8px 16px; font-size: 0.9rem; border-radius: var(--rg-border-radius); cursor: pointer; background-color: var(--rg-color-secondary); border: 1px solid var(--rg-color-border); transition: all 0.2s; }
.rg_radio_group input[type="radio"]:checked + label { background-color: var(--rg-color-primary); color: white; border-color: var(--rg-color-primary-dark); }

.color-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.color-group .rg_form_label { margin-bottom: 0; }
input[type="color"] { width: 40px; height: 40px; border: none; padding: 0; cursor: pointer; border-radius: 8px; background-color: transparent; }
input[type="color"]::-webkit-color-swatch { border: 1px solid var(--rg-color-border); border-radius: 8px; }

.recommended-colors { margin-top: var(--rg-spacing-large); padding-top: var(--rg-spacing-large); border-top: 1px solid var(--rg-color-border); }
#palette-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.palette-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.2s; }
.palette-swatch:hover { transform: scale(1.1); }

.qr-code-wrapper { width: 100%; max-width: 240px; aspect-ratio: 1 / 1; padding: 10px; border-radius: var(--rg-border-radius); box-shadow: var(--rg-shadow-md); background: white; }
#canvas { width: 100% !important; height: 100% !important; }
.action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 300px; margin-top: var(--rg-spacing-large); }

.help-section { margin-top: var(--rg-spacing-xlarge);border-radius: var(--rg-border-radius); box-shadow: var(--rg-shadow); }
#help-content { display: none; padding: 0 var(--rg-spacing-large) var(--rg-spacing-large); color: var(--rg-color-text-secondary); line-height: 1.8; }
#help-toggle-btn { width: 100%; text-align: left; padding: var(--rg-spacing-large); font-weight: 700; background: none; border: none; cursor: pointer; font-size: 1.1rem; }

@media print { body * { visibility: hidden; } .qr-code-wrapper, .qr-code-wrapper * { visibility: visible; } .qr-code-wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: none; border: 1px solid #ccc; } }
@media (max-width: 768px) { .preview-card { position: static; } .input-card, .preview-card { min-width: 100%; } }