/* ============================================================ * namaeduke app stylesheet * Uses CSS custom properties from design_tokens.css, * theme-scoped via [data-theme="..."] on . * ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--typography-family-ja); font-size: var(--typography-size-m); line-height: var(--typography-leading-normal); color: var(--text, #2a2a2a); background: var(--bg, #FFFAF4); -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; } #app { min-height: 100vh; display: flex; flex-direction: column; } button, input, textarea, select { font: inherit; color: inherit; } a { color: var(--ui-link, var(--primary)); text-decoration: none; } a:hover { text-decoration: underline; } /* -------- boot loader -------- */ .boot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 20px; padding: 20px; } .boot-illust { width: 200px; max-width: 56vw; height: auto; animation: boot-breathe 2.6s ease-in-out infinite; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.08)); } .boot-text { font-family: 'Klee One', cursive; color: var(--text-muted); font-size: 13px; letter-spacing: 0.08em; opacity: 0.85; animation: boot-text-fade 2.2s ease-in-out infinite; } @keyframes boot-breathe { 0%, 100% { transform: scale(1) translateY(0); opacity: 0.9; } 50% { transform: scale(1.02) translateY(-4px); opacity: 1; } } @keyframes boot-text-fade { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .boot-pulse { width: 48px; height: 48px; border-radius: 50%; background: var(--primary, #F8C8D4); opacity: 0.3; animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(0.8); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.9; } } /* -------- layout components -------- */ .screen { flex: 1; padding: var(--spacing-m); max-width: 560px; width: 100%; margin: 0 auto; padding-bottom: 80px; /* for bottom nav */ } .screen-header { padding: var(--spacing-m) var(--spacing-l) var(--spacing-s); display: flex; align-items: center; justify-content: space-between; } .screen-title { margin: 0; font-size: var(--typography-size-l); font-weight: var(--typography-weight-bold); color: var(--text); } /* -------- card (non-notebook context) -------- */ .card { background: var(--ui-card-bg, #fff); border-radius: var(--radius-m); padding: var(--spacing-l); box-shadow: var(--shadow-card); margin-bottom: var(--spacing-m); overflow: hidden; } /* Narrow screens: cards shouldn't eat 48px of horizontal real estate. */ @media (max-width: 420px) { .screen { padding: var(--spacing-s); padding-bottom: 80px; } .card { padding: var(--spacing-m); } } /* ============================================================ * Notebook-page aesthetic * * Used for the entry ("日々の記録") page and select other views. * Evokes a physical paper notebook/journal. * ============================================================ */ /* Paper background — uses the theme's notebook_page.png via inline style */ .notebook { background-color: var(--ui-card-bg, #FFFAF4); background-image: var(--notebook-page-url, none); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--radius-l); padding: var(--spacing-l) var(--spacing-m) var(--spacing-xl); margin: 0 auto var(--spacing-m); box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); position: relative; min-height: 70vh; } /* When no notebook_page is available, fall back to a subtle dot texture */ .notebook.no-paper { background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px); background-size: 18px 18px; border: 1px solid var(--ui-border, rgba(0,0,0,0.06)); } /* Notebook page header: date + day-of-week */ .notebook-header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--spacing-s); margin-bottom: var(--spacing-m); border-bottom: 1.5px solid var(--ui-border, rgba(0,0,0,0.12)); font-family: var(--typography-family-display, var(--typography-family-ja)); } .notebook-date-main { font-size: var(--typography-size-xl); font-weight: var(--typography-weight-bold); color: var(--text); } .notebook-date-dow { font-size: var(--typography-size-m); color: var(--text-muted); margin-left: var(--spacing-s); } /* Section within notebook (no card border, just spacing + section label) */ .notebook-section { margin-bottom: var(--spacing-l); } .notebook-section-label { font-size: var(--typography-size-s); color: var(--text-muted); margin-bottom: var(--spacing-s); padding-left: 4px; letter-spacing: 0.02em; } /* Writing area — HANDWRITING font, ruled lines from the background image */ .notebook-textarea { width: 100%; min-height: 240px; padding: 8px 6px; border: none; background: transparent; line-height: 32px; font-family: 'Zen Kurenaido', 'Klee One', 'Hiragino Sans', cursive; font-size: 17px; font-weight: 400; letter-spacing: 0.04em; color: var(--text); resize: vertical; outline: none; } .notebook-textarea::placeholder { color: var(--text-muted); opacity: 0.5; font-family: 'Klee One', 'Hiragino Sans', cursive; } /* Typing animation: letters fade in subtly on keystroke */ @keyframes ink-drop { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ * Pasted-stamps canvas (top of the notebook page) * Stamps appear physically placed on the page with rotation/shadow * ============================================================ */ .pasted-area { position: relative; min-height: 140px; padding: 12px 8px 20px; margin-bottom: var(--spacing-m); border-bottom: 1.5px dashed color-mix(in srgb, var(--text-muted) 30%, transparent); } .pasted-area-empty { text-align: center; color: var(--text-muted); font-family: 'Klee One', cursive; font-size: 14px; padding: 32px 16px; opacity: 0.7; line-height: 1.6; } .pasted-stamps { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; justify-content: flex-start; } .pasted-stamp { position: relative; width: 72px; height: 72px; flex: 0 0 auto; cursor: pointer; animation: stamp-land 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; transform-origin: center; } .pasted-stamp img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(1px 3px 3px rgba(0,0,0,0.18)) drop-shadow(0 0 0.5px rgba(0,0,0,0.1)); } .pasted-stamp-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-family: 'Klee One', cursive; font-size: 10px; color: var(--text-muted); white-space: nowrap; opacity: 0.8; } /* Rotation variants (applied via nth-child rotation, gives natural hand-placed feel) */ .pasted-stamp:nth-child(5n+1) { transform: rotate(-4deg); } .pasted-stamp:nth-child(5n+2) { transform: rotate(3deg); } .pasted-stamp:nth-child(5n+3) { transform: rotate(-2deg); } .pasted-stamp:nth-child(5n+4) { transform: rotate(5deg); } .pasted-stamp:nth-child(5n+5) { transform: rotate(-3deg); } .pasted-stamp:hover { transform: rotate(0) translateY(-2px) scale(1.08) !important; z-index: 2; transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } .pasted-stamp:hover .pasted-stamp-label { color: var(--text); opacity: 1; } /* Close X when hovering to remove */ .pasted-stamp .pasted-stamp-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: white; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.2); opacity: 0; pointer-events: none; transition: opacity 120ms; } .pasted-stamp:hover .pasted-stamp-x { opacity: 1; pointer-events: auto; } @keyframes stamp-land { 0% { transform: scale(1.6) rotate(-10deg); opacity: 0; } 60% { transform: scale(0.92) rotate(-3deg); opacity: 1; } 100% { /* final inherits nth-child rotation */ } } /* ============================================================ * Entry screen: ambient surround background (bg_entry_ambient) * Sits BEHIND the notebook card, giving the feeling of the * journal being placed on a themed desk/surface. * ============================================================ */ .entry-screen { position: relative; /* Isolation keeps the ambient-bg (z-index:-1) safely behind the notebook without leaking to body-level. FAB/sheet/celebration are rendered OUTSIDE .entry-screen (see entry.js render()) so they are NOT trapped by this stacking context — they sit in the app/body context above the bottom-nav. */ isolation: isolate; padding-bottom: 200px; /* room for FAB + bottom-nav + save button */ } .entry-ambient-bg { position: fixed; inset: 0; z-index: -1; background-image: var(--entry-ambient-url, none); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.55; pointer-events: none; } .entry-ambient-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg, #fff) 45%, transparent) 0%, color-mix(in srgb, var(--bg, #fff) 70%, transparent) 100%); } .entry-topbar { display: flex; align-items: center; gap: var(--spacing-s); margin: 4px 0 var(--spacing-s); } .entry-back { padding: 6px 10px; color: var(--text-muted); text-decoration: none; } .entry-back:hover { text-decoration: underline; color: var(--primary); } .entry-year { margin-left: auto; color: var(--text-muted); font-size: var(--typography-size-s); } /* ============================================================ * Stamp FAB (floating action button, bottom-right) * Trigger for the bottom sheet stamp picker. * ============================================================ */ .stamp-fab { position: fixed; right: 16px; /* Stay clear of the bottom-nav (approx 66-80px incl. safe-area) with an additional 40px visual breathing space, so the FAB is never tucked behind the nav on iOS Safari. */ bottom: calc(112px + env(safe-area-inset-bottom, 0px)); z-index: 60; /* above .bottom-nav (z:10) and above stacking siblings */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 68px; height: 68px; border-radius: 50%; border: none; background: var(--primary); color: var(--ui-button-text, #fff); font-weight: var(--typography-weight-medium); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 50%, transparent), 0 2px 6px rgba(0,0,0,0.15); cursor: pointer; transition: transform 160ms var(--motion-ease-out), box-shadow 160ms var(--motion-ease-out); } .stamp-fab:hover { transform: translateY(-2px) scale(1.03); } .stamp-fab:active { transform: scale(0.96); } .stamp-fab-icon { font-size: 22px; line-height: 1; } .stamp-fab-label { font-size: 11px; letter-spacing: 0.02em; line-height: 1; } .stamp-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px; background: #ff5a5f; color: white; font-size: 12px; font-weight: var(--typography-weight-bold); display: none; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); border: 2px solid var(--bg, #fff); } .stamp-fab.has-count .stamp-fab-badge { display: flex; } body.sheet-open .stamp-fab { opacity: 0; pointer-events: none; transform: scale(0.9); transition: opacity 200ms var(--motion-ease-out), transform 200ms var(--motion-ease-out); } @keyframes fab-pulse { 0%, 100% { box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 50%, transparent), 0 2px 6px rgba(0,0,0,0.15); } 50% { box-shadow: 0 8px 28px color-mix(in srgb, var(--primary) 70%, transparent), 0 2px 6px rgba(0,0,0,0.15); } } #stampFab:not(.has-count) { animation: fab-pulse 2.4s ease-in-out infinite; } /* Save FAB — sits above the stamp FAB in the same right-edge column, same size (68x68 round). Visually distinguished by a success-tint background so save vs stamp are clearly different actions. */ .stamp-fab.save-fab { bottom: calc(192px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--primary) 82%, #8edc8e); box-shadow: 0 8px 20px color-mix(in srgb, #8edc8e 40%, transparent), 0 2px 6px rgba(0,0,0,0.15); } .stamp-fab.save-fab:hover { background: color-mix(in srgb, var(--primary) 72%, #8edc8e); } .stamp-fab.save-fab.saved { background: #8edc8e; color: #24552a; } .stamp-fab.save-fab:disabled { opacity: 0.6; cursor: wait; } /* When sheet is open, hide save FAB too (same as stamp FAB). */ body.sheet-open .stamp-fab.save-fab { opacity: 0; pointer-events: none; transform: scale(0.9); } /* ============================================================ * Stamp bottom sheet (slides up from bottom) * ============================================================ */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.32); opacity: 0; pointer-events: none; z-index: 40; transition: opacity 260ms var(--motion-ease-out); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sheet-backdrop.open { opacity: 1; pointer-events: auto; } .stamp-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--ui-card-bg, #fff); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,0.18); transform: translateY(100%); transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1); max-height: 82vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); max-width: 640px; margin: 0 auto; } .stamp-sheet.open { transform: translateY(0); } .sheet-handle { padding: 8px 0 2px; display: flex; justify-content: center; cursor: grab; touch-action: none; } .sheet-handle span { display: block; width: 40px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 40%, transparent); } .sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 20px 8px; } .sheet-title { font-size: var(--typography-size-m); font-weight: var(--typography-weight-medium); color: var(--text); } .sheet-close { width: 34px; height: 34px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .sheet-close:hover { background: color-mix(in srgb, var(--text-muted) 20%, transparent); } /* Sticky "selected stamps preview" row inside sheet */ .sheet-selected { padding: 10px 16px 10px; border-bottom: 1px solid var(--ui-border, rgba(0,0,0,0.06)); background: color-mix(in srgb, var(--primary) 6%, var(--ui-card-bg)); min-height: 60px; display: flex; flex-direction: column; justify-content: center; } .sheet-selected-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 8px 0; font-family: 'Klee One', cursive; } .sheet-selected-count { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.04em; } .sheet-selected-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; } .sheet-selected-list::-webkit-scrollbar { height: 4px; } .sheet-selected-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 30%, transparent); border-radius: 2px; } .sheet-selected-item { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; background: var(--ui-card-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); padding: 4px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; animation: selected-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1); } .sheet-selected-item img { max-width: 100%; max-height: 100%; object-fit: contain; } .sheet-selected-item-fallback { font-size: 9px; color: var(--text-muted); } .sheet-selected-x { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #ff5a5f; color: white; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 120ms; } .sheet-selected-item:hover .sheet-selected-x { opacity: 1; } @keyframes selected-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } } /* Category tabs inside sheet */ .sheet-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 10px 16px 8px; scrollbar-width: none; } .sheet-tabs::-webkit-scrollbar { display: none; } .sheet-tab { flex: 0 0 auto; padding: 6px 14px; border: none; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text-muted) 10%, transparent); color: var(--text); font-size: 13px; cursor: pointer; white-space: nowrap; transition: background 120ms, color 120ms; } .sheet-tab.active { background: var(--primary); color: var(--ui-button-text, white); font-weight: var(--typography-weight-medium); } /* Scrollable grid inside sheet */ .sheet-grid-wrap { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; } .sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; } .sheet-stamp-item { border: none; background: transparent; padding: 6px 2px; cursor: pointer; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 140ms var(--motion-ease-out); } .sheet-stamp-img { width: 100%; aspect-ratio: 1; border-radius: 12px; background: color-mix(in srgb, var(--bg) 80%, white); display: flex; align-items: center; justify-content: center; padding: 6px; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 140ms, background 140ms, transform 140ms var(--motion-ease-out); } .sheet-stamp-img img { max-width: 100%; max-height: 100%; object-fit: contain; } .sheet-stamp-placeholder { font-size: 10px; color: #999; } .sheet-stamp-label { font-size: 11px; color: var(--text-muted); line-height: 1.2; text-align: center; word-break: keep-all; } .sheet-stamp-item:hover .sheet-stamp-img { transform: translateY(-2px); background: white; box-shadow: 0 3px 8px rgba(0,0,0,0.08); } .sheet-stamp-item.selected .sheet-stamp-img { background: color-mix(in srgb, var(--primary) 18%, white); box-shadow: 0 0 0 2px var(--primary), 0 3px 8px color-mix(in srgb, var(--primary) 25%, transparent); } .sheet-stamp-item.selected .sheet-stamp-label { color: var(--primary); font-weight: var(--typography-weight-medium); } @keyframes just-picked-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 70% { transform: scale(0.94); } 100% { transform: scale(1); } } .sheet-stamp-item.just-picked .sheet-stamp-img { animation: just-picked-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* Footer inside sheet */ .sheet-footer { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border, rgba(0,0,0,0.06)); background: var(--ui-card-bg); } .sheet-done { background: var(--primary); color: var(--ui-button-text, white); } body.sheet-open { overflow: hidden; } /* ============================================================ * Save celebration (fires on successful save) * ============================================================ */ .save-celebration { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 80; opacity: 0; transition: opacity 200ms var(--motion-ease-out); } .save-celebration.show { opacity: 1; animation: celebration-fade 1400ms var(--motion-ease-out); } .save-celebration img { max-width: 62vw; max-height: 52vh; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.25)); animation: celebration-pop 1200ms cubic-bezier(0.34, 1.56, 0.64, 1); } .save-celebration-fallback { font-size: 120px; animation: celebration-pop 1200ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes celebration-pop { 0% { transform: scale(0.4) rotate(-6deg); opacity: 0; } 30% { transform: scale(1.08) rotate(2deg); opacity: 1; } 60% { transform: scale(0.96) rotate(-1deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } } @keyframes celebration-fade { 0% { opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } } /* ============================================================ * Milestone modal (fires on reaching 1/7/30/100/365 entries) * ============================================================ */ .milestone-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; opacity: 0; transition: opacity 320ms var(--motion-ease-out); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .milestone-modal.show { opacity: 1; } .milestone-card { background: var(--ui-card-bg, #fff); border-radius: var(--radius-l); padding: 28px 24px 24px; max-width: 400px; width: 100%; text-align: center; transform: translateY(24px) scale(0.94); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 24px 60px rgba(0,0,0,0.35); } .milestone-modal.show .milestone-card { transform: translateY(0) scale(1); } .milestone-img { width: 220px; max-width: 72vw; height: auto; margin: 0 auto 14px; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12)); } .milestone-title { font-family: var(--typography-family-display, var(--typography-family-ja)); font-size: var(--typography-size-l); font-weight: var(--typography-weight-bold); color: var(--text); margin-bottom: 10px; line-height: 1.3; } .milestone-body { color: var(--text-muted); font-size: var(--typography-size-s); line-height: 1.7; margin-bottom: 20px; } .milestone-close-btn { min-width: 160px; } /* ============================================================ * Legacy .stamp-picker container (kept for backward compat, * not used by new entry.js but may be referenced elsewhere). * ============================================================ */ .stamp-picker { background: var(--ui-card-bg); border-radius: var(--radius-l) var(--radius-l) 0 0; margin: var(--spacing-m) calc(-1 * var(--spacing-m)) 0; padding: var(--spacing-m); box-shadow: 0 -2px 12px rgba(0,0,0,0.06); border-top: 1px solid var(--ui-border, rgba(0,0,0,0.06)); } .stamp-picker-title { font-size: 13px; color: var(--text-muted); margin-bottom: var(--spacing-s); padding-left: 2px; } .notebook .stamp-grid { gap: 12px; } .notebook .stamp-item { background: transparent; border: none; padding: 6px 4px; border-radius: var(--radius-m); cursor: pointer; color: inherit; font: inherit; } .notebook .stamp-item .stamp-img-wrap { background: rgba(255,255,255,0.55); border-radius: 12px; padding: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7); transition: transform 180ms var(--motion-ease-standard), box-shadow 180ms var(--motion-ease-standard); } .notebook .stamp-item:hover .stamp-img-wrap { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.12); } .notebook .stamp-item:active .stamp-img-wrap { transform: scale(0.94); } .notebook .stamp-item.selected .stamp-img-wrap { background: color-mix(in srgb, var(--primary) 20%, white); box-shadow: 0 0 0 2px var(--primary), 0 4px 10px rgba(0,0,0,0.12); } .notebook .stamp-item.selected .stamp-label { color: var(--primary); font-weight: var(--typography-weight-medium); } /* Category tabs inside notebook: minimal tabs */ .notebook .stamp-category-tabs { border-bottom: 1px solid var(--ui-border, rgba(0,0,0,0.1)); padding-bottom: 4px; margin-bottom: var(--spacing-m); } .notebook .stamp-tab { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: var(--spacing-xs) var(--spacing-s); color: var(--text-muted); } .notebook .stamp-tab.active { background: transparent; color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--typography-weight-medium); } /* Selected stamps summary as pill line */ .notebook .pill-row { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--spacing-xs) 0; } .notebook .pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: color-mix(in srgb, var(--primary) 15%, white); color: var(--text); border-radius: var(--radius-pill); font-size: var(--typography-size-xs); } /* Save button: inline at bottom of notebook (mobile-friendly; no longer sticky to avoid overlapping the stamp FAB at bottom-right) */ .notebook-save { display: flex; justify-content: center; margin: var(--spacing-l) 0 var(--spacing-s); } .notebook-save button { min-width: 220px; padding: 14px 40px; border-radius: var(--radius-pill); background: var(--primary); color: var(--ui-button-text); border: none; font-size: var(--typography-size-m); font-weight: var(--typography-weight-medium); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 40%, transparent), 0 2px 4px rgba(0,0,0,0.08); cursor: pointer; transition: transform 140ms var(--motion-ease-out), box-shadow 140ms var(--motion-ease-out); } .notebook-save button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 50%, transparent); } .notebook-save button:active { transform: scale(0.97); } .notebook-save button.saved { background: color-mix(in srgb, var(--primary) 70%, #8edc8e); } /* Notebook home shelf (多数ノート一覧イメージ) */ .notebook-shelf { display: grid; grid-template-columns: 1fr; gap: var(--spacing-m); } .notebook-preview { background: var(--ui-card-bg); border: 1px solid var(--ui-border, rgba(0,0,0,0.08)); border-radius: var(--radius-l); padding: var(--spacing-m) var(--spacing-l); box-shadow: var(--shadow-card); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: transform var(--motion-duration-quick); } .notebook-preview:hover { transform: translateY(-2px); } .notebook-preview .prev-date { font-weight: var(--typography-weight-bold); font-size: var(--typography-size-m); } .notebook-preview .prev-hint { color: var(--text-muted); font-size: var(--typography-size-s); } /* -------- button -------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-s) var(--spacing-l); border: none; border-radius: var(--radius-pill); background: var(--ui-button-bg, var(--primary)); color: var(--ui-button-text, #fff); cursor: pointer; font-weight: var(--typography-weight-medium); transition: background var(--motion-duration-quick) var(--motion-ease-standard), transform var(--motion-duration-instant); } .btn:hover { background: var(--ui-button-bg-hover, var(--primary)); } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-block { width: 100%; } .btn-ghost { background: transparent; color: var(--ui-link); border: 1px solid var(--ui-border, var(--line)); } .btn-ghost:hover { background: var(--bg-soft); } .btn-sso { background: #fff; color: #2a2a2a; border: 1px solid #e0e0e0; gap: var(--spacing-s); } .btn-sso:hover { background: #fafafa; } /* -------- form -------- */ .form-group { margin-bottom: var(--spacing-m); } .form-label { display: block; font-size: var(--typography-size-s); color: var(--text-muted); margin-bottom: var(--spacing-xs); } .form-input, .form-textarea { width: 100%; padding: 10px 14px; min-height: 44px; /* consistent height across types */ box-sizing: border-box; border: 1px solid var(--ui-input-border, #ccc); border-radius: var(--radius-s); background: var(--ui-input-bg, #fff); color: var(--text); font-size: 16px; /* prevent iOS auto-zoom on focus */ line-height: 1.3; text-align: left; -webkit-appearance: none; /* strip iOS native chrome */ appearance: none; transition: border-color var(--motion-duration-quick); } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } /* Select: restore a custom caret (since appearance:none strips the native arrow) */ select.form-input { padding-right: 36px; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' stroke='%238C5F6F' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; } /* Time / date inputs: iOS centers the value natively even after appearance:none. Force left-align + consistent sizing so they match text inputs. */ .form-input[type="time"], .form-input[type="date"], .form-input[type="datetime-local"] { text-align: left; font-family: inherit; } /* iOS Safari specifically targets these pseudo-elements for time/date */ .form-input[type="time"]::-webkit-date-and-time-value, .form-input[type="date"]::-webkit-date-and-time-value { text-align: left; } .form-input[type="time"]::-webkit-calendar-picker-indicator, .form-input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; opacity: 0.6; } .form-textarea { resize: vertical; min-height: 120px; } .form-error { color: var(--danger); font-size: var(--typography-size-s); margin-top: var(--spacing-xs); } .form-success { color: #1e7a3e; background: #e8f6ec; border: 1px solid #b7e1c2; border-radius: 6px; padding: 10px 12px; font-size: var(--typography-size-s); margin-top: var(--spacing-sm); line-height: 1.6; } .auth-forgot-link { text-align: center; margin-top: var(--spacing-md); } .auth-forgot-link a { /* Tap targets must be at least 44pt per Apple HIG. The link sits between the password field and the SSO buttons, so giving it generous padding prevents finger-fat-mis-taps on the wrong control. */ display: inline-block; padding: 12px 24px; color: var(--primary, #284b65); text-decoration: underline; font-size: var(--typography-size-m, 15px); min-height: 44px; line-height: 1.4; } /* Checkbox row: align top so a wrapping description stays indented under the box */ .form-checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; } .form-checkbox input[type="checkbox"] { flex: 0 0 auto; margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--primary); } .form-checkbox > span { flex: 1 1 auto; color: var(--text-muted); font-size: var(--typography-size-s); line-height: 1.65; } /* -------- auth page -------- */ .auth-wrap { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--spacing-l); background: var(--bg); position: relative; isolation: isolate; } .auth-wrap.has-auth-bg::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--auth-bg-url, none); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.82; } .auth-wrap.has-auth-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 60%, color-mix(in srgb, var(--bg) 80%, transparent) 100% ); } .auth-wrap.has-auth-bg .auth-card { background: color-mix(in srgb, var(--ui-card-bg, #fff) 94%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .auth-card { max-width: 400px; width: 100%; background: var(--ui-card-bg, #fff); border-radius: var(--radius-l); padding: var(--spacing-xl); box-shadow: var(--shadow-card); } .auth-title { margin: 0 0 var(--spacing-s); font-size: var(--typography-size-xxl); font-weight: var(--typography-weight-bold); color: var(--text); text-align: center; font-family: var(--typography-family-display, var(--typography-family-ja)); letter-spacing: 0.08em; } .auth-title-sub { font-size: var(--typography-size-l); letter-spacing: 0.02em; margin-top: 12px; } .auth-tagline { text-align: center; color: var(--text-muted); font-family: 'Klee One', cursive; font-size: 15px; letter-spacing: 0.04em; margin: 0 0 28px; } /* namaeduke logo (landscape wordmark + tagline image) */ .auth-logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 4px auto 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06)); } .auth-logo-small { max-width: 200px; margin: 0 auto 6px; opacity: 0.9; } /* dark themes: keep logo readable (source is dark brown, works best on light bg). Invert on dark themes only if the logo feels lost. */ [data-theme="yozora"] .auth-logo { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)) brightness(0) invert(0.85) sepia(0.15); } /* Welcome card (first visit emphasizes registration) */ .auth-card-welcome { padding: 32px 24px 24px; } .auth-register-cta { /* Use an explicit gradient + forced color so the button stands out on every theme. Plain .btn inherits --ui-button-text which on some themes reads close to the --primary button bg (low contrast). */ background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #8B5A7F) 0%, color-mix(in srgb, var(--primary) 60%, #C37FA5) 100%); color: #ffffff !important; font-size: 16px; font-weight: var(--typography-weight-bold); padding: 16px 24px; letter-spacing: 0.05em; text-shadow: 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 50%, transparent), 0 2px 4px rgba(0,0,0,0.08); transition: transform 160ms var(--motion-ease-out), box-shadow 160ms var(--motion-ease-out); text-decoration: none; margin-bottom: 10px; } .auth-register-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 60%, transparent); text-decoration: none; } /* Dark themes (yozora): use --ui-button-text (dark) on the lighter gradient */ [data-theme="yozora"] .auth-register-cta { color: var(--ui-button-text) !important; text-shadow: none; } .auth-register-sub { text-align: center; color: var(--text-muted); font-size: 12px; font-family: 'Klee One', cursive; margin-bottom: 22px; } /* Collapsed login section for returning users */ .auth-login-toggle { border-top: 1px dashed var(--ui-border, rgba(0,0,0,0.12)); padding-top: 16px; } .auth-login-toggle summary { list-style: none; cursor: pointer; text-align: center; font-size: 13px; color: var(--text-muted); padding: 6px 0; position: relative; outline: none; user-select: none; } .auth-login-toggle summary::-webkit-details-marker { display: none; } .auth-login-toggle summary::after { content: ' ▾'; color: var(--text-muted); font-size: 10px; transition: transform 180ms var(--motion-ease-out); display: inline-block; } .auth-login-toggle[open] summary::after { transform: rotate(180deg); } .auth-login-toggle summary:hover { color: var(--primary); } .auth-login-form { padding-top: 12px; animation: auth-login-slide 260ms var(--motion-ease-out); } @keyframes auth-login-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Register page value-proposition card */ .auth-feature-card { background: color-mix(in srgb, var(--primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius: var(--radius-l); padding: 16px 16px 14px; margin-bottom: 20px; } .auth-feature-title { display: flex; align-items: center; gap: 8px; font-family: var(--typography-family-display, var(--typography-family-ja)); font-size: 14px; font-weight: var(--typography-weight-bold); color: var(--text); margin-bottom: 10px; } .auth-feature-icon { font-size: 18px; line-height: 1; } .auth-feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .auth-feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.65; color: var(--text); font-family: 'Klee One', cursive; } .auth-feature-list .feature-bullet { flex: 0 0 auto; font-size: 16px; line-height: 1.3; } /* Home analysis popup (shown when prev month is eligible but not yet analyzed) */ .analysis-popup { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 300ms var(--motion-ease-out); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .analysis-popup.show { opacity: 1; } .analysis-popup-card { background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--primary) 20%, transparent) 0%, transparent 55%), var(--ui-card-bg); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: var(--radius-l); padding: 28px 22px 22px; width: 100%; max-width: 420px; text-align: center; transform: translateY(22px) scale(0.94); transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 28px 68px rgba(0,0,0,0.4); box-sizing: border-box; } .analysis-popup.show .analysis-popup-card { transform: translateY(0) scale(1); } .analysis-popup-img { width: 120px; height: 120px; margin: 0 auto 12px; display: block; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--primary) 14%, var(--ui-card-bg)); animation: popup-breathe 3s ease-in-out infinite; } @keyframes popup-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } .analysis-popup-eyebrow { font-size: 11px; color: var(--primary); letter-spacing: 0.08em; margin-bottom: 6px; font-weight: var(--typography-weight-medium); } .analysis-popup-title { font-family: var(--typography-family-display, var(--typography-family-ja)); font-size: clamp(20px, 5.4vw, 26px); font-weight: var(--typography-weight-bold); color: var(--text); line-height: 1.4; margin: 0 0 14px; } .analysis-popup-body { font-size: 13px; color: var(--text-muted); line-height: 1.8; margin: 0 0 22px; font-family: 'Klee One', cursive; } .analysis-popup-actions { display: flex; gap: 10px; justify-content: center; } .analysis-popup-actions .btn-ghost { flex: 1 1 auto; min-width: 0; } .analysis-popup-cta { flex: 2 1 auto; min-width: 0; padding: 12px 18px; font-weight: var(--typography-weight-bold); text-decoration: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 40%, transparent); } .analysis-popup-cta:hover { text-decoration: none; } .auth-sub { text-align: center; color: var(--text-muted); margin-bottom: var(--spacing-l); } .auth-divider { display: flex; align-items: center; margin: var(--spacing-l) 0; color: var(--text-muted); font-size: var(--typography-size-s); } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--ui-border, #e0e0e0); margin: 0 var(--spacing-s); } .auth-sso { display: flex; flex-direction: column; gap: var(--spacing-s); } .auth-sso-top { margin-bottom: 6px; } .auth-sso .btn-sso { padding: 13px 18px; font-size: 15px; font-weight: var(--typography-weight-medium); border: 1px solid #E0DFE0; background: #ffffff; color: #222; transition: background 140ms, border-color 140ms, transform 120ms; } .auth-sso .btn-sso:hover { background: #fafafa; border-color: #B0B0B0; } .auth-sso .btn-sso:active { transform: scale(0.98); } .auth-sso .btn-sso[data-sso="apple"] { background: #000; color: #fff; border-color: #000; } .auth-sso .btn-sso[data-sso="apple"]:hover { background: #1a1a1a; border-color: #1a1a1a; } /* Onboarding screen — first-run preferred-name capture */ .onboarding-wrap { min-height: 100vh; min-height: 100dvh; } .onboarding-card { max-width: 420px; padding: 40px 28px 32px; text-align: center; } .onboarding-title { font-family: var(--typography-family-display, var(--typography-family-ja)); font-size: clamp(22px, 6vw, 28px); font-weight: var(--typography-weight-bold); color: var(--text); margin: 12px 0 10px; letter-spacing: 0.04em; } .onboarding-lead { font-family: 'Klee One', cursive; color: var(--text-muted); font-size: 14px; line-height: 1.8; margin: 0 0 24px; } .onboarding-form { text-align: left; } .onboarding-input { font-size: 18px !important; padding: 16px !important; text-align: center; font-family: 'Klee One', 'Zen Maru Gothic', sans-serif; } .onboarding-hint { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 10px; line-height: 1.6; font-family: 'Klee One', cursive; } .onboarding-form .btn-block { margin-top: 24px; font-size: 16px; padding: 16px 24px; } .auth-footer { text-align: center; margin-top: var(--spacing-l); font-size: var(--typography-size-s); color: var(--text-muted); } /* -------- bottom nav -------- * position: fixed + GPU promotion. iOS Safari occasionally drops fixed * positioning when the URL bar resizes during scroll — promoting the * element to its own compositing layer with translateZ(0) forces the * browser to keep it pinned to the visual viewport. Also higher z-index * so modal overlays that we explicitly want on top use z-index >= 200. */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ui-card-bg, #fff); border-top: 1px solid var(--ui-border, #eee); display: grid; grid-template-columns: repeat(5, 1fr); padding: var(--spacing-s) 0 calc(var(--spacing-s) + env(safe-area-inset-bottom)); z-index: 100; /* GPU-promote to stabilize position:fixed across iOS Safari URL-bar shifts */ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--typography-size-xs); color: var(--text-muted); padding: 4px 4px; min-width: 0; text-align: center; } .bottom-nav a span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bottom-nav a.active { color: var(--primary); } .bottom-nav svg { width: 24px; height: 24px; } /* ============================================================ * iPad / large-tablet layout: keep the phone-width UI centered. * * namaeduke is designed phone-first (≤430pt). When Apple's App Review * runs the app on an iPad Air 11" (M3) in iPhone-compatibility mode the * WKWebView gets the full iPad width (820pt), the phone-shaped content * stretches awkwardly to the left, and the bottom-fixed save / FAB * buttons get pushed against the far right where their labels look like * they are clipped off — which is exactly the Guideline 4 rejection we * received ("the majority of button in 今日 was cut off"). * * Strategy: above 600px viewport width, clamp the body to phone width * (430px) and center it on screen. Every position:fixed bottom UI * element (bottom-nav, stamp FAB, ambient background, modals, toast, * cancel-instructions overlay, reminder opt-in, billing manage button, * etc.) is re-anchored to that centered 430-wide column instead of the * viewport edges, so nothing looks pushed against the screen edge. * Below 600px (every iPhone) the rules don't apply — the existing phone * layout is untouched. * ============================================================ */ @media (min-width: 600px) { /* Centered phone-shaped column on a neutral wash, so the app looks intentional instead of "stretched" when run on iPad. */ html { background: #ececec; } body { max-width: 430px; margin: 0 auto; background: var(--bg, #fff); min-height: 100vh; box-shadow: 0 0 24px rgba(0, 0, 0, 0.1); } /* The ambient background image used on the entry screen is normally anchored to the viewport via position:fixed; inset:0. Re-clamp it to the centered column so it doesn't bleed into the gray wash. */ .entry-ambient-bg { left: 50%; right: auto; transform: translateX(-50%); width: 100%; max-width: 430px; } /* Bottom tab bar: pin to the centered column, not the viewport edges. */ .bottom-nav { max-width: 430px; left: 50%; right: auto; transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); } /* Stamp / save FAB: align its right edge to the centered column right edge, not the iPad's far right. The expression below resolves to "16px inside the right edge of the centered 430-wide column". */ .stamp-fab { right: calc(max(0px, (100vw - 430px) / 2) + 16px); } /* Toast notification (centered top of viewport) needs the same horizontal centering — already 50%-based, no change required. */ /* First-run reminder opt-in modal and other full-screen overlays (tour overlay, billing cancel modal) already use flex centering on position:fixed inset:0, so they look correct on iPad — no change. */ } /* -------- stamp grid -------- */ .stamp-category-tabs { display: flex; gap: var(--spacing-xs); overflow-x: auto; padding: var(--spacing-s) 0; margin-bottom: var(--spacing-m); } .stamp-tab { flex: 0 0 auto; padding: var(--spacing-xs) var(--spacing-m); border: 1px solid var(--ui-border, #e0e0e0); border-radius: var(--radius-pill); background: var(--ui-card-bg); color: var(--text-muted); cursor: pointer; white-space: nowrap; } .stamp-tab.active { background: var(--primary); color: var(--ui-button-text); border-color: var(--primary); } .stamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--spacing-s); } .stamp-item { border: 1px solid transparent; border-radius: var(--radius-m); background: var(--bg-soft); cursor: pointer; padding: var(--spacing-xs); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; transition: transform var(--motion-duration-quick), background var(--motion-duration-quick); } .stamp-item .stamp-img-wrap { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .stamp-item img { max-width: 100%; max-height: 100%; object-fit: contain; } .stamp-item .stamp-label { font-size: 11px; line-height: 1.2; color: var(--text-muted); text-align: center; word-break: keep-all; } .stamp-item.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, var(--ui-card-bg)); transform: scale(1.03); } .stamp-item.selected .stamp-label { color: var(--text); font-weight: var(--typography-weight-medium); } .stamp-item:active { transform: scale(0.95); } /* -------- providers list on profile -------- */ .card-title { font-size: 13px; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 10px; font-weight: var(--typography-weight-medium); } .providers-box { display: grid; gap: 12px; } .providers-empty { color: var(--text-muted); font-size: 13px; } .provider-row { display: flex; align-items: center; gap: 10px; padding: 12px 12px; background: color-mix(in srgb, var(--text-muted) 5%, var(--ui-card-bg)); border-radius: 12px; border: 1px solid var(--ui-border, rgba(0,0,0,0.06)); transition: background 160ms; min-width: 0; overflow: hidden; } .provider-row.is-linked { background: color-mix(in srgb, var(--primary) 10%, var(--ui-card-bg)); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } .provider-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--ui-card-bg); display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid var(--ui-border, rgba(0,0,0,0.06)); } .provider-icon.google-icon { background: #fff; color: #4285F4; font-weight: 700; font-family: Arial, sans-serif; letter-spacing: -0.03em; } .provider-icon.apple-icon { background: #000; color: #fff; font-weight: 600; } .provider-info { flex: 1 1 auto; min-width: 0; } .provider-name { font-size: 14px; font-weight: var(--typography-weight-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .provider-sub { font-size: 11px; color: var(--text-muted); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .provider-action { flex: 0 0 auto; } .link-btn { border: 1px solid var(--ui-border, rgba(0,0,0,0.12)); background: transparent; color: var(--text); padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; cursor: pointer; transition: background 140ms; white-space: nowrap; } .link-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--text-muted) 10%, transparent); } .link-btn:disabled { opacity: 0.5; cursor: not-allowed; } .link-btn-primary { background: var(--primary); color: var(--ui-button-text, #fff); border-color: var(--primary); } .link-btn-primary:hover:not(:disabled) { filter: brightness(1.05); background: var(--primary); } .link-btn-danger { border-color: #d9a8a8; color: #b84a4a; } .link-btn-danger:hover:not(:disabled) { background: rgba(184, 74, 74, 0.08); } /* Account deletion section — visually de-emphasised so users don't tap it by accident, but findable for those who really need it. */ .danger-zone { border: 1px solid #e8d4d4; } .danger-zone-title { color: #b84a4a; } .danger-zone-desc { color: var(--text-muted); font-size: var(--typography-size-s); line-height: 1.6; margin: 0 0 var(--spacing-m); } .danger-zone-desc strong { color: #b84a4a; font-weight: 600; } .btn-danger { background: #fff; color: #b84a4a; border: 1px solid #d9a8a8; } .btn-danger:hover:not(:disabled) { background: rgba(184, 74, 74, 0.08); } .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } /* "Restore purchases" — Apple/Google audit requirement. Visually quieter than the subscribe CTAs (text-only link-like button). */ .billing-restore-btn { display: block; width: 100%; margin-top: var(--spacing-m); padding: var(--spacing-s); background: transparent; border: none; color: var(--text-muted); font-size: var(--typography-size-s); text-decoration: underline; cursor: pointer; } .billing-restore-btn:hover:not(:disabled) { color: var(--text); } .billing-restore-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* -------- profile portrait -------- */ .profile-portrait { display: flex; align-items: center; gap: var(--spacing-m); padding: var(--spacing-m); margin-bottom: var(--spacing-m); background: var(--ui-card-bg); border-radius: var(--radius-l); box-shadow: var(--shadow-card); border: 1px solid var(--ui-border, rgba(0,0,0,0.04)); } .profile-portrait img { flex: 0 0 auto; width: 96px; height: 96px; border-radius: var(--radius-m); object-fit: cover; object-position: top center; background: color-mix(in srgb, var(--primary) 10%, var(--ui-card-bg)); } .profile-portrait-meta { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; } .profile-portrait-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; } .profile-portrait-theme { font-size: var(--typography-size-m); font-weight: var(--typography-weight-bold); color: var(--text); } .profile-portrait-change { font-size: var(--typography-size-s); color: var(--primary); align-self: flex-start; margin-top: 4px; } /* -------- theme picker -------- */ .theme-list { display: grid; gap: var(--spacing-m); grid-template-columns: 1fr 1fr; } .theme-card { aspect-ratio: 3 / 4; border-radius: var(--radius-l); overflow: hidden; position: relative; cursor: pointer; box-shadow: var(--shadow-card); } .theme-card .theme-label { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--spacing-s) var(--spacing-m); background: linear-gradient(transparent, rgba(0,0,0,.4)); color: white; font-weight: var(--typography-weight-medium); } .theme-card.active { outline: 3px solid var(--primary); } .theme-card.locked::after { content: '🔒'; position: absolute; top: var(--spacing-s); right: var(--spacing-s); } /* ============================================================ * Analysis banner on the home screen (3 states) * ============================================================ */ .analysis-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-l); margin: 0 0 var(--spacing-l); text-decoration: none; color: inherit; transition: transform var(--motion-duration-quick), box-shadow var(--motion-duration-quick); } .analysis-banner.cta { background: linear-gradient(135deg, var(--secondary, var(--primary)) 0%, var(--primary) 100%); color: var(--ui-button-text, white); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent); } .analysis-banner.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 45%, transparent); } .analysis-banner.cta .analysis-banner-sub { color: rgba(255,255,255,0.85); } .analysis-banner.done { background: var(--ui-card-bg); border: 1px solid var(--ui-border, rgba(0,0,0,0.06)); box-shadow: var(--shadow-card); } .analysis-banner.done:hover { transform: translateY(-1px); } .analysis-banner.blocked { background: color-mix(in srgb, var(--text-muted) 8%, var(--ui-card-bg)); border: 1px dashed var(--ui-border, rgba(0,0,0,0.1)); cursor: default; } .analysis-banner-icon { font-size: 30px; line-height: 1; flex: 0 0 auto; } .analysis-banner-body { flex: 1 1 auto; min-width: 0; } .analysis-banner-title { font-size: var(--typography-size-m); font-weight: var(--typography-weight-medium); } .analysis-banner-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; } .analysis-banner-arrow { font-size: 22px; opacity: 0.85; flex: 0 0 auto; } [data-theme="yozora"] .analysis-banner.cta .analysis-banner-title, [data-theme="yozora"] .analysis-banner.cta .analysis-banner-arrow { color: var(--ui-button-text); } [data-theme="yozora"] .analysis-banner.cta .analysis-banner-sub { color: rgba(27,40,56,0.8); } /* ============================================================ * Analyzing... loading sequence (full-screen) * ============================================================ */ .analyzing-screen { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .analyzing-card { text-align: center; max-width: 420px; width: 100%; } .analyzing-img { width: 200px; height: 200px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; } .analyzing-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.10)); } .analyzing-img.pulse img { animation: ana-step-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1); } .analyzing-fallback { font-size: 96px; } @keyframes ana-step-pop { 0% { transform: scale(0.6) rotate(-4deg); opacity: 0; } 50% { transform: scale(1.06) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } } .analyzing-msg { font-family: 'Klee One', cursive; font-size: var(--typography-size-l); color: var(--text); min-height: 30px; margin-bottom: 18px; animation: ana-msg-fade 700ms var(--motion-ease-out); } @keyframes ana-msg-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .analyzing-progress { height: 4px; background: color-mix(in srgb, var(--text-muted) 18%, transparent); border-radius: 2px; overflow: hidden; margin: 0 auto 12px; max-width: 280px; } .analyzing-progress-bar { height: 100%; width: 0%; background: var(--primary); border-radius: 2px; transition: width 800ms var(--motion-ease-out); } .analyzing-sub { font-size: 12px; color: var(--text-muted); } /* ============================================================ * Analysis report screen * ============================================================ */ .analysis-screen { padding-bottom: 100px; } .analysis-head { padding: 8px 4px 16px; text-align: center; } .analysis-eyebrow { font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; } .analysis-title { font-family: var(--typography-family-display, var(--typography-family-ja)); font-size: var(--typography-size-xl); font-weight: var(--typography-weight-bold); margin: 6px 0 0; } /* Hero: character + one-phrase characterization + warm intro */ .analysis-hero { display: flex; align-items: center; gap: 16px; padding: 20px 20px 22px; margin-bottom: var(--spacing-m); border-radius: var(--radius-l); background: radial-gradient(circle at 85% 25%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 60%), var(--ui-card-bg); border: 1px solid var(--ui-border, rgba(0,0,0,0.04)); box-shadow: var(--shadow-card); } .analysis-hero-img { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--primary) 14%, var(--ui-card-bg)); display: flex; align-items: center; justify-content: center; } .analysis-hero-img img { width: 100%; height: 100%; object-fit: cover; animation: hero-breathe 3.2s ease-in-out infinite; } @keyframes hero-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } .analysis-hero-body { flex: 1 1 auto; min-width: 0; } .analysis-hero-eyebrow { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 4px; } .analysis-hero-phrase { margin: 0 0 8px; font-family: var(--typography-family-display, var(--typography-family-ja)); font-size: clamp(22px, 6vw, 28px); font-weight: var(--typography-weight-bold); color: var(--primary); letter-spacing: 0.01em; line-height: 1.3; } .analysis-hero-intro { margin: 0; font-size: 13px; line-height: 1.75; color: var(--text); font-family: 'Klee One', cursive; } /* AI (Layer 2) insights — visually distinguished from rule-based insights */ .analysis-insights.ai-insights { background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 60%), var(--ui-card-bg); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); } .ai-insights-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; font-family: 'Klee One', cursive; } .ai-insights-empty { font-size: 13px; color: var(--text-muted); padding: 8px 0; font-family: 'Klee One', cursive; } .insight-item.ai { background: color-mix(in srgb, var(--primary) 10%, var(--ui-card-bg)); border-left: 3px solid var(--primary); } /* Insights: "見つけたこと" list */ .analysis-insights .analysis-card-title { margin-bottom: 8px; } .insight-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .insight-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--primary) 6%, transparent); border-radius: 12px; border-left: 3px solid color-mix(in srgb, var(--primary) 50%, transparent); } .insight-emoji { font-size: 22px; line-height: 1; flex: 0 0 auto; } .insight-text { font-family: 'Klee One', cursive; font-size: 14px; line-height: 1.65; color: var(--text); } /* Mood dot strip */ .mood-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 2px; } .mood-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 1px rgba(0,0,0,0.08); cursor: default; transition: transform 160ms var(--motion-ease-out); } .mood-dot:hover { transform: scale(1.3); } .mood-strip-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 11px; color: var(--text-muted); } /* Accordion for detail section */ .analysis-accordion { padding: 0; overflow: hidden; } .accordion-toggle { width: 100%; border: none; background: transparent; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 14px; color: var(--text); font-weight: var(--typography-weight-medium); } .accordion-toggle:hover { background: color-mix(in srgb, var(--text-muted) 6%, transparent); } .accordion-chevron { font-size: 12px; color: var(--text-muted); transition: transform 200ms var(--motion-ease-out); } .accordion-toggle[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); } .accordion-body { padding: 4px 18px 18px; border-top: 1px solid var(--ui-border, rgba(0,0,0,0.06)); animation: accordion-slide 280ms var(--motion-ease-out); } @keyframes accordion-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .analysis-sub-title { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; font-weight: var(--typography-weight-medium); margin: 14px 0 8px; padding-top: 8px; border-top: 1px dashed var(--ui-border, rgba(0,0,0,0.06)); } .analysis-sub-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; } /* User-given name hero variant */ .analysis-hero.is-named { background: radial-gradient(circle at 85% 25%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 60%), color-mix(in srgb, var(--primary) 6%, var(--ui-card-bg)); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); } .analysis-hero-phrase.user-name { color: var(--text); font-family: 'Klee One', 'Zen Kurenaido', var(--typography-family-ja); font-size: clamp(24px, 6.4vw, 30px); position: relative; } .analysis-hero-ai-note { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; padding: 3px 10px; background: color-mix(in srgb, var(--text-muted) 12%, transparent); border-radius: var(--radius-pill); font-size: 11px; } .ai-note-label { color: var(--text-muted); } .ai-note-value { color: var(--text); font-weight: var(--typography-weight-medium); } /* Naming card (core "namaeduke" moment) */ .naming-card { padding: 22px 20px; background: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--secondary, var(--primary)) 18%, transparent) 0%, transparent 50%), var(--ui-card-bg); border: 1.5px dashed color-mix(in srgb, var(--primary) 35%, transparent); } .naming-card.named { padding: 22px 20px; text-align: center; border-style: solid; border-color: color-mix(in srgb, var(--primary) 50%, transparent); background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 60%), var(--ui-card-bg); } .naming-prompt-eyebrow { font-size: 11px; color: var(--primary); letter-spacing: 0.08em; font-weight: var(--typography-weight-medium); margin-bottom: 6px; } .naming-prompt-title { font-family: var(--typography-family-display, var(--typography-family-ja)); font-size: 16px; font-weight: var(--typography-weight-bold); color: var(--text); margin-bottom: 10px; line-height: 1.5; } .naming-prompt-body { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin: 0 0 14px; font-family: 'Klee One', cursive; } .naming-input-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; /* fall back to stacked on very narrow viewports */ } .naming-input { /* `min-width: 0` lets the flex child shrink below the placeholder's intrinsic width. Without this the row overflows the viewport on iPhone and the button floats outside the card. */ min-width: 0; flex: 1 1 160px; padding: 12px 14px; border: 1px solid var(--ui-input-border, #ccc); border-radius: var(--radius-m); background: var(--ui-input-bg, #fff); color: var(--text); font-family: 'Klee One', cursive; font-size: 16px; /* prevent iOS auto-zoom on focus */ transition: border-color 120ms, box-shadow 120ms; box-sizing: border-box; } .naming-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } .naming-save-btn { flex: 0 0 auto; padding: 12px 20px; min-width: 96px; white-space: nowrap; } .naming-hint { margin-top: 10px; font-size: 11px; color: var(--text-muted); line-height: 1.6; font-family: 'Klee One', cursive; } .naming-done-eyebrow { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; } .naming-done-name { font-family: 'Klee One', 'Zen Kurenaido', var(--typography-family-ja); font-size: clamp(22px, 6vw, 28px); font-weight: var(--typography-weight-bold); color: var(--primary); margin: 2px 0; line-height: 1.35; word-break: break-word; } .naming-done-suffix { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .naming-edit-btn { margin-top: 14px; background: transparent; border: 1px solid var(--ui-border, rgba(0,0,0,0.12)); color: var(--text-muted); padding: 6px 16px; border-radius: var(--radius-pill); font-size: 12px; cursor: pointer; } .naming-edit-btn:hover { background: color-mix(in srgb, var(--text-muted) 8%, transparent); color: var(--text); } /* Home banner — has-name variant */ .analysis-banner.done.has-name { background: color-mix(in srgb, var(--primary) 8%, var(--ui-card-bg)); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } /* Naming modal (shown right after analysis completes) */ .naming-modal { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 300ms var(--motion-ease-out); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .naming-modal.show { opacity: 1; } .naming-modal-card { background: var(--ui-card-bg, #fff); border-radius: var(--radius-l); padding: 28px 22px 20px; width: 100%; max-width: 420px; text-align: center; transform: translateY(20px) scale(0.96); transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 24px 60px rgba(0,0,0,0.35); box-sizing: border-box; } .naming-modal.show .naming-modal-card { transform: translateY(0) scale(1); } .naming-modal-img { width: 110px; height: 110px; margin: 0 auto 10px; object-fit: cover; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, var(--ui-card-bg)); } .naming-modal-eyebrow { font-size: 11px; color: var(--primary); letter-spacing: 0.08em; margin-bottom: 6px; } .naming-modal-title { font-family: var(--typography-family-display, var(--typography-family-ja)); font-size: clamp(18px, 4.8vw, 22px); font-weight: var(--typography-weight-bold); color: var(--text); line-height: 1.5; margin: 0 0 10px; } .naming-modal-optional { font-size: 12px; color: var(--text-muted); font-weight: var(--typography-weight-normal); } .naming-modal-body { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin: 0 0 18px; font-family: 'Klee One', cursive; } .naming-modal-input { width: 100%; padding: 12px 14px; border: 1px solid var(--ui-input-border, #ccc); border-radius: var(--radius-m); background: var(--ui-input-bg, #fff); color: var(--text); font-family: 'Klee One', cursive; font-size: 16px; /* prevent iOS auto-zoom */ box-sizing: border-box; margin-bottom: 16px; } .naming-modal-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } .naming-modal-actions { display: flex; gap: 8px; } .naming-modal-skip { flex: 1 1 auto; min-width: 0; } .naming-modal-submit { flex: 2 1 auto; min-width: 0; padding: 12px 20px; } .naming-modal-hint { margin-top: 14px; font-size: 11px; color: var(--text-muted); opacity: 0.85; } /* Closing */ .analysis-closing { text-align: center; padding: 20px 16px 8px; } .analysis-closing-text { font-family: 'Klee One', cursive; font-size: 13px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.7; } .analysis-card { background: var(--ui-card-bg); border: 1px solid var(--ui-border, rgba(0,0,0,0.04)); border-radius: var(--radius-l); padding: 16px 18px; margin-bottom: var(--spacing-m); box-shadow: var(--shadow-card); } .analysis-card-title { font-size: 13px; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 10px; font-weight: var(--typography-weight-medium); } .analysis-meta { font-size: 12px; color: var(--text-muted); margin-top: 8px; } .analysis-narrative-list { margin: 0; padding-left: 18px; line-height: 1.85; font-size: var(--typography-size-m); color: var(--text); } .analysis-narrative-list li { margin-bottom: 4px; } /* Stats grid */ .analysis-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; } .analysis-stats .stat { padding: 10px 4px; background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 10px; } .stat-num { font-size: 22px; font-weight: var(--typography-weight-bold); color: var(--primary); } .stat-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; } /* Heart distribution bar */ .heart-bar { display: flex; height: 28px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); margin-bottom: 8px; } .heart-bar-seg { display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,0.55); font-size: 11px; font-weight: var(--typography-weight-medium); white-space: nowrap; transition: filter 120ms; } .heart-bar-seg:hover { filter: brightness(1.05); } .heart-bar-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 11px; color: var(--text-muted); margin-top: 6px; } .legend-item { display: inline-flex; align-items: center; gap: 4px; } .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* Trend SVG */ .trend-svg { width: 100%; height: auto; display: block; } .trend-axis { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-muted); flex-direction: row-reverse; padding: 4px 4px 0; } /* Weekday bars */ .weekday-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; } .weekday-bar-cell { display: flex; flex-direction: column; align-items: center; } .weekday-bar-wrap { display: flex; align-items: flex-end; justify-content: center; width: 100%; } .weekday-bar { width: 70%; background: linear-gradient(to top, var(--primary), color-mix(in srgb, var(--primary) 60%, white)); border-radius: 4px 4px 0 0; } .weekday-bar-val { font-size: 11px; font-weight: var(--typography-weight-medium); margin-top: 4px; } .weekday-bar-label { font-size: 11px; color: var(--text); margin-top: 2px; } .weekday-bar-count { font-size: 10px; color: var(--text-muted); } /* Stamp top */ .stamp-top-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .stamp-top-cat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; } .stamp-top-list { list-style: none; margin: 0; padding: 0; } .stamp-top-list li { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; font-size: 13px; } .stamp-top-list .rank { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--typography-weight-bold); flex: 0 0 auto; } .stamp-top-label { flex: 1; } .stamp-top-count { font-size: 11px; color: var(--text-muted); } /* Activity correlation */ .corr-list { display: grid; gap: 8px; } .corr-row { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; gap: 10px; font-size: 13px; } .corr-label { color: var(--text); } .corr-bars { height: 8px; background: color-mix(in srgb, var(--text-muted) 12%, transparent); border-radius: 4px; overflow: hidden; } .corr-mini-bar { height: 100%; background: var(--primary); } .corr-row.neg .corr-mini-bar { background: color-mix(in srgb, var(--text-muted) 60%, transparent); } .corr-diff { text-align: right; font-size: 12px; font-weight: var(--typography-weight-medium); } .corr-diff.pos { color: #4a9b4a; } .corr-diff.neg { color: #c47373; } /* Highlights */ .highlight-grid { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 480px) { .highlight-grid { grid-template-columns: 1fr 1fr; } } .highlight-card { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: inherit; border: 1px solid var(--ui-border, rgba(0,0,0,0.05)); transition: transform 120ms; } .highlight-card:hover { transform: translateY(-2px); } .highlight-card.best { background: color-mix(in srgb, #F8C57E 18%, var(--ui-card-bg)); } .highlight-card.hard { background: color-mix(in srgb, #A4B7DA 18%, var(--ui-card-bg)); } .highlight-tag { font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; } .highlight-date { font-weight: var(--typography-weight-bold); font-size: 14px; margin: 2px 0; } .highlight-mood { font-size: 12px; color: var(--text-muted); } .highlight-snippet { font-size: 12px; color: var(--text); margin-top: 6px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Blocked screen */ .analysis-blocked { text-align: center; padding: 32px 18px; } .analysis-blocked .blocked-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.7; } .analysis-blocked .blocked-title { font-size: var(--typography-size-l); font-weight: var(--typography-weight-bold); color: var(--text); margin-bottom: 12px; } .analysis-blocked .blocked-body { color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; font-size: var(--typography-size-s); } /* -------- toast -------- */ .toast { position: fixed; top: var(--spacing-l); left: 50%; transform: translateX(-50%); background: #333; color: white; padding: var(--spacing-s) var(--spacing-l); border-radius: var(--radius-pill); font-size: var(--typography-size-s); z-index: 100; animation: toast-in var(--motion-duration-normal) var(--motion-ease-out); } .toast.error { background: var(--danger); } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ---- Web-access gate (plain browsers hit this; native apps bypass) ---- */ .web-gate { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--primary, #F8C8D4) 12%, var(--bg, #FFFAF4)), var(--bg, #FFFAF4)); } .web-gate-logo { width: 180px; max-width: 60vw; height: auto; margin-bottom: 28px; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.08)); } .web-gate-title { font-family: 'Klee One', cursive; font-size: 26px; font-weight: 600; color: var(--text, #2a2a2a); margin: 0 0 10px; letter-spacing: 0.02em; } .web-gate-sub { font-size: 14px; color: var(--text-muted, #7a6a62); line-height: 1.7; margin: 0 0 36px; max-width: 320px; } .web-gate-stores { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 280px; margin-bottom: 28px; } .web-gate-store { display: flex; flex-direction: column; align-items: center; padding: 14px 22px; background: var(--ui-card-bg, #fff); border: 1px solid color-mix(in srgb, var(--text-muted, #7a6a62) 20%, transparent); border-radius: 14px; color: var(--text, #2a2a2a); text-decoration: none; transition: transform 160ms, box-shadow 160ms; } .web-gate-store[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .web-gate-store:not([aria-disabled="true"]):hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .web-gate-store-label { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; } .web-gate-store-note { font-size: 11px; color: var(--text-muted, #7a6a62); margin-top: 4px; letter-spacing: 0.06em; } .web-gate-lp { font-size: 13px; color: var(--primary, #C8B4DC); text-decoration: none; padding: 8px 16px; border-radius: 999px; transition: background 140ms; } .web-gate-lp:hover { background: color-mix(in srgb, var(--primary, #C8B4DC) 12%, transparent); } /* ---- Help / FAQ page ----------------------------------------- */ .help-screen { max-width: 640px; } .help-lead { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin: 0 0 var(--spacing-l); padding: 14px 16px; background: color-mix(in srgb, var(--primary) 8%, var(--ui-card-bg, #fff)); border-radius: 12px; border-left: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); } .help-faq { display: flex; flex-direction: column; gap: var(--spacing-m); } .help-cat { background: var(--ui-card-bg, #fff); border-radius: var(--radius-m); padding: 16px 16px 8px; box-shadow: var(--shadow-card); } .help-cat-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 15%, transparent); } .help-cat-items { display: flex; flex-direction: column; } .help-item { border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 10%, transparent); } .help-item:last-child { border-bottom: none; } .help-q { cursor: pointer; padding: 12px 4px; font-size: 14px; font-weight: 500; color: var(--text); list-style: none; position: relative; padding-right: 28px; line-height: 1.6; } .help-q::-webkit-details-marker { display: none; } .help-q::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-muted); transition: transform 200ms; } .help-item[open] .help-q::after { content: '−'; } .help-a { padding: 0 4px 14px; font-size: 13px; color: var(--text-muted); line-height: 1.85; letter-spacing: 0.01em; } /* Contact section (gated by checkbox) */ .help-contact { margin-top: var(--spacing-l); padding: 20px 18px; background: var(--ui-card-bg, #fff); border-radius: var(--radius-m); border: 1px dashed color-mix(in srgb, var(--text-muted) 30%, transparent); } .help-contact-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text); } .help-contact-lead { margin: 0 0 16px; font-size: 13px; color: var(--text-muted); line-height: 1.7; } .help-confirm-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; } .help-confirm-row input { transform: scale(1.15); } .help-contact-box { margin-top: 14px; padding: 14px; background: color-mix(in srgb, var(--primary) 6%, var(--ui-card-bg, #fff)); border-radius: 10px; } .help-contact-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 4px; } .help-contact-email { display: inline-block; font-size: 16px; font-weight: 600; color: var(--primary); margin-bottom: 12px; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); } .help-contact-tip { margin: 8px 0 6px; font-size: 12px; color: var(--text-muted); line-height: 1.6; } .help-contact-tip-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-muted); line-height: 1.8; } .help-foot { display: flex; gap: 16px; justify-content: center; margin-top: var(--spacing-l); padding-bottom: 8px; } .help-foot-link { font-size: 12px; color: var(--text-muted); text-decoration: underline; } /* Profile → Help link row */ .profile-link-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; color: var(--text); text-decoration: none; font-size: 14px; } .profile-link-row:hover { text-decoration: none; } .profile-link-arrow { font-size: 18px; color: var(--text-muted); } /* ---- Billing card on profile screen ---- */ .billing-box { display: flex; flex-direction: column; gap: 14px; } .billing-status { padding: 14px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--text-muted) 14%, transparent); } .billing-status-trial { background: color-mix(in srgb, var(--primary) 7%, var(--ui-card-bg)); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } .billing-status-active { background: color-mix(in srgb, #5a9c7a 8%, var(--ui-card-bg)); border-color: color-mix(in srgb, #5a9c7a 30%, transparent); } .billing-status-free { background: color-mix(in srgb, #b89a3e 8%, var(--ui-card-bg)); border-color: color-mix(in srgb, #b89a3e 30%, transparent); } .billing-status-expired { background: color-mix(in srgb, var(--text-muted) 6%, var(--ui-card-bg)); } .billing-status-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 4px; } .billing-status-value { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .billing-status-note { font-size: 12px; color: var(--text-muted); line-height: 1.6; } .billing-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .billing-plan-btn { position: relative; padding: 14px 10px; background: var(--ui-card-bg, #fff); border: 1.5px solid color-mix(in srgb, var(--text-muted) 18%, transparent); border-radius: 12px; cursor: pointer; transition: transform 140ms, border-color 140ms, box-shadow 140ms; text-align: center; font: inherit; color: var(--text); } .billing-plan-btn:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 18%, transparent); } .billing-plan-featured { border-color: color-mix(in srgb, var(--primary) 50%, transparent); } .billing-plan-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--ui-button-text, #fff); font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.04em; } .billing-plan-name { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .billing-plan-price { font-family: 'Klee One', cursive; font-size: 18px; font-weight: 600; color: var(--text); } .billing-plan-monthly { font-size: 10px; color: var(--text-muted); margin-top: 2px; } /* Plan duration line ("期間：1か月（自動更新）" / "期間：1年（自動更新）"). Apple Guideline 3.1.2(c) requires the subscription length to be visible directly in the purchase UI, not hidden behind a tap. */ .billing-plan-period { font-size: 10px; color: var(--text-muted); margin-top: 4px; line-height: 1.3; } /* Renewal disclosure block: spelled out auto-renewal, free trial start, cancellation path, "delete subscription before deleting account" hint. Sits between the plan buttons and the legal links. */ .billing-renewal-note { margin-top: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--text-muted) 6%, transparent); border-radius: 8px; font-size: 11px; line-height: 1.6; color: var(--text-muted); } /* Functional links to Terms of Use (EULA) and Privacy Policy. Apple's subscription-flow checklist requires both to be reachable from inside the purchase UI itself (not only from a settings tab elsewhere). */ .billing-legal-links { margin-top: 10px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; line-height: 1.5; } .billing-legal-links a { color: var(--primary, #284b65); text-decoration: underline; padding: 6px 4px; min-height: 32px; display: inline-flex; align-items: center; } .billing-legal-divider { color: var(--text-muted); user-select: none; } .billing-cancel-btn { background: transparent; border: 1px solid color-mix(in srgb, #b84a4a 40%, transparent); color: #b84a4a; padding: 10px 16px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: background 140ms; font: inherit; align-self: center; } .billing-cancel-btn:hover { background: rgba(184, 74, 74, 0.08); } /* --- Reminder card (Profile) ----------------------------------------- */ .reminder-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 12px; } .reminder-toggle-label { font-size: 15px; color: var(--text-base, #2b2b2b); } /* iOS-style switch */ .reminder-switch { position: relative; display: inline-block; width: 52px; height: 30px; flex-shrink: 0; } .reminder-switch input { opacity: 0; width: 0; height: 0; } .reminder-switch-track { position: absolute; inset: 0; background: #d6d6d6; border-radius: 999px; transition: background 0.18s ease; cursor: pointer; } .reminder-switch-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: transform 0.18s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.18); } .reminder-switch input:checked + .reminder-switch-track { background: var(--primary, #284b65); } .reminder-switch input:checked + .reminder-switch-track::before { transform: translateX(22px); } .reminder-time-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.06)); transition: opacity 0.18s ease; } .reminder-time-label { font-size: 14px; color: var(--text-muted, #6b6b6b); } .reminder-time-input { width: auto; min-width: 110px; text-align: center; font-size: 15px; padding: 8px 12px; } .reminder-note { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--text-muted, #6b6b6b); } /* --- First-run reminder opt-in modal ---------------------------------- */ .reminder-prompt-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; animation: reminderFadeIn 0.18s ease-out; } @keyframes reminderFadeIn { from { opacity: 0; } to { opacity: 1; } } .reminder-prompt-card { background: var(--ui-card-bg, #fff); border-radius: 20px; padding: 28px 22px 22px; max-width: 320px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.18); animation: reminderPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes reminderPopIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } .reminder-prompt-icon { font-size: 38px; margin-bottom: 10px; line-height: 1; } .reminder-prompt-title { font-size: 17px; font-weight: 600; margin: 0 0 12px; color: var(--text-base, #2b2b2b); } .reminder-prompt-body { font-size: 13.5px; color: var(--text-muted, #6b6b6b); line-height: 1.7; margin: 0 0 22px; text-align: left; } .reminder-prompt-body strong { color: var(--text-base, #2b2b2b); } .reminder-prompt-actions { display: flex; gap: 8px; } .reminder-prompt-actions .btn { flex: 1; min-height: 44px; } /* Cancel instructions modal — reuses .tour-overlay backdrop styles */ .billing-cancel-overlay { padding: 20px; } .billing-cancel-card { background: var(--ui-card-bg, #fff); border-radius: 18px; padding: 26px 22px; max-width: 380px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.2); text-align: left; } .billing-cancel-card h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--text); text-align: center; } .billing-cancel-card ol { padding-left: 22px; margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: var(--text); } .billing-cancel-note { font-size: 12px; color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 6%, var(--ui-card-bg)); padding: 10px 12px; border-radius: 10px; margin: 0 0 18px; line-height: 1.6; } .billing-cancel-close { display: block; width: 100%; background: var(--primary); color: var(--ui-button-text, #fff); border: none; padding: 12px; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; } /* ---- Analysis history strip (past months navigation) ---- */ .analysis-history { margin: 0 0 var(--spacing-m); } .analysis-history-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 8px; padding-left: 4px; } .analysis-history-strip { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 4px 8px; margin: 0 -4px; scroll-snap-type: x proximity; scrollbar-width: thin; } .analysis-history-strip::-webkit-scrollbar { height: 4px; } .analysis-history-strip::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 25%, transparent); border-radius: 2px; } .analysis-history-pill { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; background: var(--ui-card-bg, #fff); border: 1.5px solid color-mix(in srgb, var(--text-muted) 14%, transparent); border-radius: 14px; cursor: pointer; font: inherit; color: var(--text); transition: transform 140ms, border-color 140ms, box-shadow 140ms; min-width: 78px; scroll-snap-align: center; text-align: left; } .analysis-history-pill:hover { transform: translateY(-1px); border-color: var(--primary); } .analysis-history-pill.is-active { background: color-mix(in srgb, var(--primary) 14%, var(--ui-card-bg, #fff)); border-color: var(--primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 22%, transparent); } .analysis-history-pill-month { font-family: 'Klee One', cursive; font-size: 18px; font-weight: 600; line-height: 1; } .analysis-history-pill-year { font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; } .analysis-history-pill-name { font-size: 11px; color: var(--primary); margin-top: 2px; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Analysis library / index screen ---- */ .library-screen { padding-bottom: 100px; } .library-lead { color: var(--text-muted); font-size: 13px; line-height: 1.7; margin: 0 0 var(--spacing-m); padding: 0 4px; } .library-cta { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: var(--spacing-m); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--ui-card-bg, #fff)), color-mix(in srgb, var(--primary) 8%, var(--ui-card-bg, #fff))); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 16px; text-decoration: none; color: var(--text); transition: transform 160ms, box-shadow 160ms; } .library-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 30%, transparent); text-decoration: none; } .library-cta-icon { font-size: 32px; line-height: 1; flex: 0 0 auto; } .library-cta-body { flex: 1 1 auto; min-width: 0; } .library-cta-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .library-cta-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .library-cta-arrow { font-size: 20px; color: var(--primary); flex: 0 0 auto; } .library-blocked { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: var(--spacing-m); background: color-mix(in srgb, var(--text-muted) 6%, var(--ui-card-bg, #fff)); border: 1px dashed color-mix(in srgb, var(--text-muted) 25%, transparent); border-radius: 14px; } .library-blocked-icon { font-size: 26px; flex: 0 0 auto; } .library-blocked-body { flex: 1 1 auto; } .library-blocked-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; } .library-blocked-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .library-list { display: flex; flex-direction: column; gap: 10px; } .library-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--ui-card-bg, #fff); border: 1px solid color-mix(in srgb, var(--text-muted) 14%, transparent); border-radius: 14px; text-decoration: none; color: var(--text); transition: transform 160ms, border-color 160ms, box-shadow 160ms; } .library-item:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 18%, transparent); text-decoration: none; } .library-item.has-name { background: color-mix(in srgb, var(--primary) 6%, var(--ui-card-bg, #fff)); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } .library-item-month { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: 4px 0; } .library-item-month-num { font-family: 'Klee One', cursive; font-size: 24px; font-weight: 600; color: var(--primary); line-height: 1; } .library-item-month-year { font-size: 10px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.04em; } .library-item-body { flex: 1 1 auto; min-width: 0; } .library-item-eyebrow { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 2px; } .library-item-name { font-family: 'Klee One', cursive; font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; } .library-item-name-pending { color: var(--text-muted); font-weight: 500; font-style: italic; } .library-item-meta { font-size: 11px; color: var(--text-muted); } .library-item-arrow { flex: 0 0 auto; font-size: 18px; color: var(--text-muted); margin-left: 4px; } .library-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); } .library-empty-icon { font-size: 48px; margin-bottom: 12px; } .library-empty-title { font-size: 16px; color: var(--text); font-weight: 600; margin-bottom: 8px; } .library-empty-sub { font-size: 13px; line-height: 1.7; max-width: 320px; margin: 0 auto; } /* ---- Email verification lock screen ---- */ .verify-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .verify-card { max-width: 420px; width: 100%; text-align: center; padding: 36px 24px 28px; } .verify-icon { font-size: 56px; margin: 16px 0 12px; } .verify-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 16px; line-height: 1.4; } .verify-lead { font-size: 13px; color: var(--text-muted); line-height: 1.8; margin: 0 0 18px; } .verify-email { display: inline-block; padding: 10px 18px; background: color-mix(in srgb, var(--primary) 8%, var(--ui-card-bg, #fff)); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 24px; word-break: break-all; max-width: 100%; } .verify-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .verify-tip { font-size: 11px; color: var(--text-muted); line-height: 1.7; padding: 10px 12px; background: color-mix(in srgb, var(--text-muted) 5%, var(--ui-card-bg, #fff)); border-radius: 8px; margin-bottom: 18px; } .verify-footer { font-size: 12px; color: var(--text-muted); } .verify-footer a { color: var(--primary); }