/* onboarding.css — 신규 유저 "샘플 모드" 안내 UI * 1) 상단 상시 배너 2) 최초 1회 환영 모달 3) 탭 스포트라이트 투어 4) 안내 재생 버튼 * 기존 디자인 토큰(--color-*, --space-*, --font-*)만 사용해 앱 톤을 해치지 않는다. * 샘플 모드일 때만 에 .ar-sample-mode 가 붙는다. */ /* 배너 높이만큼 활성 화면을 아래로 밀어 헤더와 겹치지 않게 한다(.screen 은 position:fixed). */ :root { --ar-sample-banner-h: 0px; } body.ar-sample-mode .screen.active { top: var(--ar-sample-banner-h); } /* ── 1. 상단 상시 배너 ─────────────────────────────────────────────────── */ #ar-sample-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: none; align-items: center; justify-content: center; gap: var(--space-2, 8px); padding: 6px 14px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); background: linear-gradient(180deg, #FBF3DD 0%, #F7ECCB 100%); border-bottom: 1px solid rgba(154, 106, 16, 0.28); color: var(--color-warning, #9A6A10); font-family: var(--font-family-app); font-size: var(--font-size-xs, 0.72rem); font-weight: var(--font-weight-semibold, 600); line-height: 1.25; text-align: center; box-shadow: 0 2px 8px rgba(78, 74, 66, 0.10); } body.ar-sample-mode #ar-sample-banner { display: flex; } #ar-sample-banner .ar-sample-banner__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent, #D6A84F); box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.25); } #ar-sample-banner strong { font-weight: var(--font-weight-bold, 700); } /* 샘플 모드에서는 샘플 라운드 상세의 편집/삭제/공유를 숨겨 완전한 읽기 전용으로. */ body.ar-sample-mode #round-detail-edit-btn, body.ar-sample-mode #round-detail-share-btn, body.ar-sample-mode #detail-memo-edit-btn, body.ar-sample-mode .round-detail-delete-section { display: none !important; } /* ── 4. 안내 재생 버튼(플로팅) ─────────────────────────────────────────── */ #ar-sample-help { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: none; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--color-border-strong, rgba(49,95,64,0.24)); border-radius: 999px; background: var(--color-bg-card, #FFFDF7); color: var(--color-brand-primary-strong, #315F40); font-family: var(--font-family-app); font-size: var(--font-size-xs, 0.72rem); font-weight: var(--font-weight-semibold, 600); box-shadow: 0 6px 18px rgba(49, 95, 64, 0.18); cursor: pointer; } body.ar-sample-mode #ar-sample-help { display: inline-flex; } #ar-sample-help svg { width: 15px; height: 15px; } /* ── 공통 모달/오버레이 ───────────────────────────────────────────────── */ .ar-onb-backdrop { position: fixed; inset: 0; z-index: 13000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(36, 34, 29, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.22s ease; } .ar-onb-backdrop.is-open { opacity: 1; } /* ── 2. 환영 모달 ─────────────────────────────────────────────────────── */ .ar-onb-welcome { width: 100%; max-width: 360px; background: var(--color-bg-card, #FFFDF7); border-radius: 20px; padding: 26px 22px 20px; box-shadow: 0 24px 60px rgba(36, 34, 29, 0.32); font-family: var(--font-family-app); transform: translateY(10px) scale(0.98); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); text-align: center; } .ar-onb-backdrop.is-open .ar-onb-welcome { transform: translateY(0) scale(1); } .ar-onb-welcome__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; margin-bottom: 14px; background: #FBF3DD; color: var(--color-warning, #9A6A10); border-radius: 999px; font-size: var(--font-size-xs, 0.72rem); font-weight: var(--font-weight-bold, 700); letter-spacing: 0.02em; } .ar-onb-welcome__title { margin: 0 0 10px; font-size: var(--font-size-xl, 1.32rem); font-weight: var(--font-weight-bold, 700); color: var(--color-text-primary, #24221D); line-height: 1.3; } .ar-onb-welcome__body { margin: 0 0 20px; font-size: var(--font-size-sm, 0.82rem); font-weight: var(--font-weight-regular, 400); color: var(--color-text-secondary, #4E4A42); line-height: 1.6; } .ar-onb-welcome__body b { color: var(--color-brand-primary-strong, #315F40); font-weight: var(--font-weight-semibold, 600); } .ar-onb-actions { display: flex; flex-direction: column; gap: 9px; } .ar-onb-btn { width: 100%; padding: 13px 16px; border-radius: 13px; font-family: var(--font-family-app); font-size: var(--font-size-md, 0.94rem); font-weight: var(--font-weight-semibold, 600); cursor: pointer; border: none; transition: filter 0.15s ease, background 0.15s ease; } .ar-onb-btn--primary { background: var(--color-brand-primary, #4F865D); color: #fff; } .ar-onb-btn--primary:hover { filter: brightness(1.05); } .ar-onb-btn--ghost { background: transparent; color: var(--color-text-muted, #8A8578); padding: 8px; font-weight: var(--font-weight-medium, 500); } /* ── 3. 스포트라이트 투어 ─────────────────────────────────────────────── */ .ar-tour-root { position: fixed; inset: 0; z-index: 99990; pointer-events: none; } .ar-tour-root.is-open { pointer-events: auto; } /* 하이라이트 구멍: box-shadow 로 주변을 어둡게, 대상만 밝게 남긴다. */ .ar-tour-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(24, 30, 22, 0.66); outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 2px; transition: all 0.28s cubic-bezier(0.3, 0.9, 0.3, 1); pointer-events: none; } .ar-tour-tip { position: fixed; width: min(300px, calc(100vw - 32px)); background: var(--color-bg-card, #FFFDF7); border-radius: 15px; padding: 15px 16px 13px; box-shadow: 0 18px 44px rgba(24, 30, 22, 0.4); font-family: var(--font-family-app); transition: top 0.28s ease, left 0.28s ease, opacity 0.2s ease; } .ar-tour-tip__step { font-size: var(--font-size-xs, 0.72rem); font-weight: var(--font-weight-bold, 700); color: var(--color-accent, #D6A84F); letter-spacing: 0.04em; margin-bottom: 5px; } .ar-tour-tip__title { margin: 0 0 5px; font-size: var(--font-size-md, 0.94rem); font-weight: var(--font-weight-bold, 700); color: var(--color-text-primary, #24221D); } .ar-tour-tip__desc { margin: 0 0 13px; font-size: var(--font-size-sm, 0.82rem); color: var(--color-text-secondary, #4E4A42); line-height: 1.55; } .ar-tour-tip__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ar-tour-dots { display: flex; gap: 5px; } .ar-tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong, rgba(49,95,64,0.24)); } .ar-tour-dots span.is-active { background: var(--color-brand-primary, #4F865D); width: 16px; border-radius: 3px; } .ar-tour-nav { display: flex; align-items: center; gap: 8px; } .ar-tour-skip { background: none; border: none; cursor: pointer; font-family: var(--font-family-app); font-size: var(--font-size-xs, 0.72rem); color: var(--color-text-muted, #8A8578); } .ar-tour-next { padding: 9px 16px; border: none; border-radius: 10px; cursor: pointer; background: var(--color-brand-primary, #4F865D); color: #fff; font-family: var(--font-family-app); font-size: var(--font-size-sm, 0.82rem); font-weight: var(--font-weight-semibold, 600); } @media (prefers-reduced-motion: reduce) { .ar-tour-hole, .ar-tour-tip, .ar-onb-backdrop, .ar-onb-welcome { transition: none; } }