/* 예약이음 brand-flow background layer (pairs with brand-flow.js). * The layer itself carries a calm CSS gradient: it shows before the first * WebGL frame and stays as the fallback (no WebGL, context lost, slow device). */ /* Let the fixed layer sit behind content: the page color moves to . */ html:has(body.brand-ambient-enabled) { background: var(--paper, #f6f2ea); } body.brand-ambient-enabled { background: transparent; } .brand-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background-color: var(--paper, #f6f2ea); background-image: radial-gradient(60% 55% at 85% 15%, rgb(var(--ambient-sage-rgb, 101 186 150) / .16), transparent 70%), radial-gradient(55% 60% at 12% 88%, rgb(var(--ambient-jade-rgb, 44 185 148) / .12), transparent 70%), radial-gradient(40% 35% at 70% 80%, rgb(var(--ambient-clay-rgb, 235 134 94) / .05), transparent 70%), linear-gradient(160deg, var(--paper, #f6f2ea) 0%, var(--mint, #dfe8df) 100%); } .brand-ambient-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; } .brand-ambient.is-ready .brand-ambient-canvas { opacity: 1; } .brand-ambient.is-static .brand-ambient-canvas { display: none; } @media (prefers-reduced-motion: reduce) { .brand-ambient-canvas { transition: none; } } /* Pause / resume control. palette.css may refine the colors. */ .ambient-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: .4em; padding: .45em .9em; font: inherit; font-size: .8125rem; line-height: 1.2; color: var(--text, #294b46); background: rgb(var(--paper-rgb, 246 242 234) / .92); border: 1px solid var(--line, #ccd8ce); border-radius: 999px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ambient-toggle[hidden] { display: none; } .ambient-toggle:hover { border-color: var(--line-strong, #a4b6ab); } .ambient-toggle[aria-pressed="true"] { background: var(--mint, #dfe8df); } .ambient-toggle:focus-visible { outline: 2px solid var(--focus, #965039); outline-offset: 2px; } @media print { .brand-ambient, .ambient-toggle { display: none; } }