@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap";:root{color-scheme:dark;--bg: #0a0f14;--bg-elevated: rgba(15, 24, 35, .88);--bg-panel: rgba(16, 29, 42, .82);--border: rgba(142, 184, 255, .22);--border-strong: rgba(87, 195, 150, .42);--text: #ebf2ff;--text-muted: #98a9bf;--accent: #7bf0b3;--accent-strong: #00c45c;--shadow: 0 30px 80px rgba(0, 0, 0, .28)}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{background:radial-gradient(circle at top left,rgba(0,196,92,.18),transparent 28%),radial-gradient(circle at right center,rgba(0,159,253,.14),transparent 32%),linear-gradient(180deg,#081018,#0d141d);color:var(--text);font-family:Space Grotesk,Noto Sans KR,sans-serif}button,input,select{font:inherit}.control-page{min-height:100vh;padding:32px}.control-grid{display:grid;gap:24px;grid-template-columns:minmax(360px,460px) minmax(0,1fr);align-items:start}.panel{background:var(--bg-elevated);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}.control-panel{padding:28px}.preview-panel{display:grid;gap:18px;min-height:640px;padding:24px}.eyebrow{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.page-title{margin:8px 0 10px;font-size:clamp(2rem,4vw,3.25rem);line-height:.95}.page-copy,.field-note,.status-line,.popup-tip,.preview-caption,.output-subcopy{color:var(--text-muted)}.section-stack{display:grid;gap:20px;margin-top:28px}.section-card{background:var(--bg-panel);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:18px}.section-title{margin:0 0 14px;font-size:1rem;font-weight:700}.field-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid--wide{grid-template-columns:1fr}.field{display:grid;gap:8px}.field--full{grid-column:1 / -1}.field-label{font-size:.9rem;font-weight:500}.field input,.field select{width:100%;padding:12px 14px;background:#030a11e6;color:var(--text);border:1px solid rgba(255,255,255,.08);border-radius:14px;outline:none}.field input:focus,.field select:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px #00c45c24}.checkbox-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 14px;background:#030a11e6;border:1px solid rgba(255,255,255,.08);border-radius:14px}.checkbox-row input{width:20px;height:20px}.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.button{border:0;border-radius:999px;cursor:pointer;padding:13px 20px;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}.button:hover{transform:translateY(-1px)}.button:active{transform:translateY(0)}.button--primary{background:linear-gradient(135deg,#00c45c,#8bff91);box-shadow:0 14px 28px #00c45c3d;color:#03120a;font-weight:700}.button--secondary{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:var(--text)}.button--ghost{background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--text-muted)}.status-pill{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:10px 14px;background:#0000003d;border:1px solid rgba(255,255,255,.07);border-radius:999px;font-size:.88rem}.status-pill:before{width:9px;height:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 18px #7bf0b38c;content:""}.preview-panel-head{display:flex;align-items:end;justify-content:space-between;gap:16px}.preview-panel-copy{display:grid;gap:8px}.preview-heading{margin:0;font-size:1.5rem}.clock-canvas-shell{position:relative;display:grid;place-items:center;min-height:100%;overflow:hidden}.clock-canvas-shell--preview{min-height:520px;background:linear-gradient(180deg,#ffffff08,#ffffff03),#00000047;border:1px solid rgba(255,255,255,.06);border-radius:24px}.clock-canvas-shell--output{width:100%;height:100%;background:#050608}.clock-canvas{max-width:100%;max-height:100%}.clock-canvas-shell--preview .clock-canvas{border-radius:20px;box-shadow:0 24px 56px #0000005c}.clock-preview-meta{position:absolute;right:16px;bottom:16px;display:flex;flex-wrap:wrap;justify-content:end;gap:8px}.clock-preview-meta span{padding:8px 10px;background:#02080dc7;border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:.75rem}.popup-page{display:grid;width:100vw;height:100vh;background:#040506}.output-frame{position:relative;display:grid;width:100%;height:100%}.output-overlay{position:absolute;top:18px;right:18px;z-index:2;display:grid;gap:10px;width:min(360px,calc(100vw - 36px));padding:16px;background:#080d12b8;backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:18px}.output-title{margin:0;font-size:1rem}.output-actions{display:flex;flex-wrap:wrap;gap:10px}.output-actions .button{padding:10px 14px}@media(max-width:1080px){.control-page{padding:18px}.control-grid{grid-template-columns:1fr}.preview-panel{min-height:480px}}@media(max-width:720px){.field-grid{grid-template-columns:1fr}.button-row{flex-direction:column}.button{width:100%;justify-content:center}.output-overlay{left:12px;right:12px;width:auto}}