/* 파비콘 생성기 */
.fg-mode { max-width: 18rem; }
.fg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--spacing-md, 1rem); margin-top: var(--spacing-md, 1rem); }
.fg-color { padding: .125rem; height: 2.375rem; }
.fg-drop { border: 2px dashed var(--border-color, #d8dce3); border-radius: var(--radius-md, 8px); padding: var(--spacing-lg, 1.5rem); text-align: center; cursor: pointer; background: var(--bg-subtle, #f8f9fb); margin-top: var(--spacing-md, 1rem); }
.fg-drop:hover, .fg-drop:focus-visible, .fg-drop.is-over { border-color: var(--accent-primary, #3b6fe0); background: var(--accent-soft, #eef3fd); outline: none; }
.fg-drop > i { font-size: 1.75rem; color: var(--accent-primary, #3b6fe0); margin-bottom: .375rem; }
.fg-drop-title { margin: 0 0 .25rem; font-weight: 600; font-size: var(--text-sm, .875rem); }
.fg-drop-hint { margin: 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.fg-preview-bar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--surface-2, #f1f3f7); border-radius: var(--radius-sm, 6px); margin-bottom: var(--spacing-md, 1rem); flex-wrap: wrap; }
.fg-preview-label { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.fg-preview { display: flex; align-items: center; gap: 1rem; }
.fg-preview-item { image-rendering: auto; }
.fg-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .625rem; }
.fg-size { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .625rem .25rem; border: 1px solid var(--border-color, #e5e8ed); border-radius: var(--radius-sm, 6px); background: var(--bg-surface, #fff); }
.fg-canvas-holder { display: flex; align-items: center; justify-content: center; height: 4rem; }
.fg-canvas-holder canvas { max-width: 4rem; max-height: 4rem; }
.fg-size span { font-size: .6875rem; color: var(--text-muted, #626977); font-variant-numeric: tabular-nums; }
.fg-subtitle { font-size: var(--text-sm, .875rem); font-weight: 700; margin: var(--spacing-lg, 1.5rem) 0 .5rem; }
.fg-html-row { display: flex; gap: .5rem; align-items: flex-start; }
.fg-html { flex: 1 1 auto; font-family: ui-monospace, monospace; font-size: var(--text-ui-sm, .8125rem); white-space: pre; overflow-x: auto; }
.fg-alert { margin-top: var(--spacing-md, 1rem); }
.fg-note { margin-top: var(--spacing-lg, 1.5rem); }