@media (min-width: 768px) and (max-width: 1023px) {
      .page { max-width: 640px; padding: 40px 32px 48px; }
      .greeting-row { gap: 10px; }
      .sticker-thumb { width: 72px; height: 72px; }
    }

    /* ─── Desktop (≥1024px) ─── */
    @media (min-width: 1024px) {
      .page { padding: 48px 40px 56px; }
      .greeting-row { gap: 10px; }
      .sticker-thumb { width: 72px; height: 72px; }
      .pos-btn { width: 56px; height: 44px; font-size: var(--text-small); }
    }

    /* ─── Small Mobile (<400px) ─── */
    @media (max-width: 400px) {
      .page { padding: 20px 16px 32px; }
      .greeting-btn, .wisdom-btn { padding: 8px 14px; font-size: var(--text-small); }
      .pill-btn { padding: 8px 12px; font-size: var(--text-caption); }
      .option-row { gap: 6px; }
      .color-dot { width: 38px; height: 38px; }
      .sticker-thumb { width: 56px; height: 56px; }
      .pos-btn { width: 46px; height: 36px; }
      .name-input { font-size: var(--text-small); padding: 8px 10px; }
    }

    /* ─── Touch Optimization ─── */