/* ========================================================================== 잠금 화면 · 클라우드 버튼 (lock.css) -------------------------------------------------------------------------- · html.cloud-lock — index.html 가 첫 페인트 전에 붙인다. 잠금 화면이 뜰 때까지 장부를 한 프레임도 보여주지 않도록 body 의 다른 자식을 전부 숨긴다. · #lock-screen — js/components/lockScreen.js 가 body 바로 아래에 만든다. Tailwind 클래스를 쓰지 않는다 — 잠금 화면은 Tailwind CDN 이 준비되기 전에도 제 모양이어야 한다. ========================================================================== */ :root { --ls-bg: #F9FAFB; --ls-text: #191F28; --ls-sub: #6B7684; --ls-muted: #8B95A1; --ls-line: #D1D6DB; --ls-key: #FFFFFF; --ls-key-press: #E5E8EB; --ls-card: #FFFFFF; --ls-input: #FFFFFF; --ls-primary: #3182F6; --ls-primary-soft: #E8F3FF; --ls-danger: #F04452; } [data-theme="dark"] { --ls-bg: #0B0D10; --ls-text: #F2F4F6; --ls-sub: #9AA4B2; --ls-muted: #6B7684; --ls-line: #333A44; --ls-key: #1A1D22; --ls-key-press: #262B33; --ls-card: #15181D; --ls-input: #15181D; --ls-primary-soft: rgba(49, 130, 246, 0.14); } /* ── 가림막 ─────────────────────────────────────────────────────────────── */ html.cloud-lock body { overflow: hidden !important; } html.cloud-lock body > *:not(#lock-screen) { visibility: hidden !important; } /* 잠금 화면 스크립트가 뜨기 전(첫 페인트~DOMContentLoaded)의 빈 화면 + 스피너 */ html.cloud-lock body::before { content: ''; position: fixed; inset: 0; background: var(--ls-bg); z-index: 2147483645; } html.cloud-lock body::after { content: ''; position: fixed; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 3px solid rgba(49, 130, 246, 0.2); border-top-color: var(--ls-primary); animation: ls-spin 0.8s linear infinite; z-index: 2147483646; } html.cloud-lock.ls-ready body::after { display: none; } @keyframes ls-spin { to { transform: rotate(360deg); } } @keyframes ls-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes ls-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } } /* ── 잠금 화면 ──────────────────────────────────────────────────────────── */ #lock-screen { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); overflow-y: auto; background: var(--ls-bg); color: var(--ls-text); font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } .ls-card { width: 100%; max-width: 360px; margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; animation: ls-in 0.32s ease both; } .ls-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.18); } .ls-title { margin: 16px 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; } .ls-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ls-sub); word-break: keep-all; } .ls-msg { min-height: 20px; margin: 6px 0 4px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ls-danger); word-break: keep-all; } .ls-msg.is-info { color: var(--ls-sub); } /* PIN 점 */ .ls-dots { display: flex; gap: 14px; margin: 28px 0 6px; } .ls-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ls-line); transition: background 0.12s, border-color 0.12s, transform 0.12s; } .ls-dots i.on { background: var(--ls-primary); border-color: var(--ls-primary); transform: scale(1.08); } .ls-dots.ls-shake { animation: ls-shake 0.4s ease; } /* 숫자 키패드 */ .ls-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 300px; margin-top: 6px; } .ls-key { height: 62px; border: none; border-radius: 18px; background: var(--ls-key); color: var(--ls-text); font: inherit; font-size: 24px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); cursor: pointer; touch-action: manipulation; user-select: none; transition: background 0.1s, transform 0.1s; } .ls-key:active { background: var(--ls-key-press); transform: scale(0.96); } .ls-key:disabled { opacity: 0.4; cursor: default; } .ls-key-aux { background: transparent; box-shadow: none; font-size: 15px; color: var(--ls-sub); } .ls-key[data-key="back"] { font-size: 20px; } /* 로그인 폼 */ .ls-form { width: 100%; margin-top: 24px; display: grid; gap: 12px; text-align: left; } .ls-field { display: grid; gap: 6px; } .ls-field span { font-size: 12px; font-weight: 700; color: var(--ls-sub); } .ls-field input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--ls-line); border-radius: 14px; background: var(--ls-input); color: var(--ls-text); font: inherit; font-size: 16px; /* 16px 미만이면 iOS 가 입력할 때 화면을 확대한다 */ box-sizing: border-box; } .ls-field input:focus { outline: 2px solid var(--ls-primary); outline-offset: -1px; border-color: transparent; } .ls-field input[readonly] { color: var(--ls-sub); background: transparent; } .ls-form .ls-msg { margin: 0; text-align: center; } .ls-btn { width: 100%; height: 52px; border: none; border-radius: 14px; background: var(--ls-primary); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: filter 0.12s, transform 0.12s; } .ls-btn:active { transform: scale(0.98); } .ls-btn:hover { filter: brightness(0.95); } .ls-btn:disabled { opacity: 0.6; cursor: default; } .ls-btn.ghost { background: var(--ls-key-press); color: var(--ls-text); } .ls-card > .ls-btn { margin-top: 20px; } .ls-remember { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--ls-sub); cursor: pointer; user-select: none; } .ls-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--ls-primary); } .ls-link { margin-top: 14px; padding: 6px 10px; border: none; background: none; color: var(--ls-sub); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .ls-foot { margin: 22px 0 0; font-size: 12px; line-height: 1.6; color: var(--ls-muted); word-break: keep-all; } /* 불러오는 중 */ .ls-spinner { width: 32px; height: 32px; margin: 8px auto 16px; border-radius: 50%; border: 3px solid rgba(49, 130, 246, 0.2); border-top-color: var(--ls-primary); animation: ls-spin 0.8s linear infinite; } .ls-busy { margin: 0; font-size: 15px; font-weight: 700; } .ls-progress { width: 100%; height: 8px; margin-top: 18px; border-radius: 99px; background: var(--ls-line); overflow: hidden; } .ls-progress i { display: block; width: 0; height: 100%; background: var(--ls-primary); transition: width 0.2s ease; } .ls-count { margin: 8px 0 0; font-size: 12px; color: var(--ls-sub); } /* 클라우드가 비어 있을 때 — 시작 방법 고르기 */ .ls-options { width: 100%; margin-top: 22px; display: grid; gap: 10px; text-align: left; } .ls-option { display: block; width: 100%; padding: 16px 18px; border: 1px solid var(--ls-line); border-radius: 18px; background: var(--ls-card); color: var(--ls-text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s, transform 0.12s; } .ls-option:active { transform: scale(0.99); } .ls-option:disabled { opacity: 0.5; cursor: default; } .ls-option.primary { border-color: var(--ls-primary); background: var(--ls-primary-soft); } .ls-option b { display: block; font-size: 15px; font-weight: 700; } .ls-option small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ls-sub); line-height: 1.5; } .ls-confirm { padding: 14px; border-radius: 16px; background: var(--ls-card); border: 1px dashed var(--ls-primary); font-size: 13px; line-height: 1.6; color: var(--ls-text); word-break: keep-all; } .ls-confirm p { margin: 0 0 12px; } .ls-confirm-row { display: flex; gap: 8px; } .ls-confirm-row .ls-btn { height: 44px; font-size: 14px; } /* ── 상단 ☁️ 버튼 ───────────────────────────────────────────────────────── */ .cloud-btn { position: relative; width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #F2F4F6; color: #4E5968; cursor: pointer; transition: background 0.15s; } .cloud-btn:hover { background: #E5E8EB; } .cloud-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } [data-theme="dark"] .cloud-btn { background: #1F2329; color: #C9D1D9; } [data-theme="dark"] .cloud-btn:hover { background: #2A2F36; } .cloud-dot { position: absolute; right: 3px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #F2F4F6; background: #B0B8C1; box-sizing: border-box; } [data-theme="dark"] .cloud-dot { border-color: #1F2329; } .cloud-dot[data-s="synced"] { background: #00D084; } .cloud-dot[data-s="syncing"] { background: #3182F6; animation: cloud-pulse 1s ease-in-out infinite; } .cloud-dot[data-s="paused"] { background: #FF8A00; } .cloud-dot[data-s="offline"] { background: #B0B8C1; } .cloud-dot[data-s="error"] { background: #F04452; } @keyframes cloud-pulse { 50% { opacity: 0.35; } } /* ── 클라우드 시트(☁️ 버튼을 누르면 뜨는 창) ─────────────────────────────── */ .cs-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; } .cs-dot { position: static; width: 10px; height: 10px; border: none; } .cs-time { margin-left: auto; font-size: 12px; color: #8B95A1; } .cs-err { margin: 8px 0 0; font-size: 12px; color: #F04452; word-break: break-all; } .cs-meta { margin: 10px 0 0; font-size: 13px; color: #6B7684; } .cs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; } .cs-btn { padding: 13px 10px; border: none; border-radius: 14px; background: #F2F4F6; color: #4E5968; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.12s; } .cs-btn:hover { background: #E5E8EB; } .cs-btn.primary { grid-column: 1 / -1; background: #E8F3FF; color: #3182F6; } .cs-btn.danger { background: #FEECEE; color: #F04452; } .cs-note { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: #8B95A1; word-break: keep-all; } [data-theme="dark"] .cs-btn { background: #1F2329; color: #C9D1D9; } [data-theme="dark"] .cs-btn.primary { background: rgba(49, 130, 246, 0.16); color: #6AA6FF; } [data-theme="dark"] .cs-btn.danger { background: rgba(240, 68, 82, 0.14); color: #FF6B78; } @media (prefers-reduced-motion: reduce) { .ls-card, .ls-dots.ls-shake, .cloud-dot[data-s="syncing"] { animation: none; } }