:root {
                --bg: #f7f3ee;
                --panel: #fffdfa;
                --line: #e2d7ca;
                --text: #241b14;
                --muted: #6f6153;
                --youtube: #d81f16;
                --youtube-soft: #fff1ef;
                --facebook: #1877f2;
                --facebook-soft: #eef5ff;
                --instagram: #cf2f73;
                --instagram-soft: #fff1f7;
                --x: #050505;
                --x-soft: #e8e8e8;
                --ok-bg: #ebf8ef;
                --ok-text: #245f38;
                --error-bg: #fff1f1;
                --error-text: #962626;
                --warn-bg: #fff7df;
                --warn-text: #6d5400;
                --shadow: 0 26px 60px rgba(53, 31, 18, 0.12);
            }

            * { box-sizing: border-box; }
            body {
                margin: 0;
                min-height: 100vh;
                font-family: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
                color: var(--text);
                background:
                    radial-gradient(circle at top left, rgba(216, 31, 22, 0.08), transparent 24%),
                    radial-gradient(circle at top right, rgba(255, 191, 128, 0.18), transparent 30%),
                    linear-gradient(135deg, #f9f4ed 0%, #efe4d8 100%);
            }
            body.is-loading {
                overflow: hidden;
            }
            body.is-loading .shell {
                filter: blur(2px);
                transform: scale(0.997);
                pointer-events: none;
            }
            .page-loading {
                position: fixed;
                inset: 0;
                z-index: 9999;
                display: none;
                align-items: center;
                justify-content: center;
                padding: 24px;
                background: rgba(36, 27, 20, 0.46);
                backdrop-filter: blur(5px);
            }
            body.is-loading .page-loading {
                display: flex;
            }
            .loading-card {
                width: min(360px, 100%);
                padding: 28px;
                border: 1px solid rgba(255,255,255,0.62);
                border-radius: 24px;
                background: rgba(255,253,250,0.96);
                box-shadow: 0 30px 80px rgba(0,0,0,0.28);
                text-align: center;
            }
            .loading-spinner {
                width: 48px;
                height: 48px;
                margin: 0 auto 16px;
                border: 5px solid #eaded2;
                border-top-color: var(--youtube);
                border-radius: 999px;
                animation: spin 0.8s linear infinite;
            }
            .loading-title {
                display: block;
                font-size: 18px;
                font-weight: 900;
                color: var(--text);
            }
            .loading-desc {
                margin-top: 8px;
                font-size: 13px;
                line-height: 1.6;
                color: var(--muted);
            }
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            .shell {
                width: min(1200px, calc(100% - 28px));
                margin: 18px auto;
                padding: 28px;
                border: 1px solid var(--line);
                border-radius: 28px;
                background: rgba(255, 253, 250, 0.96);
                box-shadow: var(--shadow);
            }
            .topbar, .panel-head, .card-actions, .list-actions {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 14px;
                flex-wrap: wrap;
            }
            .eyebrow {
                display: inline-flex;
                align-items: center;
                padding: 8px 12px;
                border-radius: 999px;
                background: #fff;
                color: var(--youtube);
                font-size: 12px;
                font-weight: 800;
                letter-spacing: 0.08em;
                text-transform: uppercase;
            }
            h1 {
                margin: 16px 0 10px;
                font-size: clamp(30px, 5vw, 52px);
                line-height: 1.05;
            }
            h2 {
                margin: 0 0 8px;
                font-size: 24px;
            }
            h3 {
                margin: 0 0 8px;
                font-size: 18px;
            }
            p {
                margin: 0;
                color: var(--muted);
                line-height: 1.7;
            }
            .lead {
                max-width: 820px;
            }
            .settings-link, .tab, .btn, .btn-secondary, .open-link {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                font-weight: 800;
            }
            .settings-link {
                padding: 12px 16px;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: #fff;
                color: var(--text);
            }
            .tab-row {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
            }
            .platform-tabs { margin-top: 28px; }
            .section-tabs { margin-top: 18px; }
            .tab {
                gap: 10px;
                padding: 14px 18px;
                border: 1px solid var(--line);
                border-radius: 18px;
                background: #fff;
                color: var(--text);
            }
            .tab.active.youtube { background: var(--youtube-soft); border-color: #efb4af; color: #9a180f; }
            .tab.active.facebook { background: var(--facebook-soft); border-color: #bdd4ff; color: #1457ad; }
            .tab.active.instagram { background: var(--instagram-soft); border-color: #edbfd4; color: #9c295c; }
            .tab.active.x { background: var(--x-soft); border-color: #3f3f3f; color: #050505; }
            .content {
                margin-top: 24px;
                padding: 24px;
                border: 1px solid var(--line);
                border-radius: 24px;
                background: var(--panel);
            }
            .flash, .errors, .warning {
                margin-top: 18px;
                padding: 14px 16px;
                border-radius: 16px;
                font-size: 14px;
                line-height: 1.6;
            }
            .flash { background: var(--ok-bg); color: var(--ok-text); }
            .errors { background: var(--error-bg); color: var(--error-text); }
            .warning { background: var(--warn-bg); color: var(--warn-text); }
            .stack, .list-grid, .error-grid, .settings-grid, .meta {
                display: grid;
                gap: 16px;
                margin-top: 22px;
            }
            .panel, .list-item, .error-item, .settings-item, .meta-row {
                padding: 18px;
                border: 1px solid var(--line);
                border-radius: 20px;
                background: #fff;
            }
            .list-item.local-upload {
                border-color: #86c49b;
                background: linear-gradient(135deg, #f0fbf3 0%, #ffffff 72%);
            }
            .list-item.external-upload {
                border-color: #d7c7b6;
                background: linear-gradient(135deg, #fff8ee 0%, #ffffff 72%);
            }
            .edit-toggle {
                margin-top: 14px;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: rgba(255,255,255,0.76);
                overflow: hidden;
            }
            .edit-toggle summary {
                padding: 12px 14px;
                cursor: pointer;
                font-weight: 800;
                color: var(--text);
                list-style: none;
            }
            .edit-toggle summary::-webkit-details-marker { display: none; }
            .edit-toggle summary::after {
                content: "열기";
                float: right;
                color: var(--muted);
                font-size: 12px;
            }
            .edit-toggle[open] summary::after { content: "닫기"; }
            .edit-body {
                padding: 0 14px 14px;
            }
            .mini, .hint {
                font-size: 13px;
                color: var(--muted);
                line-height: 1.6;
            }
            .card-title, .list-title, .error-title, .settings-item strong, .meta-label {
                display: block;
                margin-bottom: 8px;
                font-size: 15px;
                font-weight: 800;
            }
            .meta-label {
                color: var(--muted);
                font-size: 12px;
                letter-spacing: 0.05em;
                text-transform: uppercase;
            }
            .btn {
                padding: 14px 18px;
                border: 0;
                border-radius: 16px;
                color: #fff;
                cursor: pointer;
                background: linear-gradient(135deg, var(--youtube), #ff815b);
            }
            .btn-facebook { background: linear-gradient(135deg, #1877f2, #4aa8ff); }
            .btn-instagram { background: linear-gradient(135deg, #d62976, #f77737); }
            .btn-x { background: linear-gradient(135deg, #050505, #222); }
            .btn-danger { background: linear-gradient(135deg, #b91c1c, #ef4444); }
            .btn-secondary {
                padding: 13px 17px;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: #fff;
                color: var(--text);
                cursor: pointer;
            }
            form { margin: 0; }
            .form-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 16px;
                margin-top: 22px;
            }
            .field, .field-full {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .field-full { grid-column: 1 / -1; }
            label {
                font-size: 14px;
                font-weight: 800;
            }
            .required-mark {
                margin-left: 4px;
                color: #d61f1f;
                font-weight: 900;
            }
            input, select, textarea {
                width: 100%;
                padding: 14px 15px;
                border: 1px solid #d8cab9;
                border-radius: 16px;
                background: #fffdfa;
                color: var(--text);
                font: inherit;
            }
            textarea {
                min-height: 140px;
                resize: vertical;
            }
            .field-error {
                border-color: #d61f1f !important;
                box-shadow: 0 0 0 3px rgba(214, 31, 31, 0.08);
            }
            .radio-group {
                display: flex;
                gap: 14px;
                flex-wrap: wrap;
                width: 100%;
                margin-top: 8px;
            }
            .radio-option {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                min-width: 230px;
                padding: 12px 14px;
                border: 1px solid var(--line);
                border-radius: 14px;
                background: #fffdfa;
                font-weight: 800;
            }
            .radio-option input {
                width: auto;
                margin: 0;
                flex: 0 0 auto;
            }
            .hidden-pane {
                display: none;
            }
            .list-meta, .error-meta {
                display: grid;
                gap: 6px;
                margin-top: 10px;
                font-size: 13px;
                color: var(--muted);
            }
            .badge {
                display: inline-flex;
                align-items: center;
                padding: 7px 10px;
                border-radius: 999px;
                font-size: 12px;
                font-weight: 800;
                background: #fff4e6;
                color: #8f5c00;
            }
            .open-link {
                padding: 10px 14px;
                border: 1px solid #efb4af;
                border-radius: 14px;
                background: #fff4f1;
                color: #9a180f;
            }
            .code-block {
                margin-top: 12px;
                padding: 12px 14px;
                border: 1px solid var(--line);
                border-radius: 14px;
                background: #faf5ee;
                overflow: auto;
                white-space: pre-wrap;
                word-break: break-word;
                font-size: 12px;
                line-height: 1.6;
            }
            @media (max-width: 920px) {
                .shell {
                    width: min(100% - 18px, 1200px);
                    margin: 10px auto;
                    padding: 18px;
                    border-radius: 20px;
                }
                .topbar, .panel-head, .card-actions, .list-actions {
                    align-items: flex-start;
                    flex-direction: column;
                }
                .form-grid {
                    grid-template-columns: 1fr;
                }
                .radio-group {
                    flex-direction: column;
                }
                .radio-option {
                    width: 100%;
                    min-width: 0;
                }
            }